Question

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

我附上了一个模拟：

＆＃13;

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();

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

Answer 2

在这里，我尝试使用更少代码的差异方法。如果从控制台检查，您将看到更改：click事件将该类添加到该行，并重置其他行的类。

var mytable = document.getElementById("example");
var myrows = mytable.rows;

function giveStyle(el) {
  Array.from(myrows).map(e => e.className = "");
  el.className = "someclass";
}

.someclass {
  /*something here */
}

<table id="example">
  <tr>
    <td>First</td>
    <td>Last</td>
    <td>Age</td>
  </tr>
  <tr onclick="giveStyle(this)">
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  <tr onclick="giveStyle(this)">
    <td>Alice</td>
    <td>Wilsom</td>
    <td>40</td>
  </tr>
  <tr onclick="giveStyle(this)">
    <td>Otto</td>
    <td>Weininger</td>
    <td>25</td>
  </tr>
</table>

Answer 3

请同时使用此功能：

function resetRowHandlers() {
        var table = document.getElementById("example");


        var rows = table.getElementsByTagName("tr");
        for (i = 0; i < rows.length; i++) {
        var row = table.rows[i];

        row.getElementsByTagName("td")[0].style.backgroundColor = "none"; 
        row.firstElementChild.style.borderLeft = "transparent solid 2px";
        row.lastElementChild.style.borderRight = "transparent solid 2px";


        }
    }

也可以点击行调用此函数，即createClickHandler

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

3 个答案: