CODEWITHSUNDEEP
javascriptjquery
user5843610
user5843610

Reputation:

Dynamic table row with onclick event

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>

Upvotes: 1

Views: 1597

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

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>

Upvotes: 1

Related Questions