天天看點

動态添加和删除table的一行

<!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=gb2312"/>

<title>?ㄦ??娣誨??????able??涓?琛?</title>

<script type="text/javascript"><!--

var newRowIndex=2; //琚????ョ??琛?绱㈠?

//???ヤ?琛?

function insertRow(tableID/*琚????ヤ?琛???琛ㄧ??ID*/)

{

//debugger;

//var table = document.getElementById(tableID);

var Rows=tableID.rows;//绫諱技?扮???Rows

var newRow=tableID.insertRow(newRowIndex/*table.rows.length*/);//???ユ?扮??涓?琛?

for (i=0;i<3;i++)//濉??ユ?????版??

{

var newCell=Rows(newRow.rowIndex).insertCell(/*Cells.length*/);

newCell.align="center";

newCell.innerHTML=Rows(newRowIndex-1).cells(i).innerHTML;

}//for end

newRowIndex++;

}

//???や?琛?

function deleteRow (tableID, rowIndex)

{

//var table = document.getElementById(tableID);

tableID.deleteRow(rowIndex);

newRowIndex--;//缁存?ゅ?ㄥ?????

}

// --></script>

</head>

<body>

<form action="">

<table cellspacing="0" cellpadding="0" width="98%" align="center">

<tr valign="top">

<th>

<input value="娣誨??" type="button" 慰nclick="insertRow(table1)" />

</th>

</tr>

</table>

<br />

<table width="98%" align="center" id="table1">

<tr>

<th>椤哄???lt;/th>

<th>椤圭??搴???lt;/th>

<th>????lt;/th>

</tr>

<tr id="insertedRow" align="center" style="display:none;" mce_style="display:none;"> <!--????杩?琛???涓烘ā??->

<td><input id="textid" type="text" value="button" /></td>

<td>妯℃??lt;/td>

<td><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" mce_href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 慰nclick="deleteRow(table1,this.parentElement.parentElement.rowIndex)">???ゆ??琛?</a></td>

</tr>

<tr id="Tr1" align="center">

<td><input id="text1" type="text" value="button" /></td>

<td>宸叉??琛?</td>

<td><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" mce_href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 慰nclick="deleteRow(table1,this.parentElement.parentElement.rowIndex)">???ゆ??琛?</a></td>

</tr>

<tr id="Tr2" align="center">

<td><input id="text2" type="text" value="button" /></td>

<td>宸叉??琛?</td>

<td><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" mce_href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 慰nclick="deleteRow(table1,this.parentElement.parentElement.rowIndex)">???ゆ??琛?</a></td>

</tr>

<tr>

<td>????涓?琛?</td>

<td>????涓?琛?</td>

<td>????涓?琛?</td>

</tr>

</table>

</form>

</body>

</html>

繼續閱讀