使用复选框选择指定表格样式更改答案

【问题标题】：Specify table style changes with checkbox selection使用复选框选择指定表格样式更改
【发布时间】：2020-02-27 23:25:42
【问题描述】：

有没有一种方法可以将所选行的样式更改为带有复选框选择的样式。选择“单击我”按钮时，所选行的样式将发生变化。我可以删除行（使用另一个按钮），但不能更改所选行的样式。行将被删除或样式将更改。

有人可以帮助我，或者向我展示样式问题的正确方向吗？

HTML：

<input class="dent" type="button" value="style">
<input class="delBtn" type="button" value="Delete">

<table>
  <tr>
  <td style="width: 20px;">
    <input type="checkbox" class="chk">
   </td>
  <td><input type="text"></td>
  <td><input type="text"></td>
  <td><input type="text"></td>

  </tr><br>
  <tr>
  <td style="width: 20px;">
    <input type="checkbox" class="chk">
   </td>
  <td><input type="text"></td>
  <td><input type="text"></td>
  <td><input type="text"></td>

  </tr><br>
  <tr>
  <td style="width: 20px;">
    <input type="checkbox" class="chk">
   </td>
  <td><input type="text"></td>
  <td><input type="text"></td>
  <td><input type="text"></td>

  </tr><br>
  <tr>
  <td style="width: 20px;">
    <input type="checkbox" class="chk">
   </td>
  <td><input type="text"></td>
  <td><input type="text"></td>
  <td><input type="text"></td>

  </tr><br>
</table>

JS 删除一行

function delBoxes() {
   let boxes = document.getElementsByClassName('chk');
   for (let i = 0; i < boxes.length; i++) {
     let box = boxes[i];
     if (box.checked) {
       let rowTag = box.parentNode.parentNode;
       let tableTag = box.parentNode.parentNode.parentNode;
       tableTag.removeChild(rowTag);
     }
   }
}

document.getElementById("deleteButton").addEventListener("click", delBoxes);

【问题讨论】：

样式会改变是什么意思？您共享的代码中没有样式更改逻辑。
他的意思是把样式改成任何样式（只改颜色就可以了）
你可以在你的表格元素上切换一个类

标签： javascript html css html-table

【解决方案1】：

我对您的 HTML 进行了一些更改，为按钮和行添加了 ID。我还在复选框中添加了数据集，这样您就可以知道要执行任务的行（更改样式或删除）

function delBoxes() {
   let boxes = document.getElementsByClassName('chk');
   for (let i = boxes.length - 1; i >= 0; i--) {
     let box = boxes[i];
     if (box.checked) {
       let rowTag = document.getElementById(box.dataset.row);
       rowTag.parentNode.removeChild(rowTag);
     }
   }
}

function style() {
   let boxes = document.getElementsByClassName('chk');
   for (let i = boxes.length - 1; i >= 0; i--) {
     let box = boxes[i];
     if (box.checked) {
       let rowTag = document.getElementById(box.dataset.row);
       rowTag.style.backgroundColor = "red";
     }
   }
}

document.getElementById("deleteButton").addEventListener("click", delBoxes);
document.getElementById("styleButton").addEventListener("click", style);

<input class="dent" type="button" value="style" id="styleButton">
<input class="delBtn" type="button" value="Delete" id="deleteButton">

<table>
  <tr id="row1">
    <td style="width: 20px;">
      <input type="checkbox" class="chk" data-row="row1">
     </td>
    <td><input type="text" value="I am 1"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr id="row2">
    <td style="width: 20px;">
      <input type="checkbox" class="chk" data-row="row2">
     </td>
    <td><input type="text"  value="I am 2"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr id="row3">
    <td style="width: 20px;">
      <input type="checkbox" class="chk" data-row="row3">
     </td>
    <td><input type="text" value="I am 3"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr id="row4">
    <td style="width: 20px;">
      <input type="checkbox" class="chk" data-row="row4">
     </td>
    <td><input type="text" value="I am 4"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>

【讨论】：