1

我目前正在尝试在 HTML 中设置一个包含 2 列信息的表格。第三列有一个按钮，当按下时，它会从表中删除该条目。

我正在寻找的是用户无法选择表中第一个条目下方的项目。下面列出了我现在为该表提供的代码。

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

2 回答 2

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>

于 2016-09-09T05:27:04.047 回答
1

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

如果您想这样做，请参阅下面的代码。

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>

于 2016-09-09T05:34:25.577 回答