Cannot highlight a particular table row on button click from the same row-CodePudding

So I have a system that deactivates a certain contract on a table whenever it is on or after the expiry or end date. Here is what it looks like.

What I wish to achieve is to just highlight a particular single table row that needs to be highlighted to indicate "deactivated" upon button click.

I have already tried the following solutions which unfortunately did not work for me:

/*   WORKS, BUT ONLY ONE ROW HIGHLIGHTED AND CANNOT HIGHLIGHT NTH ROWS  */
function selectRow() {
  document.querySelector("input[type='button']").addEventListener('click', function() {
    $(this).closest('tr').css('background-color', 'red');
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="datatablesSimple">
  <thead>
    <tr>
      <th>Solicitor</th>
      <th>End Date</th>
      <th>Days to Go</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Dummy1</td>
      <td>2022-10-20</td>
      <td>4</td>
      <td><input type="button"  id="deac" value="Deactivate" onclick="selectRow();" /></td>
    </tr>
    <tr>
      <td>Dummy2</td>
      <td>2022-4-26</td>
      <td>200</td>
      <td><input type="button"  id="deac" value="Deactivate" onclick="selectRow();" /></td>
    </tr>

  </tbody>
</table>

/*             WORKS, BUT ONCLICK NEEDS TO BE DOUBLE-CLICKED          */
function selectRow() {
  $('td input[type="button"]').on('click', function() {
    $(this).closest('tr').css('background-color', 'red');
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="datatablesSimple">
  <thead>
    <tr>
      <th>Solicitor</th>
      <th>End Date</th>
      <th>Days to Go</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Dummy1</td>
      <td>2022-10-20</td>
      <td>4</td>
      <td><input type="button"  id="deac" value="Deactivate" onclick="selectRow();" /></td>
    </tr>
    <tr>
      <td>Dummy2</td>
      <td>2022-4-26</td>
      <td>200</td>
      <td><input type="button"  id="deac" value="Deactivate" onclick="selectRow();" /></td>
    </tr>

  </tbody>
</table>

/*             WORKS, BUT ALL ROWS ARE HIGHLIGHTED               */
function selectRow() {
  var tbl = document.querySelector("table tbody");
  [...tbl.rows].forEach(el => {
    el.classList.toggle('table-danger');
  });
}

.table-danger {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="datatablesSimple">
  <thead>
    <tr>
      <th>Solicitor</th>
      <th>End Date</th>
      <th>Days to Go</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Dummy1</td>
      <td>2022-10-20</td>
      <td>4</td>
      <td><input type="button"  id="deac" value="Deactivate" onclick="selectRow();" /></td>
    </tr>
    <tr>
      <td>Dummy2</td>
      <td>2022-4-26</td>
      <td>200</td>
      <td><input type="button"  id="deac" value="Deactivate" onclick="selectRow();" /></td>
    </tr>

  </tbody>
</table>

CodePudding user response：

Change this...

function selectRow() {
  $('input[type="button"]').on('click', function() {
    $(this).closest('tr').css('background-color', 'red');
  });
}

...to this.

$('input[type="button"]').on('click', function() {
  $(this).closest('tr').css('background-color', 'red');
});

See the snippet below.

$('input[type="button"]').on('click', function() {
  $(this).closest('tr').css('background-color', 'red');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="datatablesSimple">
  <thead>
    <tr>
      <th>Solicitor</th>
      <th>End Date</th>
      <th>Days to Go</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Dummy1</td>
      <td>2022-10-20</td>
      <td>4</td>
      <td><input type="button"  id="deac" value="Deactivate"/></td>
    </tr>
    <tr>
      <td>Dummy2</td>
      <td>2022-4-26</td>
      <td>200</td>
      <td><input type="button"  id="deac" value="Deactivate"/></td>
    </tr>

  </tbody>
</table>