Question

我试着只得到我桌子的第一个TR。如果我点击每行中的删除按钮，它仍然适用。我无法得到它！我想删除提交后的第一行...所有工作除了第一行！我在myTable的行中使用来自我的SQL for Ids标签的相同Id来删除它们......不知道我是否清楚......

<table id ="myTable" border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable1">

    <thead class="fixedHeader1">
    <tr>
        <th><center><a href="#">Id</a></center></th>
        <th><center><a href="#">User</a></center></th>
        <th><center><a href="#">Dest</a></center></th>
                    <th><center><a href="#">Msg</a></center></th>
                    <th><center><a href="#">Title</a></center></th>
                    <th><center><a href="#">Date</a></center></th>
                    <th><center><a href="#">Hour</a></center></th>
                    <th><center><a href="#">Langue</a></center></th>
                    <th><center><a href="#">Del</a></center></th>
    </tr>
</thead>

    <tbody class="scrollContent1">

 <?  

      $sql="SELECT * FROM messages ORDER BY username";
  $result = mysqli_query($con,$sql);          
  while($row = mysqli_fetch_array($result)) {

           echo'<tr id="'.$row[messageid].'">                           
           <td><center>'.$row[messageid].'</center></td>               
           <td><center>'.addslashes(utf8_decode($row[username])).'</center></td>
           <td><center>'.addslashes(utf8_decode($row[dest])).'</center></td>
                       <td><center>'.utf8_decode($row[message]).'</center></td>
                       <td><center>'.$row[titre].'</center></td>
                       <td><center>'.$row[date].'</center></td>
                       <td><center>'.$row[heure].'</center></td>
                       <td><center>'.$row[langue].'</center></td>
           <form name="ajaxform" id="ajaxform" action="delete_msg_SQL.php" method="POST">

                       <td><center><input type="button" class= "myButton" id="'.$row[messageid].'" value="X"/><input type="button" style="visibility:hidden" id="simple-post"/></center></td>
                       </form>
            </tr>';


  }



 ?>
    </tbody>
</table>

Jquery代码：

<script>

$(function(){
$('.myButton').click(function() {

    var myId = $(this).attr('id');
    $("#ajaxform").append('<input type="hidden" name="id" value="'+ myId + '"/>');             

      // HERE the PROBLEM If I click on the delete button on each rows it works anyway instead of the first one! 
      if ($(this).children('tr:first')) {
        alert('ok');            
      }
      $( '#simple-post' ).click(); 
      $('#'+ myId).remove();        
}); 
});
</script>

Answer 1

编辑好的，然后是：

NodeList.prototype.indexOf = function(x){
 for(var i=0;i<this.length;i++) if(this[i] == x) return i;
 return -1;
}
function del(o){ 
 var table = o.parentNode.parentNode.parentNode;
 var row = o.parentNode.parentNode;
 table.deleteRow(table.childNodes.indexOf(row));
}
...
...<td><input type="button" value="Delete row" onclick="del(this);" /></td>...

编辑MK II：好的，尝试保留原型扩展，但将del函数更改为：

function del(o){ 
 var table = o.parentNode.parentNode.parentNode.parentNode.parentNode;
 var row = o.parentNode.parentNode.parentNode;
table.deleteRow(table.childNodes.indexOf(row));
}

然后带有“删除”按钮的表格单元格应如下所示：

<td><center><input type="button" class= "myButton" id="'.$row[messageid].'" value="X" onclick="del(this);"/>...

Answer 2

尝试代替

$('#'+ myId).remove();

把这段代码

$(this).closest('tr').remove()

它将遍历树（从按钮元素）并在途中删除第一个 tr 。

jQuery closest reference

要检查第一行，请尝试此操作

var tr = $(this).closest('tr')[0];

if (tr === $('#myTable tr:eq(1)')[0]) {
    alert('you clicked a button in the first row');
}

这里的工作示例 JSBin

找到第一个表格行

2 个答案: