[FIXED] How to prevent selection of certain rows in an HTML table with JavaScript

Issue

I am currently trying to setup a table in HTML with 2 columns of information. The 3rd column has a button, and when pressed, it deletes that entry from the table.

What I am looking for is that the user cannot select an item below the first entry in the table. The code I have for the table right now is listed below.

HTML:

<table>
  <tr>
    <th>Firstname</th>
    <th>Issue</th> 
    <th>Select</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>
            <input type="button" value="Delete" onclick="deleteRow(this)"/>

    </td>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>
            <input type="button" value="Delete" onclick="deleteRow(this)"/>

    </td>
  </tr>
</table>

JavaScript:

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
} 

Solution

As per i understand your question you need to delete first row not a second row.

Please see below code if you want to do like this.

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  if(row.rowIndex<=1)
    row.parentNode.removeChild(row);
} 

<table>
  <tr>
    <th>Firstname</th>
    <th>Issue</th> 
    <th>Select</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>
            <input type="button" value="Delete" onclick="deleteRow(this)"/>

    </td>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>
            <input type="button" value="Delete" onclick="deleteRow(this)"/>

    </td>
  </tr>
</table>

Answered By - Vijay Maheriya

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)