table动态添加行

everlxq

浏览: 111691 次
性别:
来自: 青岛

最近访客更多访客>>

lilybao

kalin001

haodyy

Jessie丶J

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

语法

tableObject.insertRow(index)


返回值
返回一个 TableRow，表示新插入的行。


说明
该方法创建一个新的 TableRow 对象，表示一个新的 <tr> 标记，并把它插入表中的指定位置。
新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。
如果表是空的，则新行将被插入到一个新的 <tbody> 段，该段自身会被插入表中。


抛出
若参数 index 小于 0 或大于等于表中的行数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

<%@page language="java" pageEncoding="utf-8"%>
<!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=gb2312" />
<title>控件cloneNode（）方法的使用</title>
<script language="javascript">
 i=1;
 function AddRow()
 {
   var tableObject=new Object();
   var isneed=true;
   
   tableObject=document.getElementById("CloneNodeShow");
   //判断是否有必要添加新的输入行
   for(var j=0;j<tableObject.getElementsByTagName("input").length;j++)
   {
    var inputs = tableObject.getElementsByTagName("input")[j]; 
    if(inputs.type=="text" && inputs.value=="")
    {
     isneed=false;
    }
   }

   for(var k=0;k<tableObject.getElementsByTagName("select").length;k++){
   var select = tableObject.getElementsByTagName("select")[k];
   if(select.value=="%"){
   isneed=false;}
   }
   
   if(isneed)
   {
    //添加一行   
    var newTR=tableObject.insertRow(i+1);
     var td3=newTR.insertCell();
    var td2=newTR.insertCell();
    var td1=newTR.insertCell();
    var td0=newTR.insertCell();
    
    
    td0.innerHTML=(++i)+'.';
    td1.innerHTML='<input type="text" name="username"/>';
    //true表示深度克隆
    var newSelect=document.getElementById("sexType").cloneNode(true);
    newSelect.id="sexType"+i;
    td2.appendChild(newSelect);
    td3.innerHTML='<input type="text" name="age" onchange="AddRow()"/>';   
   }
 }
</script>
</head>
<body>
<form>
 <table id="CloneNodeShow" border="2" bordercolor="#000000">
 <thead>
  <tr><th></th><th>姓名</th><th>性别</th><th>年龄</th></tr>
  </thead>
  <tbody>
  <tr id="signTR"  >
   <td>1.</td>
   <td><input type="text" name="username"/></td>
   <td>
    <select name="sexType" id="sexType">
     <option value="%">请选择性别</option>
     <option value="0">男</option>
     <option value="1">女</option>
    </select>
   </td>
   <td><input type="text" name="age" onchange="AddRow()"/></td>
  </tr>
  </tbody>
 </table>
</form>
</body>
</html>

分享到：