javascript - 选择下一行时，清除先前选择的表格行

Question

当在表格中选择一行时，我有以下代码来创建左右边框。我希望边框仅在当前选中该行时出现，而在未选中时消失。

我附上一个模型:

function addRowHandlers() {
    var table = document.getElementById("example");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler =
            function(row) {
                return function() {
                    var cell = row.getElementsByTagName("td")[0];

                    row.getElementsByTagName("td")[0].style.backgroundColor = "white";
                    row.firstElementChild.style.borderLeft = "black solid 2px";
                    row.lastElementChild.style.borderRight = "black solid 2px";
                    var id = cell.innerHTML;
                    alert("id:" + id);
                };
            };

        currentRow.onclick = createClickHandler(currentRow);
    }
}
window.onload = addRowHandlers();

tr td:first-child { border-left:2px solid transparent;}
tr td:last-child { border-right:2px solid transparent;}

<div>
<table id="example">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</div>

Answer 1

为当前的选择样式使用一个类(我将其命名为highlight)然后点击从所有行中删除这个类

for (var i = 0; i < table.rows.length; i++) {
     table.rows[i].classList.remove('highlight');
}

然后使用 row.className += "highlight"; 将其添加到当前行，检查一下:

function addRowHandlers() {
  var table = document.getElementById("example");
  var rows = table.getElementsByTagName("tr");
  for (i = 0; i < rows.length; i++) {
    var currentRow = table.rows[i];
    var createClickHandler =
      function(row) {
        return function() {
          for (var i = 0; i < table.rows.length; i++) {
             table.rows[i].classList.remove('highlight');
          }
          
          var cell = row.getElementsByTagName("td")[0];

          row.getElementsByTagName("td")[0].style.backgroundColor = "white";
          row.className += "highlight";
          var id = cell.innerHTML;
        };
      };

    currentRow.onclick = createClickHandler(currentRow);
  }
}
window.onload = addRowHandlers();

tr:not(.highlight) td:first-child { border-left:2px solid transparent;}
tr:not(.highlight) td:last-child { border-right:2px solid transparent;}
tr.highlight td:first-child { border-left:2px solid black;}
tr.highlight td:last-child { border-right:2px solid black;}

<div>
<table id="example">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
</div>