使用javascript对table动态的添加、删除

来源：互联网发布：spss 数据全部成问好编辑：程序博客网时间：2024/05/21 08:56
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style title="text/css">tr{background-color:#CCFFFF }</style><script type="text/javascript">function insertRow(){var oTable = document.getElementById('mytable');var oDiv = document.getElementById('div1');var rowLength = oTable.rows.length;var sName1;var sName2;sName1 = prompt("请输入中文名字：", "");while(sName1 == ""){sName1 = prompt("请输入中文名字：", "");}sName2 = prompt("请输入英文名字：", "");while(sName2 == ""){sName2 = prompt("请输入英文名字：", "");}if(sName1 != null && sName2 != null){oTable.insertRow(rowLength);oTable.rows[rowLength].insertCell(0);oTable.rows[rowLength].cells[0].appendChild(document.createTextNode(sName1));oTable.rows[rowLength].insertCell(1);oTable.rows[rowLength].cells[1].appendChild(document.createTextNode(sName2));oDiv.innerHTML = "<font color='red' size='3'>添加成功！</font>";}else{oDiv.innerHTML = "<font color='red' size='3'>添加失败！</font>";}}function deleteRow(){var oTable = document.getElementById('mytable');var rowLength = oTable.rows.length;var oDiv = document.getElementById('div1');if(rowLength == 1){oDiv.innerHTML = "<font color='red' size='3'>表中已经无元素可删除了！</font>";}else{oTable.deleteRow(rowLength - 1);oDiv.innerHTML = "<font color='red' size='3'>删除成功！</font>";}}</script></head><body><table id="mytable" border="1" width="200" ><tr><td>中文</td><td>英文</td></tr><tr><td>中国</td><td>Chinese</td></tr><tr><td>苹果</td><td>apple</td></tr></table><input type="button" value="添加一行到表尾" onclick="insertRow()"/><br /><input type="button" value="删除表尾一行" onclick="deleteRow()"/><br /><p> </p><div id="div1"></div></body></html>