Dynamic table row with onclick event

Question

I am dynamic building html table with rows for the users to have the option to remove or add new rows. My code is replacing both A tag onclick event and I wanted to know if there is a way to stop this from happening

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>

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Heretic Monkey, Jan 24 '19 at 19:03
I can suggest that you stop using onevent attributes -- especially if you are using jQuery. — zer00ne, Jan 24 '19 at 19:06
@gaetanoM And yet the answers there will resolve this problem... — Heretic Monkey, Jan 24 '19 at 19:18

gaetanoM · Accepted Answer · 2019-01-24T19:44:28.327

Your issue is in these two lines:

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

Because you have two span elements you need to distinguish between them:

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>

I'd suggest, as per comment, the correct way to add events: event delegation. You may take a look here for event delegation and here for event binding.

//
// 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>

@epascarello can you please explain what you mean the RIGHT way? — , Jan 24 '19 at 19:29

Dynamic table row with onclick event

1 Answers1