Aggiunta di righe e colonne per una tabella in modo dinamico con jQuery

Question

Ho il seguente codice JavaScript:

function addRowToTable() 
{ 
    var tbl = document.getElementById('tblSample'); 
    var lastRow = tbl.rows.length; 
    // if there's no header row in the table, then iteration = lastRow + 1 
    var iteration = lastRow; 
    var row = tbl.insertRow(lastRow); 

    // left cell 
    var cellLeft = row.insertCell(0); 
    var textNode = document.createTextNode(iteration); 
    cellLeft.appendChild(textNode); 

    // right cell 
    var cellRight = row.insertCell(1); 
    var el = document.createElement('input'); 
    el.type = 'text'; 
    el.name = 'txtRow' + iteration; 
    el.id = 'txtRow' + iteration; 
    el.size = 40; 

    el.onkeypress = keyPressTest; 
    cellRight.appendChild(el); 

    // select cell 
    var cellRightSel = row.insertCell(2); 
    var sel = document.createElement('select'); 
    sel.name = 'selRow' + iteration; 
    sel.options[0] = new Option('text zero', 'value0'); 
    sel.options[1] = new Option('text one', 'value1'); 
    cellRightSel.appendChild(sel); 
} 

come tradurre questo da DOM chiama a jQuery chiunque può dare il codice di esempio?.

Answer 1

Il modo più semplice è usare semplicemente $('#tblSample').append('<tr> ... </tr>'), inserendo manualmente la stringa html (se è costante). È anche possibile leggere il codice HTML da qualche altra parte, per il codice più leggibile:

$('#tblSample').append($('div#blank-row-container').html()); 

Answer 2

Forse qualcosa di simile (ma senza select): http://jsfiddle.net/dVBMc/3/

UPDATE: http://jsfiddle.net/dVBMc/6/

function addRowToTable(table, cell1, cell2) { 
    var row; 
    row = "<tr><td>" + cell1 + "</td><td>" + cell2 + "</td></tr>"; 
    table.append(row); 
} 

Usage:

$(document).ready(function() { 
    $('button').click(function() { 
     addRowToTable($('table'), 'cell1 content', 'cell2 content'); 
    }); 
}); 

Answer 3

Vorrei evitare di usare le stringhe di codice HTML e continuare a creare elementi DOM come si aveva prima. jQuery rende questo veramente facile:

var row = $("<tr>"); 
row.append($("<td>").text("hello")); 
$("#tblSample").append(row); 

Vedere http://api.jquery.com/jQuery/#jQuery2 per ulteriori informazioni.