如果复选框已更改，请在TD上更改舱位

Question

我只想 td (测试 1( 更改类(黄色(。 如何仅使 td(测试 1(更改颜色(而不是整行(。

$('input[name="cek"]').on('change', function() {
$(this).closest('tr').toggleClass('yellow', $(this).is(':checked'));
});
$(document).ready(function() {
$('input:checked[name="cek"]').closest('tr').addClass('yellow');
});

.yellow {
background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th nowrap>TGL</th>
<th>CEK</th>
<th>TITEL</th>
<th>VAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.12.19</td>
<td nowrap><input type='checkbox' name='cek' /></td>
<td nowrap>Test 1</td>
<td nowrap>1</td>
</tr>
</tbody>
</table>

Answer 1

您可以尝试以下代码。

$('input[name="cek"]').on('change', function() {$(this).closest('td').next('td').toggleClass('yellow',$(this).is(':checked'));});

.yellow{
background-color:yellow; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" >
<thead>
<tr>
<th nowrap>TGL</th>
<th>CEK</th>	
<th>TITEL</th>
<th>VAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.12.19</td>
<td nowrap><input type='checkbox' name='cek' /></td>
<td nowrap>Test 1</td>
<td nowrap>1</td>
</tr>
</tbody>
</table>

Answer 2

你可以做一些事情

$('input[name="cek"]').on('change', function() {
// $(this).closest('td').toggleClass('yellow',$(this).is(':checked'));
$(this).parents('td').siblings("td:eq(1)").toggleClass('yellow',$(this).is(':checked'));
});
$(document).ready(function() {
$('input:checked[name="cek"]').closest('tr').addClass('yellow');
});

.yellow{
background-color:yellow; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" >
<thead>
<tr>
<th nowrap>TGL</th>
<th>CEK</th>	
<th>TITEL</th>
<th>VAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.12.19</td>
<td nowrap><input type='checkbox' name='cek' /></td>
<td nowrap>Test 1</td>
<td nowrap>1</td>
</tr>
</tbody>
</table>

Answer 3

将parent()与next()一起使用。

$('input[name="cek"]').on('change', function() {
$(this).parent().next('td').toggleClass('yellow', $(this).is(':checked'));
});

.yellow {
background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th nowrap>TGL</th>
<th>CEK</th>
<th>TITEL</th>
<th>VAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.12.19</td>
<td nowrap><input type='checkbox' name='cek' /></td>
<td nowrap>Test 1</td>
<td nowrap>1</td>
</tr>
</tbody>
</table>