Is there a way to directly change the CSS style of the first row in a table when a checkbox is checked? I am facing an issue where the style does not apply correctly, and I need assistance in targeting the first row specifically with CSS.
Essentially, every time a checkbox is checked, the header row of my table should turn blue, and if it is unchecked, it should revert to its original color.
This is what I have tried:
<div class="col-md-3">
<label class="checkbox-inline control-label col-md-10"><input v-model="hasHeader" type="checkbox">Header Row?</label>
</div>
<table class="table table-responsive">
<tbody>
<tr v-for="(row,idx1) in tableRows" :class="{headerRowDefault: checkHeader}">
<td class="table-success" v-for="(col,idx2) in tableCols"><input v-model="table.tableGrid[idx1][idx2]" type="text" class="borderTbl" value="HEY"></td>
</tr>
</tbody>
</table>
My computed method for checkHeader:
checkHeader (idx2) {
alert('CHECKHEADER')
if (this.hasHeader === true && idx2 === 0) {
return true
} else {
return false
}
}
Is there a way to trigger the style change on the first row based on the checkbox? While I can manually apply a CSS style to the first row, I am looking for a dynamic solution. Any suggestions would be appreciated.