html - 选定行，更改第一个和最后一个单元格边框

Question

我有一个基本表格，希望所选行在第一个单元格的左侧和最后一个单元格的右侧有边框。这将向用户表明该行当前已被选中。

我可以更改单元格的背景颜色 - 所以我知道可以按照我想要的方式使用 javascript 来完成它；我只需要更改正确的属性即可使边框效果发生。

谢谢!

我做了一个模型给你看看:

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.getElementsByTagName("td")[0].style.border = "black solid 2px;";
                                        
                                        var id = cell.innerHTML;
                                        alert("id:" + id);
                                 };
            };

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

<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

您需要在javascript 中使用borderLeft 和borderRight。

请参阅下面的代码片段。让我知道是否有帮助

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>