Javascript动态添加多行

来源：互联网发布：oracle查询去重复数据编辑：程序博客网时间：2024/06/05 01:02

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<script type="text/javascript">
//删除表格数据
function delTable(){
  var theTable = document.getElementById("tblZhouqi");
  while(theTable.hasChildNodes()){
   theTable.removeChild(theTable.lastChild);
  }
}
//添加数据
function addToTable(){
  var lenZhouqi = document.getElementById("txtZhouqi").value;
  var theTable = document.getElementById("tblZhouqi");
  //清理数据
  delTable();
  for(var i=1,len=lenZhouqi;i<=len;i++){
   var theRow = theTable.insertRow();
   //第一列
   var theCell = theRow.insertCell();
   theCell.style.backgroundColor = "#cccccc";
   theCell.innerText = "第" + i + "号";
   theCell.value = i;
   //第二列这里可以if(i == 1){theCell.innerText =""}
   //else if(i == 2){theCell.innerText =""} 或者想其他办法进行赋值，比如调用一个函数 getValue(i) ,函数里根据i返回值
   theCell = theRow.insertCell();
   theCell.style.backgroundColor = "#cccccc";
   theCell.innerText = "小明";
   theCell.value = "小明";
   //第三列
   theCell = theRow.insertCell();
   theCell.style.backgroundColor = "#cccccc";
   theCell.innerText = "20";
   theCell.value = "20";
  // alert("22222");
  }
}
</script>

<p>行数：
    <input id="txtZhouqi" name="txtZhouqi" type="text">
<input id="btnAdd" name="btnAdd" value="增加" type="button" onClick="addToTable()">
</p>
<br />
<table id="tblZhouqiHeader" name="tblZhouqi" width="85%" border="0" cellpadding="0" cellspacing="2">
    <tr>
      <td bgcolor="#aaaaaa">序号</td>
   <td bgcolor="#aaaaaa">名字</td>
   <td bgcolor="#aaaaaa">年龄</td>
    </tr>
</table>
<table id="tblZhouqi" name="tblZhouqi" width="85%" border="0" cellpadding="0" cellspacing="2" style="padding-top:0px;margin-top:0px;">
</table>

</body>
</html>