熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

js動態給table添加/刪除tr

2022-06-13   來源: JSP教程 

  <!DOCTYPE HTML PUBLIC "//WC//DTD HTML Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">// Example: obj = findObj("image");
function findObj(theObj theDoc)
{
var p i foundObj;
if(!theDoc) theDoc = document;
if( (p = theObjindexOf("?")) > && parentframeslength)
{ theDoc = parentframes[theObjsubstring(p+)]document; theObj = theObjsubstring(p); } if(!(foundObj = theDoc[theObj]) && theDocall) foundObj = theDocall[theObj]; for (i=; !foundObj && i < theDocformslength; i++) foundObj = theDocforms[i][theObj]; for(i=; !foundObj && theDoclayers && i < theDoclayerslength; i++) foundObj = findObj(theObjtheDoclayers[i]document); if(!foundObj && documentgetElementById) foundObj = documentgetElementById(theObj); return foundObj;
}
//添加一個參與人填寫行
function AddSignRow(){ //讀取最後一行的行號存放在txtTRLastIndex文本框中
var txtTRLastIndex = findObj("txtTRLastIndex"document);
var rowID = parseInt(txtTRLastIndexvalue);

  var signFrame = findObj("SignFrame"document);
//添加行
var newTR = signFrameinsertRow(signFramerowslength);
newTRid = "SignItem" + rowID;

  //添加列:序號
var newNameTD=newTRinsertCell();
//添加列內容
newNameTDinnerHTML = newTRrowIndextoString();

  //添加列:姓名
var newNameTD=newTRinsertCell();
//添加列內容
newNameTDinnerHTML = "<input name=txtName" + rowID + " id=txtName" + rowID + " type=text size= />";

  //添加列:電子郵箱
var newEmailTD=newTRinsertCell();
//添加列內容
newEmailTDinnerHTML = "<input name=txtEMail" + rowID + " id=txtEmail" + rowID + " type=text size= />";

  //添加列:電話
var newTelTD=newTRinsertCell();
//添加列內容
newTelTDinnerHTML = "<input name=txtTel" + rowID + " id=txtTel" + rowID + " type=text size= />";

  //添加列:手機
var newMobileTD=newTRinsertCell();
//添加列內容
newMobileTDinnerHTML = "<input name=txtMobile" + rowID + " id=txtMobile" + rowID + " type=text size= />";

  //添加列:公司名
var newCompanyTD=newTRinsertCell();
//添加列內容
newCompanyTDinnerHTML = "<input name=txtCompany" + rowID + " id=txtCompany" + rowID + " type=text size= />";

  
//添加列:刪除按鈕
var newDeleteTD=newTRinsertCell();
//添加列內容
newDeleteTDinnerHTML = "<div align=center style=width:px><a #" + rowID + ")">刪除</a></div>";

  //將行號推進下一行
txtTRLastIndexvalue = (rowID + )toString() ;
}
//刪除指定行
function DeleteSignRow(rowid){
var signFrame = findObj("SignFrame"document);
var signItem = findObj(rowiddocument);

  //獲取將要刪除的行的Index
var rowIndex = signItemrowIndex;

  //刪除指定Index的行
signFramedeleteRow(rowIndex);

  //重新排列序號如果沒有序號這一步省略
for(i=rowIndex;i<signFramerowslength;i++){
signFramerows[i]cells[]innerHTML = itoString();
}
}//清空列表
function ClearAllSign(){
if(confirm(確定要清空所有參與人嗎?)){
var signFrame = findObj("SignFrame"document);
var rowscount = signFramerowslength;

  //循環刪除行從最後一行往前刪除
for(i=rowscount ;i > ; i){
signFramedeleteRow(i);
}

  //重置最後行號為
var txtTRLastIndex = findObj("txtTRLastIndex"document);
txtTRLastIndexvalue = "";

  //預添加一行
AddSignRow();
}
}
</script>
</HEAD>
<BODY>
<div>
<table width="" border="" cellpadding="" cellspacing="" id="SignFrame">
<tr id="trHeader">
<td width="" bgcolor="#EE">序號</td>
<td width="" bgcolor="#EE">用戶姓名</td>
<td width="" bgcolor="#EE">電子郵箱</td>
<td width="" bgcolor="#EE">固定電話</td>
<td width="" bgcolor="#EE">移動手機</td>
<td width="" bgcolor="#EE">公司名稱</td>
<td width="" align="center" bgcolor="#EE"> </td>
</tr>
</table>
</div>
<div>
<input type="button" name="Submit" value="添加參與人" />
<input type="button" name="Submit" value="清空" />
<input name=txtTRLastIndex type=hidden id=txtTRLastIndex value="" />
</div>
</BODY>
</HTML>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20367.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.