使用复选框更改行和列的字体颜色答案

【问题标题】：Changing font colors of rows and columns with checkboxes使用复选框更改行和列的字体颜色
【发布时间】：2018-04-28 13:36:13
【问题描述】：

我正在寻找一种方法来更改表格的行和列内容的字体颜色，并在表格的顶部和左侧分配了复选框。因此，当单击复选框时，相应的行或列内容都会更改字体颜色。我不需要多种颜色。我只需要将字体颜色更改为指定的颜色。可以同时单击多行复选框和列复选框，这不会导致复杂性。感谢您的帮助！

这里还有一个 jsfiddle：https://jsfiddle.net/u6xzfnq7/

.tb {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

.tb td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
}

  

 <table class="tb">
    <tbody>
        <tr>
            <td></td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check1" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check2" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check3" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check4" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check5" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check6" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check7" /> Switch</label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check8" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check10" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check11" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check12" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Text</td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check13" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check14" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check15" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check16" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check17" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Number</td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check18" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check19" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check20" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check21" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check22" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check23" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
    </tbody>
</table>

【问题讨论】：

您的 HTML 无效：您的 id 不唯一，每个复选框都使用 id "check"。
谢谢，塞巴斯蒂安。我更改了“id”。
所以勾选时在行中添加一个类。

标签： javascript jquery html css checkbox

【解决方案1】：

你可以这样做：

//Add listener on checbox inside the table with class .tb
$('.tb input[type="checkbox"]').change(function() {

  //Remove all selected
  $('.tb td').removeClass('selected');

  //Add class on rows
  //Select all checked checkbox on the first column
  //Select the parent td and select its siblings
  //Add Class
  $('.tb tr>td:first-child').find('input[type="checkbox"]:checked').each(function() {
    $(this).parent().parent().addClass('selected').siblings().addClass('selected');
  })

  //Add class on columns
  //Select all checkboxes on the first row.
  //Loop and check if checked.
  //If checked, add class on the column
  $('.tb tr:first-child').find('input[type="checkbox"]').each(function(i) {
    if ($(this).is(":checked"))
      $('.tb tr>td:nth-child(' + (i + 2) + ')').addClass('selected');
  })
})

.tb {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

.tb td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
}

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tb">
  <tbody>
    <tr>
      <td></td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
				<input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
  </tbody>
</table>

【讨论】：

非常感谢，埃迪。太棒了。我在寻找什么。
乐于助人:)
只是告诉你，我已经玩过你的代码并添加了一个新答案。我告诉你是因为你可能想考虑我使用的一些方法。 :) 请不要将其视为攻击！...
@TakitIsy 谢谢你通知我，我考虑了你的代码，我想我会坚持我的:) 你在<tr> 和<td> 上添加了这个类，这使得它不一致。不是我的菜。谢谢你通知我:)
@Eddie 当然，但我发现能够对交叉点进行风格化很有趣。无论如何，将所有 td 样式化而不是 tr 会很容易。我发现你的指令$(this).parent().parent().addClass('selected').siblings().addClass('selected'); 太复杂了。那主要是因为它比我想增强您的答案！ ;)

【解决方案2】：

我会按照以下方式进行：

var color = "red";
$('input[type=checkbox]').click(function(){
  var id = $(this).attr('id');
  var isChecked = $(this).prop('checked');
  var idNum = $(this).attr('id').replace('check','');
  if(idNum > 7){
    if(isChecked)
      $(this).closest('td').siblings().css('color', color);
    else
      $(this).closest('td').siblings().css('color', '');
  }
  else if(idNum < 23){
    $(this).closest('tr').siblings().each(function(i, tr){
      if(isChecked)
        $(this).find('td:eq("'+idNum+'")').css('color', color);
      else
        $(this).find('td:eq("'+idNum+'")').css('color', '');
    }); 
  }
})

.tb {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

.tb td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
}

