Javascript 使用jQuery向表中动态添加行和列
我有以下JavaScript代码:Javascript 使用jQuery向表中动态添加行和列,javascript,jquery,dom,Javascript,Jquery,Dom,我有以下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.insert
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);
}
如何将DOM调用转换为jQuery?有人能给出示例代码吗。最简单的方法是简单地使用$'tblSample'.append'…',手动输入html字符串(如果它是常量)。您也可以从其他地方读取html,以获得更可读的代码:
$('#tblSample').append($('div#blank-row-container').html());
可能是这样,但没有选择: 更新:
我会避免使用HTML字符串,继续像以前一样创建DOM元素。jQuery让这变得非常简单:
var row = $("<tr>");
row.append( $("<td>").text("hello") );
$("#tblSample").append(row);
有关更多信息,请参阅
$(document).ready(function() {
$('button').click(function() {
addRowToTable($('table'), 'cell1 content', 'cell2 content');
});
});
var row = $("<tr>");
row.append( $("<td>").text("hello") );
$("#tblSample").append(row);