這篇文章介紹了js動態給table添加/刪除tr的方法
有需要的朋友可以參考一下
復制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "
//W
C//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 = theObj
indexOf("?")) >
&& parent
frames
length)
{ theDoc = parent
frames[theObj
substring(p+
)]
document; theObj = theObj
substring(
p); } if(!(foundObj = theDoc[theObj]) && theDoc
all) foundObj = theDoc
all[theObj]; for (i=
; !foundObj && i < theDoc
forms
length; i++) foundObj = theDoc
forms[i][theObj]; for(i=
; !foundObj && theDoc
layers && i < theDoc
layers
length; i++) foundObj = findObj(theObj
theDoc
layers[i]
document); if(!foundObj && document
getElementById) foundObj = document
getElementById(theObj); return foundObj;
}
//添加一個參與人填寫行
function AddSignRow(){ //讀取最後一行的行號
存放在txtTRLastIndex文本框中
var txtTRLastIndex = findObj("txtTRLastIndex"
document);
var rowID = parseInt(txtTRLastIndex
value);
var signFrame = findObj("SignFrame"
document);
//添加行
var newTR = signFrame
insertRow(signFrame
rows
length);
newTR
id = "SignItem" + rowID;
//添加列:序號
var newNameTD=newTR
insertCell(
);
//添加列內容
newNameTD
innerHTML = newTR
rowIndex
toString();
//添加列:姓名
var newNameTD=newTR
insertCell(
);
//添加列內容
newNameTD
innerHTML = "<input name=
txtName" + rowID + "
id=
txtName" + rowID + "
type=
text
size=
/>";
//添加列:電子郵箱
var newEmailTD=newTR
insertCell(
);
//添加列內容
newEmailTD
innerHTML = "<input name=
txtEMail" + rowID + "
id=
txtEmail" + rowID + "
type=
text
size=
/>";
//添加列:電話
var newTelTD=newTR
insertCell(
);
//添加列內容
newTelTD
innerHTML = "<input name=
txtTel" + rowID + "
id=
txtTel" + rowID + "
type=
text
size=
/>";
//添加列:手機
var newMobileTD=newTR
insertCell(
);
//添加列內容
newMobileTD
innerHTML = "<input name=
txtMobile" + rowID + "
id=
txtMobile" + rowID + "
type=
text
size=
/>";
//添加列:公司名
var newCompanyTD=newTR
insertCell(
);
//添加列內容
newCompanyTD
innerHTML = "<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/20297.html
