HTML JavaScript Table

Question

我目前正在尝试在 HTML 中设置一个包含 2 列信息的 table。第三列有一个按钮，按下时，它会从 table.

中删除该条目

我正在寻找的是用户不能 select table 中第一个条目下方的项目。下面列出了我现在拥有的 table 代码。

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>

JAVA 脚本：

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

Answer 1

你可以试试这个代码

<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>

Answer 2

据我了解你的问题，你需要删除第一行而不是第二行。

如果你想这样做，请看下面的代码。

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>

HTML JavaScript Table

HTML JavaScript Table

javascript

html

html-table

htmlbutton