Harriet Harriet - 3 months ago 13
Javascript Question

Clear previously selected table row, when the next row is selected

I have the following code to create a left and right border when a row is selected in a table. I want the borders to only appear when the row is currently selected, and to disappear when it is not selected.

I attach a mock up:



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

Use a class for the current selection styles ( I named it highlight) then on click remove this class from all rows with this

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

and then add it to the current row with row.className += "highlight"; check it out:

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>

Comments