次の行が選択されたときに、以前に選択されたテーブル行を消去します。

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

行のクリックでこの関数を呼び出します現在のseのクラスを使用する

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>

：lectionスタイルは、それをチェックアウトクリックでこの

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

ですべての行から、このクラスを削除してから、row.className += "highlight";で現在の行に追加する（私はhighlightそれを命名しました）

Answer 2

：

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

Answer 3

ここでは、少ないコードで差分アプローチを試みました。 コンソールから調べると、change：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>