根据复选框的单击来改变表内行的颜色

JQuery: Change the color of the row inside a table based on the checkbox click

本文关键字：颜色 改变 复选框 单击      更新时间：2023-09-26

我有一个table，有一个庞大的数据集。现在我想做的是，当用户取消选中特定行的复选框时，我想将颜色更改为灰色。我做了什么:

$('tr').click(function () {
    if(this.style.background == "" || this.style.background =="white") {
        $(this).css('background', 'grey');
    }
    else {
        $(this).css('background', 'white');
    }   
});
$(".uncheck").change(function(){
    alert("cehc");
    var ischecked= $(this).is(':checked');
    alert(ischecked);
    if(!ischecked){
        $(this).css('background', 'grey');
    }
    else{
        $(this).css('background', 'white');
    }
});

上面的函数我已经写了，但单独工作正常。它就像第一个函数将工作，当我点击行和第二个函数将警告取消选中复选框，但不改变颜色为灰色。

如何确定是否一个特定的复选框已被选中的表的一行，并将行颜色更改为灰色?

尝试使用单个函数并使用css类:

$(document).ready(function() {
  $('tr').click(function() {
    var inp = $(this).find('.check');
    var tr = $(this).closest('tr');
    inp.prop('checked', !inp.is(':checked'))
    tr.toggleClass('isChecked', inp.is(':checked'));
  });
  // do nothing when clicking on checkbox, but bubble up to tr
  $('.check').click(function(e) {
    e.preventDefault();
  })
})
.isChecked {
  background-color: grey;
}
table {
  width: 100%;
  border-collapse: collapse;
}
tr {
  background-color: #fafafa;
}
/* click-through element */
.check {
  pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" class="check">
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="check">
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="check">
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="check">
    </td>
    <td></td>
  </tr>
</table>

"change"中的"this"是指复选框，而不是行。可以使用closest方法定位行:

$(this).closest('tr').css('background', 'grey');


$('tr').click(function () {
    if(this.style.background == "" || this.style.background =="white") {
        $(this).css('background', 'grey');
    }
    else {
        $(this).css('background', 'white');
    }   
});
$(".uncheck").change(function(){
    alert("check change");
    var ischecked= $(this).is(':checked');
    alert(ischecked);
    if(!ischecked){
        $(this).closest('tr').css('background', 'grey');
    }
    else{
        $(this).closest('tr').css('background', 'white');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
      <tr>
         <td><input type="checkbox" class="uncheck"/></td>
         <td>1</td>
         <td>1</td>
         <td>1</td>
      </tr>
    </tbody>
</table>

试试这个:

$(".uncheck").change(function(){
    $(this).toggleClass('grey white')
});
这应该是你的css 
.grey { background: grey; }
.white { background: white; }

你可以选择复选框属性:

    $(".uncheck").change(function(){
     alert("cehc");
      var ischecked= $(this).prop('checked');
      alert(ischecked);
      if(!ischecked){
      $(this).parent().closest('tr').css('background', 'grey');
   }
   else{
     $(this).parent().closest('tr').css('background', 'white');
   }
  });

如果你在<table>里面有复选框，那么你可以使用下面的代码:

$(".uncheck").change(function(){
    var ischecked= $(this).is(':checked');
    if(!ischecked){
      $(this).closest('tr').css('background', 'grey');
    }
    else{
      $(this).closest('tr').css('background', 'white');
    }
});
演示工作

on()任何触发change事件的checkbox都这样做:

使用this closest('tr')和.find('td') to .css('background','grey')

片段

$('input[type="checkbox"]').on('change', function(e) {
  var self = this;
  if (!self.checked) {
    $(this).closest('tr').find('td').css('background', 'grey');
  }
});
table,
th,
td {
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>CHX</th>
      <th>Col1</th>
      <th>Col2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan='3'>&nbsp;</td>
    </tr>
  </tfoot>

相关文章：