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

Question

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);
}

Vijay Maheriya · Accepted Answer · 2016-09-09 05:34:25Z

1

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 Sep 9, 2016 at 5:34

Vijay Maheriya

1,67916 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gaurav Shrimali · Accepted Answer · 2016-09-09 05:27:04Z

you can try with this code

<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>


<table id="tbUser">
  <tr>
    <th>Name</th>
    <th>Location</th>
    <th></th>
  </tr>
  <tr>
    <td>Amit</td>
    <td>Ghatkopar</td>
    <td><button class="btnDelete">Delete</button></td>
  </tr>
  <tr>
    <td>Vicky</td>
    <td>Powai</td>
    <td><button class="btnDelete">Delete</button></td>
  </tr>
  <tr>
    <td>Sunny</td>
    <td>Powai</td>
    <td><button class="btnDelete">Delete</button></td>
  </tr>
  <tr>
    <td>John</td>
    <td>NewYork</td>
    <td><button class="btnDelete">Delete</button></td>
  </tr>
</table> 

<script>
$(document).ready(function(){

 $("#tbUser").on('click','.btnDelete',function(){
       $(this).closest('tr').remove();
     });

});

</script>
</body>
</html>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related