增加 删除 tabel 表格 行 列 insertRow()

增加 删除 tabel 表格 行 列 insertRow()

此代码通过实例验证

 

 
<html> <head> <mce:script type="text/javascript"><!-- var newrow; var newcell0; var newcell1; var newcell2; function firstAddRow(){ newrow = tableId.insertRow(); newrow.style.backgroundColor = "#FFFFFF"; newcell0 = newrow.insertCell(); newcell1 = newrow.insertCell(); newcell2 = newrow.insertCell(); newcell0.innerHTML = "<div><input type='text' id='id' name='id'/></div>"; newcell1.innerHTML = "<div><input type='text' id='name' name='name'/></div>"; if(tableId.rows.length > 2) newcell2.innerHTML = "<div><a href="/" mce_href="/""#/" onclick=/"javascript:addNewRow()/">添 加</a>&nbsp;&nbsp;<a href="/" mce_href="/""#/" onclick=/"delRow(this.parentNode.parentNode.parentNode.rowIndex)/">删 除</a></div>"; else newcell2.innerHTML = "<div><a href="/" mce_href="/""#/" onclick=/"javascript:addNewRow()/">添 加</a></div>"; } function addNewRow(){ document.getElementById('tableId').rows[tableId.rows.length - 1].cells[2].innerHTML = "<div><a href="/" mce_href="/""#/" onclick=/"delRow(this.parentNode.parentNode.parentNode.rowIndex)/">删 除</a></div>"; firstAddRow(); } function delRow(id){ tableId.deleteRow(id); if(tableId.rows.length > 2){ document.getElementById('tableId').rows[tableId.rows.length - 1].cells[2].innerHTML = "<div><a href="/" mce_href="/""#/" onclick=/"javascript:addNewRow();/">添 加</a>&nbsp;&nbsp;<a href="/" mce_href="/""#/" onclick=/"delRow(this.parentNode.parentNode.parentNode.rowIndex)/">删 除</a></div>"; } else{ document.getElementById('tableId').rows[tableId.rows.length - 1].cells[2].innerHTML = newcell2.innerHTML = "<div><a href="/" mce_href="/""#/" onclick=/"javascript:addNewRow();/">添 加</a></div>"; } } function getTableInfo(){ var ids=""; var names=""; for (var i = 1;i<=tableId.rows.length-1;i++){ var id = document.getElementById("tableId").rows[i].cells[0].childNodes[0].childNodes[0].value; ids += id+ "#" ; var name = document.getElementById("tableId").rows[i].cells[1].childNodes[0].childNodes[0].value; names += name + "#"; } document.getElementById("ids").innerText = ids; document.getElementById("names").innerText = names; alert("提交成功!"); return; } // --></mce:script> </head> <body onload="javascript:firstAddRow()"> <TABLE id="tableId" border="1"> <TR> <TD width="30%">编号</TD> <TD width="50%">名称</TD> <TD width="20%">操作</TD> </TR> </TABLE> </body> <input type="text" id="ids" name="ids"/> <input type="text" id="names" name="names"/> <input type="button" onclick="javascript:getTableInfo()" value="提交"/> </html>

你可能感兴趣的:(增加 删除 tabel 表格 行 列 insertRow())