JavaScript动态增表格行

最新推荐文章于 2025-07-18 11:48:46 发布

原创最新推荐文章于 2025-07-18 11:48:46 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #Excel #PHP #XHTML #HTML #ViewUI

本文介绍两种使用JavaScript动态添加HTML表格行的方法。第一种方法适用于简单的表格，通过插入新行并设置单元格内容来实现；第二种方法则展示了如何为每个新行添加多个包含输入框的单元格，便于收集更多信息。

[quote="javaeye"] 上次我发表了一篇如何动态增加表单元素的博客，好心人把我加以了修改，今天我也把那好心人的也加以修改再表一篇。不过这次不是动态增加表单元素，二是表格的行。
[/quote]



//第一个例子。

<!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=utf-8" />
<title>动态增加表格的行</title>
</head>
<script type="text/javascript"> 
  var  n  =   1 ; 
  function  testAdd(){ 
      var  tr  =  document.getElementById( "xxx" ).insertRow( 1 ); 
	  tr.id = " new_ " + n; 
      var  c1  =  tr.insertCell(); 
      c1.innerText = "xxx" + n; 
      var  c2  =  tr.insertCell(); 
      c2.innerText = "bbb"+ n ;  
      var  c3  =  tr.insertCell(); 
      c3.innerText = "EE"+ n; 
      n ++ ;    
  } 
  function  doDelete(i) 
  { 
    var _tableObj = document.getElementById("xxx"); 
    var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;  
    _tableObj.deleteRow(rowIndex); 

  } 
</script>
<body>
<input name="" type="button" onclick=" testAdd() " value="+" />
<input name="" type="button" onclick=" doDelete() " value="-" />
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="xxx">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
</table>

</body>
</html>


//第二个例子。


<html>
<head>
<title>第一个php页面</title>
</head>
<script type="text/javascript"> 

  var  n  =   1 ; 

  function  testAdd(){

  	  if(n>10){
  	  	return n;
  	  } 
      var  tr  =  document.getElementById( "wikiinfo_excel" ).insertRow( 1 ); 
	  tr.id = " wikiinfo_ " + n; 

      var  fileanme  =  tr.insertCell(); 
      fileanme.innerHTML = "<input type='text' name='filename"+n+"'>"; 

      var  sheetname  =  tr.insertCell(); 
      sheetname.innerHTML = "<input type='text' name='sheetname"+n+"'>";  

      var  col  =  tr.insertCell(); 
      col.innerHTML = "<input type='text' name='col"+n+"'>";

      var  row  =  tr.insertCell(); 
      row.innerHTML = "<input type='text' name='row"+n+"'>";

      var value = tr.insertCell();
      value.innerHTML = "<input type='text' name='value"+n+"'>";

      var flag = tr.insertCell();
      flag.innerHTML = "<input type='text' name='flag"+n+"'>";

      n ++ ; 
     // alert(n);   
  } 
 /** function  doDelete(i) 
  { 
    var _tableObj = document.getElementById("wikiinfo_excel"); 

    var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;  

    _tableObj.deleteRow(rowIndex); 

  } 
  */
  function  doDelete() 
  { 
  	if(n>1){

  		n = n-1;

  	    var _tableObj = document.getElementById("wikiinfo_excel"); 

    	_tableObj.deleteRow(n); 

    	alert(n);
  	}
  } 
</script>
<body>

<input name="" type="button" onclick=" testAdd() " value="+" />
<input name="" type="button" onclick=" doDelete() " value="-" />

<table id="wikiinfo_excel">
	<tr id="wikiinfo">
		<td>Excel文件名</td>
		<td>Sheet名称</td>
		<td>列坐标</td>
		<td>列坐标</td>
		<td>行坐标</td>
		<td>坐标值</td>
		<td>输入输出标志</td>
	</tr>
</table>
</body>
</html>