.nochange,
tr {
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tb">
  <tbody>
    <tr>
      <td></td>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check1" /> Switch</label>
      </td>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check2" /> Switch</label>
      </td>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check3" /> Switch</label>
      </td>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check4" /> Switch</label>
      </td>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check5" /> Switch</label>
      </td>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check6" /> Switch</label>
      </td>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check7" /> Switch</label>
      </td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check8" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check10" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check11" /> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check12" /> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check13" /> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check14" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check15" /> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check16" /> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check17" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check18" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check19" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check20" /> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check21" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check22" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check23" /> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
  </tbody>
</table>

【讨论】：

非常感谢，马蒙。

【解决方案3】：

我知道你已经接受了 Eddie 的回答，但无论如何都在这里。
为了加强他的回答，这里有一个 sn-p 显示我会做什么。
请花点时间考虑一下 javascript 中使用的方法，这是我对 Eddie 代码所做的唯一更改。我添加了 cmets 以使其更清晰。

另外，我在 CSS 中添加了一些有趣的东西！

// Listen to checkboxes change on table
$('.tb input[type="checkbox"]').change(function() {

  // Remove the class on all trs and tds
  $('.tb tr, .tb td').removeClass('selected');

  // Add the class only to checked trs (rows)
  // Note that there is no need to use the .find() method
  // You can just move the whole selection string in the $() query
  $('.tb tr>td:first-child input[type="checkbox"]:checked').each(function() {
    // closest() is a really nice method, consider it! Way clearer than .parent().parent()…
    $(this).closest('tr').addClass('selected');
  })

  // Add the class only to checked tds (columns)
  var tds = $('.tb tr:first-child td');
  $('.tb tr:first-child input[type="checkbox"]:checked').closest('td').each(function() {
    // The each only contains selected tds, not all of them
    // Get index for each of the selecteds (+1 because index starts at 0) and style them!
    $('.tb tr>td:nth-child(' + (tds.index($(this)) + 1) + ')').addClass('selected');
  })
})

.tb {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

.tb td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
}

.selected {
  color: red;
}


/* The funny thing is that we could stylize intersections */

.selected .selected {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tb">
  <tbody>
    <tr>
      <td></td>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
				<input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
  </tbody>
</table>

更多关于.closest()：https://api.jquery.com/closest/
更多关于.index()：https://api.jquery.com/index/

希望对你有帮助。

【讨论】：

非常感谢，Takit Isy。
@Max 如果你觉得它有用，我很高兴！

【解决方案4】：

我不确定这是否是您所追求的。这是fiddle。

<table class="tb">
   <tbody>
      <tr>
         <td></td>
         <td>
            <label class="color-switch">
            <input data-col="0" type="checkbox" /> Switch</label>
         </td>
         <td>
            <label class="color-switch">
            <input data-col="1" type="checkbox" /> Switch</label>
         </td>
      </tr>
      <tr>
         <td>
            <label class="color-switch">
            <input type="checkbox" data-row="0" /> Switch</label>
         </td>
         <td data-row="0" data-col="0">Text</td>
         <td data-row="0" data-col="1">Text</td>
      </tr>
      <tr>
         <td>
            <label class="color-switch">
            <input type="checkbox" data-row="1" /> Switch</label>
         </td>
        <td data-row="1" data-col="0">Text</td>
         <td data-row="1" data-col="1">Text</td>
      </tr>

   </tbody>
</table>
<style type="text/css">
   .tb {
       font-size: 12px;
       border: 1px solid #CCC;
       font-family: Arial, Helvetica, sans-serif;
   }
   .tb td {
       padding: 4px;
       margin: 3px;
       border: 1px solid #CCC;
   }
   .nochange,
   tr {
    background-color: white;
   }

   td.row-checked.col-checked{
    color: red;
   }
</style>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
    var $inputCheckboxRow = $('input[type="checkbox"][data-row]');
    var $inputCheckboxCol =  $('input[type="checkbox"][data-col]');

    $inputCheckboxRow.on('change', onInputCheckBoxRowChange );
    $inputCheckboxCol.on('change', onInputCheckboxColChange );

    function onInputCheckBoxRowChange(){
        let row = $(this).data('row');
        if($(this).is(':checked')){
            $('td[data-row='+ row +']').addClass('row-checked')
        }else{
            $('td[data-row='+ row +']').removeClass('row-checked')
        }
    }

    function onInputCheckboxColChange(){
        let col = $(this).data('col');
        if($(this).is(':checked')){
            $('td[data-col='+ col +']').addClass('col-checked')
        }else{
            $('td[data-col='+ col +']').removeClass('col-checked')
        }
    }

</script>

【讨论】：

谢谢，日产。我在小提琴上试过。但这似乎不是我想要的。我现在得到了答案。感谢您的时间和帮助。