Ajout de lignes et de colonnes à une table dynamique avec jQuery

Question

Je le code JavaScript suivant:

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); 
} 

Comment traduire ce des appels DOM à jQuery Quelqu'un peut-il donner un exemple de code?.

Answer 1

La méthode la plus simple consiste simplement à utiliser $('#tblSample').append('<tr> ... </tr>'), en entrant manuellement la chaîne html (si elle est constante). Vous pouvez également lire le code HTML d'ailleurs, pour le code plus lisible:

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

Answer 2

Peut-être quelque chose comme ça (mais sans select): http://jsfiddle.net/dVBMc/3/

MISE À JOUR: http://jsfiddle.net/dVBMc/6/

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

Utilisation:

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

Answer 3

J'éviterais d'utiliser des chaînes de HTML et continuerais à créer des éléments DOM comme avant. jQuery fait vraiment facilement:

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

Voir http://api.jquery.com/jQuery/#jQuery2 pour plus d'informations.