动态生成Table的行、列以及删除等

最新推荐文章于 2024-02-18 17:31:33 发布

zhoujiyuan

最新推荐文章于 2024-02-18 17:31:33 发布

阅读量2.4k

点赞数

文章标签： table function input button javascript border

本文链接：https://blog.csdn.net/zhoujiyuan/article/details/2614985

版权

一、案例：【动态生成 Table的行、列以及删除等】

二、案例类别：【页面】

三、案例关键字：【 Table】【 Row】【 TR】

四、案例模型：

动态的生成 Table。

五、案例解释：

六、案例代码：

代码分成很多形式。现在只是介绍其中的几种：

一）动态插入行：

1、

function insert2tbl(x){

R=tbl.insertRow();

C=R.insertCell();

C.innerHTML="<td width='18%'><div align=center><input type='checkbox' checked /></div> </td>";

C=R.insertCell() ;

C.innerHTML="<td width='82%' id='td1'>"+x+"</td>" ;

}

此时每次执行向 table中插入一条记录。

2、

function AddRow() { //添加一行 var newTr = tab1.insertRow(); //添加两列 var newTd0 = newTr.insertCell(); var newTd1 = newTr.insertCell(); //设置列内容和属性 newTd0.innerHTML = '<input type=checkbox id="box4" on Click="GetRow()">'; newTd1.innerText= '新增加行 '; }

见附 1。

二）删除

1、删除除了第一行外的其他数据

function clearTbl(){

while(tbl.rows.length>1){

tbl.deleteRow();

}

七、案例心得及经验总结：

动态生成 Table的行可以有利于我们与 List嵌套使用。

八、实用案例：对应关系、动态选择

九、案例相关方法及拓展方法：

附 1：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title> 动态添加删除表格</title> <Script Language="Javascript"> var cGetRow=-99999; function AddRow() { //添加一行 var newTr = tab1.insertRow(); //添加两列 var newTd0 = newTr.insertCell(); var newTd1 = newTr.insertCell(); //设置列内容和属性 newTd0.innerHTML = '<input type=checkbox id="box4" on Click="GetRow()">'; newTd1.innerText= '新增加行'; } function DelRow(iIndex) { //删除一行 if(iIndex==-99999) alert("系统提示：没有选中行号!"); else tab1.deleteRow(iIndex); } function GetRow() { //获得行索引 //两个parentElement分别是TD和TR哟，rowIndex是TR的属性 //this.parentElement.parentElement.rowIndex cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex; } function ShowRow() { //显示行号 alert(cGetRow); //alert(document.getElementsByTagName("tr").length); } </script> </head> <body> <table id="tab1" border=1> <tr id="tr1"> <td width=6%><input type=checkbox id="box1" on Click="GetRow()"></td> <td id="a">第一行</td> </tr> <tr id="tr2"> <td width=6%><input type=checkbox id="box2" on Click="GetRow()"></td> <td id="b">第二行</td> </tr> <tr id="tr3"> <td width=6%><input type=checkbox id="box3" on Click="GetRow()"></td> <td id="c">第三行</td> </tr> </table> <input type="submit" name="Submit" value="AddRow" on click="javascript :AddRow();"> <input type="submit" name="Submit" value="DelRow" on click="javascript :DelRow(cGetRow);"> <input type="submit" name="Submit" value="ShowRow" on click="javascript :ShowRow();"> </body> </html>

附 2：

<HTML>

<HEAD>

iIndex = 0; //试验一下加了 int类型定义后如何？？？

var i= 0;

function showIndex(){

　 alert(iIndex);

}

function getIndex(){

　 iIndex = event.srcElement.parentElement.parentElement.rowIndex;

return iIndex;

}

function insertRow(iPos){

　 var otr=myTable.insertRow(i);

　 var ocell=otr.insertCell(0);

　 ocell.innerHTML="<input type=file name=aa >"

　 var ocell=otr.insertCell(1);

//　 ocell.innerText="bb"

　 ocell.innerHTML=" <input type=button οnclick=deleteRow(getIndex()) value='删除 "+ i +"'>";

i++;

}

function deleteRow(iPos){

　 document.all.myTable.deleteRow(iPos);

i--;

}

</SCRIPT>

</HEAD>

<BODY>

</table>

<form>

</form>

</BODY>

</HTML>

附 3：

function deleteRow (tableID, rowIndex) {

var table =document.all[tableID]

table.deleteRow(rowIndex);

}

</script>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<HTML>

<HEAD>

iIndex = 0; //试验一下加了 int类型定义后如何？？？

function showIndex(){

alert(iIndex);

}

function getIndex(){

iIndex = event.srcElement.parentElement.rowIndex;

}

function insertRow(iPos){

var otr=myTable.insertRow(iPos);

var ocell=otr.insertCell(0);

ocell.innerText="aa"

var ocell=otr.insertCell(1);

ocell.innerText="bb"

}

function deleteRow(iPos){

document.all.myTable.deleteRow(iPos);

}

</SCRIPT>

</HEAD>

<BODY>

</tr>

</tr>

</table>

<form>

</form>

</BODY>

</HTML>

zhoujiyuan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
动态生成Table的行、列以及删除等

一、案例：【动态生成Table的行、列以及删除等】二、案例类别：【页面】三、案例关键字：【Table】【Row】【TR】四、案例模型：动态的生成Table。五、案例解释：六、案例代码：代码分成很多形式。现在只是介绍其中的几种：一）动态插入行： 1、funct
复制链接

扫一扫