javascript - 带有 onclick 事件的动态表行

Question

我正在动态构建带有行的 html 表，以便用户可以选择删除或添加新行。我的代码正在替换 A 标签的 onclick 事件，我想知道是否有办法阻止这种情况的发生

var addrow = "<a><span class='btn btn-nccnBlue' onclick=\"AddNewRow(1, 'false')\"><i class='fa fa-plus'></i></span></a>";
        var remrow = "<a><span class='btn-red' onclick=\"RemoveRow(1, 'false')\"><i class='fa fa-times'></i></span></a>";
        td.innerHTML = addrow + remrow;


function AddNewRow(type) {
    debugger;
    var tableRef = document.getElementById("example");
    var trlength = $('#example tbody tr').length + 1;
    var lasttr = $('#example tbody tr:last').clone();
    lasttr.find('span').attr('onclick', 'RemoveRow(' + trlength + ')');
    lasttr.find('span').attr('onclick', 'AddNewRow(' + trlength + ')');
    $('#example tbody').append(lasttr);
}
function RemoveRow(type) {
    debugger;
    var tableRef = document.getElementById("example");
    $("#AssetRow").clone().appendTo(tableRef);
}

In my html code the class btn red should be RemoveRow(4) not AddNewRow(4)

<span class="btn btn-nccnBlue" onclick="AddNewRow(4)"><i class="fa fa-plus"></i></span>

<span class="btn-red" onclick="AddNewRow(4)"><i class="fa fa-times"></i></span>

Answer 1

您的问题出在这两行:

lasttr.find('span').attr('onclick', 'RemoveRow(' + trlength + ')');
lasttr.find('span').attr('onclick', 'AddNewRow(' + trlength + ')');

因为您有两个 span 元素，所以您需要区分它们:

lasttr.find('span:last').attr('onclick', 'RemoveRow(' + trlength + ')');
lasttr.find('span:first').attr('onclick', 'AddNewRow(' + trlength + ')');

function AddNewRow(type) {
    var tableRef = document.getElementById("example");
    var trlength = $('#example tbody tr').length + 1;
    var lasttr = $('#example tbody tr:last').clone();
    lasttr.find('span:last').attr('onclick', 'RemoveRow(' + trlength + ')');
    lasttr.find('span:first').attr('onclick', 'AddNewRow(' + trlength + ')');
    $('#example tbody').append(lasttr);
}
function RemoveRow(type) {
    var tableRef = document.getElementById("example");
    $("#AssetRow").clone().appendTo(tableRef);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">


<table id="example">
    <tbody>
    <tr>
        <td><span class="btn btn-nccnBlue" onclick="AddNewRow(1)"><i class="fa fa-plus"></i></span>
            <span class="btn-red" onclick="RemoveRow(1)"><i class="fa fa-times"></i></span></td>
        <td>1</td>
    </tr>
    </tbody>
</table>

根据评论，我建议添加事件的正确方法:event delegation . 你可以看看here用于事件委托(delegate)和here用于事件绑定(bind)。

//
// delegate click event on tr span inside the table
//
$('#example tbody').on('click', 'tr span', function(e) {
//                              ^^^^^^^^^
    if ($(this).find('>i').is('.fa-plus')) {
        var trlength = $(this).closest('tbody').find('tr').length + 1;
        var newRow  = $(this).closest('tr').clone();
        newRow.find('td:last').text(trlength);
        $(this).closest('tbody').append(newRow);

        return;
    }
    if ($(this).find('>i').is('.fa-times')) {
        $(this).closest('tr').remove();
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">


<table id="example">
    <tbody>
    <tr>
        <td><span class="btn btn-nccnBlue"><i class="fa fa-plus"></i></span>
            <span class="btn-red"><i class="fa fa-times"></i></span></td>
        <td>1</td>
    </tr>
    </tbody>
</table>