Javascript select 带有复选框的 table 整行（更改背景颜色）和 deselect 单击下一个复选框时

Question

我有 table 我想 select 整行（更改背景颜色）。行由复选框 select 编辑，当下一行被 select 编辑时，前一行必须取消 select。

这是我的table

<table id="table" border="1">
  <tr>
    <th></th>
    <th>ID</th>
    <th>Name</th>
    <th>Surname</th>
  </tr>
  <tr>
    <td class='row'>
      <input type='checkbox' class='check' onclick='markRow(0)'>
    </td>
    <td class='row'>-</td>
    <td class='row'>-</td>
    <td class='row'>-</td>
  </tr>
  <tr>
    <td class='row'>
      <input type='checkbox' class='check' onclick='markRow(1)'>       
    </td>
    <td class='row'>-</td>
    <td class='row'>-</td>
    <td class='row'>-</td>
  </tr>
  <tr>
    <td class='row'>
      <input type='checkbox' class='check' onclick='markRow(2)'>       
    </td>
    <td class='row'>-</td>
    <td class='row'>-</td>
    <td class='row'>-</td>
  </tr>
</table>

#table{
  border-collapse: collapse;
}

我用 class="row" 命名了每个 table 单元格。计算特定行所在的间隔并使用 for 循环，我应该能够为那些 table 单元格设置背景颜色。间隔是：第一行是 0-3，第二行是 4-7，第三行是 8-11。

我试过这个：

var clear1 = 0;
var clear2 = 0;
//these two should clear the previous row

var counter = 0;  
//this will ensure that clearing doesn't happen the first time


//function parameter is given by this checkbox from table  
//<input type='checkbox' class='check'onclick='markRow(0)'> 
function markRow(rowNumber){  
  var row = document.getElementsByClassName('row');
  var checkboxes = document.getElementsByClassName('check');

  var interval = rowNumber*4;

  for(var i=interval;i<=interval+3;i++){
    row[i].style = "background-color: dodgerblue;";
  }
  //for example if function gets parameter rowNumber=2, then it will color the cells in interval 8-11

  counter++;
  if(counter>1){
    for(var i=clear1;i<=clear2;i++){
      row[i].style = "";
    }
    checkboxes[clear1].checked = false;
  }
  clear1 = interval;
  clear2 = interval+3;
  //these two will save the interval from the current row and next time, for loop will delete style 
  //using this interval
}

它适用于第一行，但第二行和第三行有时不会勾选并且不会被删除select。我不知道这可能是什么问题。

Answer 1

您始终可以清除所有复选框和背景颜色，然后应用正确的背景颜色并使用行索引和复选框索引选中复选框

您还需要将类分配给您的行，以便使用 getElementsByClassName 获取它们而不是单元格。

避免使用全局变量，你不需要它们。

Fiddle 证明：https://jsfiddle.net/en20wa9j/

function markRow(rowNumber) {
  const row = document.getElementsByClassName('rowclass');
  const checkboxes = document.getElementsByClassName('check');
  // clear everything
  for (let i = 0; i < row.length; i++) {
    row[i].style = "background-color: transparent";
    checkboxes[i].checked = false;
  }
  // check the checkbox and color the row
  checkboxes[rowNumber].checked = true;
  row[rowNumber].style = "background-color: dodgerblue;";
}

<table id="table" border="1">
  <tr>
    <th></th>
    <th>ID</th>
    <th>Name</th>
    <th>Surname</th>
  </tr>
  <tr class='rowclass'>
    <td>
      <input type='checkbox' class='check' onclick='markRow(0)'>
    </td>
    <td class='row'>-</td>
    <td class='row'>-</td>
    <td class='row'>-</td>
  </tr>
  <tr class='rowclass'>
    <td>
      <input type='checkbox' class='check' onclick='markRow(1)'>
    </td>
    <td class='row'>-</td>
    <td class='row'>-</td>
    <td class='row'>-</td>
  </tr>
  <tr class='rowclass'>
    <td>
      <input type='checkbox' class='check' onclick='markRow(2)'>
    </td>
    <td class='row'>-</td>
    <td class='row'>-</td>
    <td class='row'>-</td>
  </tr>
</table>

Answer 2

问题出在checkboxes[clear1].checked = false;，因为只有3个复选框，不像行，所以你应该改用下面一行：

checkboxes[clear1 / 4].checked = false;

其中 clear1 / 4 将在之前选择行时分别为 0、1、2。

Javascript select 带有复选框的 table 整行（更改背景颜色）和 deselect 单击下一个复选框时

Javascript select entire row (change background color) of a table with checkbox and deselect when next checkbox is clicked

html

javascript

checkbox

row

html-table