Question

我有一个页面，其中将使用添加按钮动态添加行（有一个java脚本函数可以向页面上的表添加行），这些行必须通过单击删除图像来删除。需要删除的行<td>之一中的<tr>值。我做过类似下面的事情，但是＆＃39; onclick＆＃39;不管用。该事件未被触发。我在这做错了什么？感谢。

function addRow(){
...
...
var deleteRow = "'deleteRowfun(\"rowNumber_"+(rowCount)+"\"); return false;'";

        var someName = "<tr id='rowNumber_" + (rowCount) + "' class = ' " + colorClass + " '><td valign='top' class='value'><label id='contactLastName_" +
            rowCount + "'>" + lastName + "</label></td>
            <td id='deleteContactAction_" + rowCount + "'>" +
            "<input type='image' src='/Projectname/plugins/folder/images/custom/delete-icon.jpg' id='contactDelete_" + rowCount + "'" +
            "title='Delete Contact' name='contactDelete' class='actionsIcon' " +
            "onclick="+ deleteRow + "/></td></tr>";


        $("#contactsTBL tbody").append(someName);
...
...

};

function deleteRowfun(itemId) {
        if (!confirm('Delete?')) {
            return false;
        }
        itemRowId = "#" + itemId
        $(itemRowId).remove();
    }

Answer 1

我将deleteRowfun()函数的调用移至onclick事件：

function addRow(){
  // calculate last biggest ID
  var rowCount = $("#contactsTBL tbody tr:last").length ? 
    parseInt($("#contactsTBL tbody tr:last").attr('id').replace('rowNumber_', '')) + 1 : 0;
  var colorClass = 'color-classs';
  var lastName = `LAST NAME #${rowCount}`;


  var someName = `
    <tr id="rowNumber_${rowCount}" class="${colorClass}">
      <td valign="top" class="value">
        <label id="contactLastName_${rowCount}">${lastName}</label>
      </td>
      <td id="deleteContactAction_${rowCount}">
        <input type="image" 
               src="/Projectname/plugins/folder/images/custom/delete-icon.jpg" 
               id="contactDelete_${rowCount}"
               title="Delete Contact" 
               name="contactDelete" 
               class="actionsIcon"
               onclick="deleteRowfun('rowNumber_${rowCount}'); return false;"/>
      </td>
    </tr>`;

    $("#contactsTBL tbody").append(someName);
}

plunker：http://plnkr.co/edit/qPGa3wNm3JLf2PKfjVyL?p=preview

Answer 2

deleteRow不作为函数退出
当你打电话时，它会是这样的：...＆＃34; onclick =＆＃39; deleteRowfun（＆＃34; + itemId +＆＃34;）/＆gt;＆＃34 ;; ...

Answer 3

由于您已经在使用jQuery库，我建议您按照以下方式定义click event listeners来利用它：

// click handler for existing and new IMG tags
$(document).on('click', 'img', function(e) {
    $(e.target).closest('tr').remove();
});

请注意，此click event listeners将应用于每个现有的img代码以及稍后要添加的每个新代码。

另请注意，一旦我们识别出点击的img代码（e.target），我们会查找最近的tr（行）以便将其删除

请参阅此working JSfiddle sample

从模板js中的表中动态删除行

3 个答案: