ホームページ > 記事 > ウェブフロントエンド > javescript完整操作Table的增加行，删除行的列子大全_javascript技巧

javescript完整操作Table的增加行，删除行的列子大全_javascript技巧

WBOYオリジナル: 2016-05-16 18:59:181133ブラウズ

<title>Form Object example</title> 
 
<script language="javascript"> 
function delrow1() 
{ 
var oElement=event.srcElement; 
while(oElement.tagName!="TR") 
{ 
oElement=oElement.parentElement; 
} 
var oTBody=oElement.parentElement; 
oTBody.removeChild(oElement) 
}

function delrow2()//刪除当前行 
{ 
var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex; 
document.all.yltable.deleteRow(currRowIndex);//table10--表格id 
} 
function insertrow1() //增加的一行方法1 
{ 
var newnode = document.getElementById('yltable').lastChild.cloneNode(true); 
document.getElementById('yltable').appendChild(newnode); 
}

function insertrow2() //增加的一行方法2 
{ 
newRow=document.all.yltable.insertRow(-1); 
var j_1 = document.all.yltable.rows.length; 
newcell=newRow.insertCell(); 
newRow.bgColor='#FFFFFF'; 
newcell.align='center'; 
newcell.innerHTML=""+j_1+"";

newcell=newRow.insertCell() ; 
newRow.bgColor='#FFFFFF';

newcell.align='center'; 
newcell.innerHTML="<input type='text' name='ylText"+j_1+"' />";

newcell=newRow.insertCell() ; 
newRow.bgColor='#FFFFFF';

newcell.align='center';

newcell.innerHTML='<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">';

document.all.yltable.focus();

}

function inserttable() 
{ 
var newnode = document.getElementById('yltable').cloneNode(true); 
document.getElementById('ylform').appendChild(newnode); 
} 
</script> 
 
 
<form name="ylform" id="ylform"> 
<center> 
<input name="button" type="button" onclick="inserttable()" value="增加表格"> 
  <input name="button2" type="button" onclick="insertrow1()" value="增加一行1"> 
  
<input name="button22" type="button" onclick="insertrow2()" value="增加一行2"> 
</center> 
<table border="1" align="center" width="50%" id="yltable"> 
<tbody id="yl1"> 
<tr> 
<td width="30%" height="22"><div align="center">1</div></td> 
<td width="40%"> 
<div align="center"> 
<input name="textfield" type="text" value="yl"> 
</div>
</td> 
<td width="30%"><div align="center"> 
<input name="button3" type="button" onclick="delrow1()" value="删除1"> <input name="button3" type="button" onclick="delrow2()" value="删除2"> 
</div></td> 
</tr> 
</tbody> 
<tbody id="yl2"> 
<tr> 
<td><div align="center">2</div></td> 
<td><div align="center"> 
<input name="textfield2" type="text" value="yanleigis"> 
</div></td> 
<td><div align="center"> 
<input name="button3" type="button" onclick="delrow1()" value="删除1"> <input name="button3" type="button" onclick="delrow2()" value="删除2"> 
</div></td> 
</tr> 
</tbody> 
<tbody id="yl3"> 
<tr> 
<td><div align="center">3</div></td> 
<td><div align="center"> 
<input name="textfield22" type="text" value="Landgis@126.com"> 
</div></td> 
<td><div align="center"> 
<input name="button3" type="button" onclick="delrow1()" value="删除1"> <input name="button3" type="button" onclick="delrow2()" value="删除2"> 
</div></td> 
</tr> 
</tbody> 
</table> 
<center> 
</center> 
</form>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：js可填可选的下拉框_表单特效次の記事：javascript笔试题目附答案@20081025_jb51.net_javascript技巧

続きを見る

javescript完整操作Table的增加行，删除行的列子大全_javascript技巧

関連記事