通过单击同一行中的href链接来编辑或删除当前表行

Question

我正在构建我的HTML表格，如下所示

HTML

<table cellpadding="0" cellspacing="0" border="0" class="rqstLines" id="rqstLines" width="90%">
<thead>
    <tr>
        <th>Product Code</th>
        <th>Order Qty</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
</thead>
<tbody>
</tbody>
</table>

的JavaScript

    var ProductCode = $( "#ProductCode option:selected" ).val();
    var productcode = $( "#ProductCode option:selected" ).text();
    var qty = document.getElementById("OrderQty").value;

    var table=document.getElementById("rqstLines");
    var row=table.insertRow(-1);
    row.id = "tr-"+tblcounter;
    var cell1=row.insertCell(0);
    var cell2=row.insertCell(1);
    var cell3=row.insertCell(2);
    var cell4=row.insertCell(3);

    cell1.innerHTML=productcode;
    cell2.innerHTML=qty; 
    cell3.innerHTML='<a href="#" onClick="editTable();">Edit</a>';  
    cell4.innerHTML='<a href="#" onClick="deleteRow();">Delete</a>';

    tblcounter++;

这是我的deleteRow（）

function deleteRow() {
    $(this).closest('tr').remove();
} 

但是我无法删除该行，即使我尝试从当前表行的td获取文本，它也会返回null，如下所示：

alert( $(this).parent().siblings(':eq(0)').html() );

这里有什么问题？

Answer 1

从

更改您的代码

：此

      cell4.innerHTML='<a href="#" onClick="deleteRow();">Delete</a>';

以

     cell4.innerHTML='<a href="#" onClick="deleteRow(this);">Delete</a>';


  function deleteRow(obj) {
    $(obj).closest('tr').remove();
 }

Answer 2

函数中的

this是window而不是被点击的元素。您需要传递参考：

cell4.innerHTML='<a href="#" onClick="deleteRow(this);">Delete</a>';

function deleteRow(el) {
    $(el).closest('tr').remove();
} 

Answer 3

尝试：

function deleteRow() {
    $(this).parents('tr').remove();
}