Cloning and appending rows

JavaScript performance comparison

Revision 2 of this test case created by Joshua Son

Info

according to jfriend00 from stackoverflow.com. I am giving it a test.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<table id="sourceT">
    <tr>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td>Col 1 - value</td>
        <td>Col 2 - value</td>
        <td>Col 3 - value</td>
    </tr>
</table>
<table id="targetT"></table>

Preparation code output

Col 1 Col 2 Col 3
Col 1 - value Col 2 - value Col 3 - value

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
first
$('#sourceT tr')
        .clone()
        .find('td:gt(1)')
        .remove()
        .end()
        .appendTo('#targetT');
pending…
second
$('#sourceT tr').clone().appendTo('#targetT')
$('#targetT tr').find('td :gt(1)').remove();
pending…
third
var $target = $("#targetT");
$("#sourceT tr").each(function() {
    var $tds = $(this).children(),
        $row = $("<tr></tr>");
    $row.append($tds.eq(0).clone()).append($tds.eq(1).clone()).appendTo($target);
});
pending…
fourth
$("#sourceT tr").each(function(index) {
    var newRow = $("<tr></tr>");
    $(this).find("td:lt(2)").clone().appendTo(newRow);
    $("#targetT").append(newRow);
});
pending…
fifth
var newTable = "";
var rows = document.getElementById("sourceT").rows;
for (var i = 0, len = rows.length; i < len; i++) {
    var cells = rows[i].cells;
    newTable += "<tr><td>" + cells[0].innerHTML + "</td><td>" + cells[1].innerHTML + "</td></tr>";
}
document.getElementById("targetT").innerHTML = newTable;
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment