Thêm hàng và cột vào một bảng động với jQuery

Question

Tôi có mã JavaScript sau:

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

Làm thế nào để dịch này từ DOM cuộc gọi đến jQuery bất cứ ai có thể đưa ra mẫu mã?.

Answer 1

Cách dễ nhất là chỉ cần sử dụng $('#tblSample').append('<tr> ... </tr>'), nhập thủ công chuỗi html (nếu đó là hằng số). Bạn cũng có thể đọc các html từ một nơi khác, cho mã dễ đọc hơn:

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

Answer 2

Có lẽ một cái gì đó như thế này (nhưng không 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); 
} 

Cách sử dụng:

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

Answer 3

Tôi sẽ tránh sử dụng các chuỗi HTML và tiếp tục tạo các phần tử DOM như bạn đã có trước đây. jQuery làm cho việc này thực sự dễ dàng:

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

Xem http://api.jquery.com/jQuery/#jQuery2 để biết thêm thông tin.