JSFiddle - React, Tailwind, and code Playground

by ryanmch

HTML

<div>
    <button id="method1">jQueryAppendClonedRowDirectly</button>              
    <button id="method2">jQueryAppendClonedRowFromCache</button>            
    <button id="method3">javascriptNativeAppendClonedRowFromCache</button>
</div>
<table id="tbl">
    <tr>
        <td>
            <input type="text"/>
        </td>
    </tr>
</table>

JavaScript

$(document).ready(function() {
    $("#method1").click(jQueryAppendClonedRowDirectly);
    $("#method2").click(jQueryAppendClonedRowFromCache);
    $("#method3").click(javascriptNativeAppendClonedRowFromCache);
});

function jQueryAppendClonedRowDirectly() {
    var tbl = $("#tbl")[0];
    $(tbl).append($(tbl.rows[tbl.rows.length - 1]).clone().find("input:text").val("").change(tableCellTextChanged).end());
}

function jQueryAppendClonedRowFromCache() {
    var arr = [];
    var tbl = $("#tbl")[0];

    arr.push($(tbl.rows[0]));
    arr.push($(tbl.rows[tbl.rows.length - 1]).clone().find("input:text").val("").change(tableCellTextChanged).end());
    
    try{
        $(tbl).append($(arr).not(function(){return this.parent().length == 1;}));
    }
    catch(e){ 
        alert(e.message); 
    }
}

function javascriptNativeAppendClonedRowFromCache() {
    var arr = [];
    var tbl = $("#tbl")[0];

    arr.push(tbl.rows[0]);
    arr.push($(tbl.rows[tbl.rows.length - 1]).clone().find("input:text").val("").change(tableCellTextChanged).end()[0]);
    $(tbl).append(arr);
}

function tableCellTextChanged() {

}