// 取得页面元素
function GetObj(objName) {
if (document.getElementById) {
return eval('document.getElementById("' + objName + '")')
}
else {
return eval('document.all.' + objName)
}
}
//动态添加表格
function addTable() {
var dytable = GetObj("dyTable");
//创建Table对象
var tableNode = document.createElement("table");
/* 设置 table 属性 */
tableNode.id = "otable";
tableNode.border = "1";
tableNode.cellPadding = "1";
tableNode.cellSpacing = "1";
if (!dytable.hasChildNodes()) {
dytable.appendChild(tableNode);
}
for (var i = 0; i < 6; i++) {
//添加行
var newRow = tableNode.insertRow(-1);
//添加第一列
var newCell = newRow.insertCell(-1);
newCell.width = "100";
newCell.innerHTML = "Line " + (i + 1);
//添加删除按钮
var delCell = newRow.insertCell(-1);
delCell.width = "100";
delCell.innerHTML = "<input type=\"button\" name=\"delrow\" value=\"删除\" id=\"delrow\" onclick=\"delRowEvent(this)\" />";
}
}
//动态复制行
function cloneRow() {
var tableNode = document.getElementById("otable");
if (tableNode) {
//获取要复制的行
var tableRow = tableNode.rows[tableNode.rows.length - 1];
var newRow = tableRow.cloneNode(true);
//在tableRow的前面添加一行
tableRow.parentNode.insertBefore(newRow, tableRow);
//在tableRow的后面添加一行
// tableRow.parentNode.insertBefore(newRow, tableRow.nextSilbing);
}
else {
alert("没有找到表格");
}
}
//动态添加行
function addRow() {
var tableNode = document.getElementById("otable");
if (tableNode) {
var tableRow = tableNode.rows[tableNode.rows.length - 1];
var newRow = tableRow.cloneNode(false);
var newCell_1 = newRow.insertCell(0);
var newCell_2 = newRow.insertCell(1);
/* Table 列的内容 */
newCell_1.innerHTML = "Cell_1";
newCell_2.innerHTML = "Cell_2";
//添加行
tableRow.parentNode.insertBefore(newRow, tableRow);
}
else {
alert("没有找到表格");
}
}
//删除表格行
function delRowEvent(obj) {
if (confirm("确认要删除吗?")) {
//获取行索引
var element = obj.parentNode.parentNode.rowIndex;
GetObj("otable").deleteRow(element);
}
}
<body>
<div id="dyTable"></div>
<input type="button" id="addtb" value="动态生成表格" onclick="addTable()" />
<br />
<input type="button" id="clonerow" value="动态复制行" onclick="cloneRow()" />
<br />
<input type="button" id="addRow" value="动态添加一行" onclick="addRow()" />
</body>
[img]http://dl.iteye.com/upload/attachment/466121/a02942d3-00c2-3819-9462-252cee6e3674.gif[/img]