[Javascript]Table模版操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
var objTable;
function PageLoad()
{
objTable = document.getElementById( "tbNew" ); //找到操作Table
}
function tdvalue()
{
var objTempRow = objTable.rows[0]; //找到Table的模版行
var objNewRow = objTable.insertRow( objTable.rows.length ); //在Table的末尾新增一行
objNewRow.id = objTable.rows.length - 1;
//以模版行建立新行内容
for ( var i=0 ; i<objTempRow.cells.length ; i++ )
{
var objNewCell = objNewRow.insertCell( i );
objNewCell.innerHTML = objTempRow.cells[i].innerHTML;
}
}
function DeleteTableRow()
{
if ( objTable.rows.length -1 > 0 )
{
objTable.deleteRow(objTable.rows.length-1);
}
else
{
//
}
}
window.onload = PageLoad;
</script>
</head>
<body>
<form id="Form1" name="Form1">
<input id="btnInsert" name="btnInsert" type="button" onclick="tdvalue()" value="添加新行" />
<input id="btnDelete" name="btnDelete" type="button" onclick="DeleteTableRow()" value="删除末行" />
</form>
<TABLE id="tbNew" cellSpacing="1" cellPadding="1" width="100%" border="1">
<!--此处为模版行-->
<TR>
<TD><input id="txtData_1" name="txtData_1" type="text" value=""/></TD>
<TD><input id="txtData_2" name="txtData_2" type="text" value=""/></TD>
<TD><input id="txtData_3" name="txtData_3" type="text" value=""/></TD>
</TR>
<!---------------->
</TABLE>
</body>
</html>
