Javascript Table操作

LvMax · 发表于 2013-2-7 20:23:27

// 取得页面元素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="动态生成表格" /> <br /> <input type="button" id="clonerow" value="动态复制行" /> <br /> <input type="button" id="addRow" value="动态添加一行" /></body>

		自动登录	找回密码
密码			立即注册