Add table row in jQuery

Question

What is the best method in jQuery to add an additional row to a table as the last row?

Is this acceptable?

$(\'#myTable\').append(\'

        

Answer 1

Here is some hacketi hack code. I wanted to maintain a row template in an HTML page. Table rows 0...n are rendered at request time, and this example has one hardcoded row and a simplified template row. The template table is hidden, and the row tag must be within a valid table or browsers may drop it from the DOM tree. Adding a row uses counter+1 identifier, and the current value is maintained in the data attribute. It guarantees each row gets unique URL parameters.

I have run tests on Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7 (with Symbian 3), Android stock and Firefox beta browsers.

  

    
Name
    
Value
    
 
  
  

    
key1
    

    

       
    
  




Add row




- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first 
    // in template. Wrap inner html around  tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = ""+template.find("tr:first").html()+"";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete  row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find  parent
    row.remove();
}

PS: I give all credits to the jQuery team; they deserve everything. JavaScript programming without jQuery - I don't even want think about that nightmare.