Adición de filas y columnas a una tabla dinámica con jQuery

Question

Tengo el siguiente código 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); 
} 

cómo traducir esto desde DOM llama a jQuery Puede alguien dar código de ejemplo?.

Answer 1

La forma más sencilla es simplemente usar $('#tblSample').append('<tr> ... </tr>'), introduciendo manualmente la cadena HTML (si es constante). También puede leer el código HTML de otra parte, para el código más legible:

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

Answer 2

Tal vez algo como esto (pero sin select): http://jsfiddle.net/dVBMc/3/

ACTUALIZACIÓN: http://jsfiddle.net/dVBMc/6/

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

Uso:

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

Answer 3

Evitaría usar cadenas de HTML y seguir creando elementos de DOM como los tenía antes. jQuery lo hace muy fácil:

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

Ver http://api.jquery.com/jQuery/#jQuery2 para obtener más información.