我有一个表格,我想在其中选择整行(更改背景颜色)。 Rows are selected by a checkbox and when a next row is selected, the previous row has to deselect.
这是我的 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"命名了每个表格单元格。计算特定行所在的间隔并使用 for 循环,我应该能够为这些表格单元格设置背景颜色。间隔是:第一行是 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
}
它适用于第一行,但第二行和第三行有时不会检查,也不会被取消选择。我不知道有什么问题。
最佳答案
您始终可以清除所有复选框和背景颜色,然后应用正确的背景颜色并使用行索引和复选框索引检查复选框
您还需要为您的行分配类,以便使用 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>
关于Javascript选择带有复选框的表格的整行(更改背景颜色)并在单击下一个复选框时取消选择,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/61513096/