javascript动态创建删除表格 由 群群 · 01/05/2009 HTML代码 <br /> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /><br /> <TABLE id="cssrain" style="border:1px solid #000;width:200px;" border="1" cellpadding="0" cellspacing="0"> </p> <tr> <td width="50%">姓名</td> <td width="50%" colspan="2" align="center">地址</td> </tr> <p></TABLE><br /> <input type="button" onclick="addRow()" value="add" /><br /> <input type="button" onclick="delRow()" value="del" /><br /> <script> function addRow(){ var table = document.getElementById("cssrain"); if(table) { var newTr = document.createElement("tr"); if(newTr) { //创建第一列 var td_customer = document.createElement("td"); td_customer.align = "center"; //设置位置 td_customer.width = "19%" ; //设置宽度 td_customer.innerHTML = "aaa"; //表格内容(可以从数据库中读取) td_customer.id = "tID";//设置其ID td_customer.style.cursor = "hand";//设置其样式,类似超链接手形 td_customer.style.whiteSpace = "nowrap"; td_customer.style.backgroundColor = "red"; //背景色 /** td_customer.style. :.后面可以接html中style中的任何属性,只是style中的带"-"的要去掉,javascript中不支持, 且"-"后的第一个字母要大写. */ if(td_customer) newTr.appendChild(td_customer); //创建第二列 var td_panyment = document.createElement("td"); td_panyment.align = "center"; td_panyment.colSpan= "2"; //注意这里是大写 colSpan 而不是colspan 注意大小写 td_panyment.innerHTML= "bbb"; if(td_panyment) newTr.appendChild(td_panyment); var tbody = document.createElement("TBODY");//这一步 不能少 tbody.appendChild(newTr);//这一步 不能少 table.appendChild(tbody); }else{ alert("行不存在"); } }else{ alert("表格不存在"); } } </p> <p>function delRow() { var tableID = document.getElementById("cssrain"); var rowLength = tableID.rows.length; if(rowLength == 1)return; tableID.deleteRow(rowLength-1); //删除最下面的行 } </script><br /> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] Share
HTML代码 HTML代码 HTML代码 HTML代码