我有一个问题，这是一个前一个问题。还有一件事我想添加，但td背景不会改变，除非直接按下复选框。
-特定的td背景将改变一旦复选框被选中。
但是如果我按下一个按钮，它会选中所有的复选框。背景不会改变。
====ejs code====
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="views/css/index.css">
</head>
<body>
<form name='formMassCheckIn'>
<input type='button' value='Check All' onclick='js_select_all(this)'/>
<table id="myTable">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
</tr>
<% for(let a = 0; a < 10; a ++){ %>
<tr>
<td id="first">X</td>
<td id="first">X</td>
<td>X</td>
<td>X</td>
<td><input type="checkbox" name='circSelected'></td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td><input type="checkbox" name='circSelected'></td> </tr>
<% } %>
</table>
</form>
</body>
</html>
====javascript====
function js_select_all(btn){
if (btn.value == "Check All")
{
for (var i=0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
if(!document.formMassCheckIn.circSelected[i].checked)
document.formMassCheckIn.circSelected[i].checked = true;
}
btn.value ="Uncheck All";
} else
{
for (var i=0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
if (document.formMassCheckIn.circSelected[i].checked)
document.formMassCheckIn.circSelected[i].checked = false;
}
btn.value = "Check All";
}
}
const markUpTo = 5;
document.querySelectorAll('#myTable input').forEach((btn, i) => {
btn.addEventListener("change", () => {
for(let a = i * markUpTo; a < (i * markUpTo + markUpTo); a ++){
document.querySelectorAll('#myTable tr td')[a].classList.toggle('selected');
}
});
});
====css====
table {
width: 100%;
border-collapse: collapse;
}
th {
width: 10%;
}
td {
text-align: center;
border: 1px solid black;
}
.selected {
background: red;
}
可以更改特定的td背景。
-直接选中复选框或点击过滤器按钮(选中全部)。
更新代码
试试这个:
const cells = document.querySelectorAll('td');
cells.forEach((cell, i) => {
if (cell.querySelector('input')) {
const input = cell.querySelector('input');
input.addEventListener("change", () => {
for (let a = i - input.dataset.group + 1; a < i + 1; a++) document.querySelectorAll('#myTable tr td')[a].classList.toggle('selected');
});
}
});
// Simulate a click for all inputs
const checkAllBoxes = () => document.querySelectorAll('#myTable input').forEach(input => input.click());
// Attach the event on input
document.getElementById('checkAll').addEventListener('click', () => checkAllBoxes());table {
width: 100%;
border-collapse: collapse;
}
th {
width: 5%;
}
td {
text-align: center;
border: 1px solid black;
}
.selected {
background: red;
}<table id="myTable">
<input type='button' value='Check / Uncheck All' id='checkAll' />
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
</tr>
<tr>
<td>X</td>
<td>X</td>
<td><input data-group=3 type="checkbox"></td>
<td>X</td>
<td><input data-group=2 type="checkbox"></td>
<td>X</td>
<td>X</td>
<td>X</td>
<td><input data-group=4 type="checkbox"></td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td><input data-group=5 type="checkbox"></td>
<td>Example</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td><input data-group=5 type="checkbox"></td>
</tr>
<tr>
<td><input data-group=1 type="checkbox"></td>
<td>X</td>
<td>X</td>
<td>X</td>
<td><input data-group=4 type="checkbox"></td>
<td>Example</td>
<td>X</td>
<td>X</td>
<td><input data-group=3 type="checkbox"></td>
<td>X</td>
<td>X</td>
<td><input data-group=3 type="checkbox"></td>
<td>Example</td>
<td>X</td>
<td><input data-group=2 type="checkbox"></td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td><input data-group=5 type="checkbox"></td>
</tr>
</table>