jquery - 通过单击同一行中的 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();
 }