JS动态添加删除表格

JavaScript语言: 星烛网

<script type="text/javascript">
  //全局变量
  var i=0;
  //添加行
  function addMyRow(){
   var mytable = document.getElementById("mybody");
   var mytr = mytable.insertRow();
   mytr.setAttribute("id","tr"+i);
   var mytd_1=mytr.insertCell();
   var mytd_2=mytr.insertCell();
   var mytd_3=mytr.insertCell();
   var mytd_4=mytr.insertCell();
   var mytd_5=mytr.insertCell();
   mytd_1.innerHTML="<input type='text' name='myname"+i+"'/>";
   mytd_2.innerHTML="<input type='radio' name='mysex"+i+"' value='1'/>男<input type='radio' name='mysex"+i+"' value='2'/>女";
   mytd_3.innerHTML="<input type='checkbox' name='mylove"+i+"' value='1'/>上网<input type='checkbox' name='mylove"+i+"' value='2'/>篮球<input type='checkbox' name='mylove"+i+"' value='3'/>游泳";
   mytd_4.innerHTML="<select name='myjg"+i+"'><option value='1'>北京</option><option value='2'>河北</option><option value='3'>天津</option></select>";
   mytd_5.innerHTML="<input type='button' value='删除' onclick=/"delMyRow('"+i+"')/"/>";
   i++;
  }
  //删除当前行
  function delMyRow(j){
   var mytable = document.getElementById("mybody");
   var myrow = document.getElementById("tr"+j);
   mytable.deleteRow(myrow.rowIndex-1);
  }
  //删除所有行
  function delAllMyRow(){
   var mytable = document.getElementById("mybody");
   var rowlen=mytable.rows.length;
   for(var i=rowlen-1;i>=0;i--){
    mytable.deleteRow(i);
   }
  }
  </script>

 

星烛网

相关内容：

表格部分代码如下：
动态添加表行的javascript函数如下：

function addRow(){

//添加一行

var newTr = testTbl.insertRow();

//添加两列

var newTd0 = newTr.insertCell();

var newTd1 = newTr.insertCell();

//设置列内容和属性

newTd0.innerHTML = '<input type=checkbox id="box4">';

newTd2.innerText= '新加行';

}


就这么简单，做点详细的说明：

1、inserRow()和insertCell()函数

insertRow()函数可以带参数，形式如下：

insertRow(index)

这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。

insertCell()和insertRow的用法相同。

2、动态设置属性和事件

上面行数中的innerHTML和innerText都是列的属性。

这个inner，就是“inner”到<tb></tb>之间，innerText是添加到<tb></tb>之间的文本，innerHTML是添加到<tb></tb>之间的HTML代码(这个so简单，这个解释挺多余的)

设置其他属性也是用同样的方式，比如，设置行背景色

newTr.bgColor = 'red';



设置事件也一样，需要简单说明一点。

比如，我要让点击新加行的时候执行一个自己定义的函数 newClick,newClick行数如下：

function newClick(){

alert("这是新添加的行");

｝

对onclick事件设置这个函数的代码如下：

newTr.onclick = newClick;

这里需要主义的是，＝后面的部分必须是函数名,而且不能带引号，

newTr.onclick = newClick();

newTr.onclick = 'newClick';

newTr.onclick = "newClick";

上面的写法都是错误的。

为什么，其实知道为什么没有什么意思，知道怎么用就OK了，如果不想知道，可以跳过下面这一段。



实际上这个=后面的newClick是指向自己定义的newClick函数的指针，javascript里面函数名就是指向函数的指针，加了引号括号什么的浏览器就找不到那个函数了。

下面的写法，也是正确的

newTr.onclick = function newClick(){

alert("这是新添加的行");

｝

这个使用函数名实际上是一样的



设置其他的事件用法相同。


<table id="testTbl" border=1>

<tr id="tr1">

<td width=6%><input type=checkbox id="box1"></td>

<td id="b">第一行</td>

</tr>

<tr id="tr2">

<td width=6%><input type=checkbox id="box2"></td>

<td id="b">第二行</td>

</tr>

<tr bgcolor=#0000FF>

<td width=6%><input type=checkbox id="box3"></td>

<td>第三行</td>

</tr>

</table>

 

选CRM OA ERP SCM 进销存 等软件,上星烛网！ http://www.xingzhu.net.cn 

<script type="text/javascript"><!-- google_ad_client = "pub-4791287241396031"; /* 728x90, 创建于 09-7-29 */ google_ad_slot = "4018300068"; google_ad_width = 728; google_ad_height = 90;// --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>