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

Harriet 发表于 Dev

哈里特

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

我附上一个模拟：

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>

西奥多·K。

将一个类用于当前选择样式（我将其命名为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>