JavaScript动态增表格行

沙漠绿树

浏览: 429489 次
性别:
来自: 深圳

最近访客更多访客>>

chenlmnet

lelonta

gathers520

平民圣人

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript Excel PHP XHTML HTML

javaeye 写道

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


//第一个例子。

<!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>

分享到：