js 表操作
Code<html>
<head>
<title>商品信息管理</title>
<style type="text/css">
.myinput{
width:60px; border:1 solid #999999;
}
td{font-size:10pt;}
body{margin:20 0 0 0;}
</style>
</head>
<body bgcolor="#ffffff">
<table id="productTab" width="740" border="1" align="center" cellspacing="0" cellpadding="3" style="table-layout:fixed;">
<tr>
<td colspan="7" bgcolor="#CCCCCC">商品信息管理</td>
</tr>
<!-- 以下是查询表单区域 -->
<form name="form1" method="post" action="/pet/ownerAdmin/disp.jsp">
<tr>
<td colspan="7">
编号：<input class="myinput" name="id" type="text" id="id" size="10">
商品名：
<input class="myinput" name="name" type="text" id="name" size="10">
<input class="myinput" type="button" name="" value="查询"> </td>
</tr>
</form>
<!--====== END ======= -->
<tr bgcolor="#CCCCCC">
<td width="64">编号</td>
<td width="140">商品名</td>
<td width="208">描述</td>
<td width="110">价格（元/件）</td>
<td width="70">货量</td>
<td width="70"> </td>
<td width="70"> </td>
</tr>
<!-- 以下是查询结果表单区域 -->
<form name="form2" method="post" action="/pet/ownerservlet">
<tr>
<td>
1 </td>
<td>左丹奴女式短裙</td>
<td>漂亮大方</td>
<td>120</td>
<td>23</td>
<td><input class="myinput" type="button" onclick='delRow(this);' value="删除"></td>
<td><input class="myinput" type="button" value="更新"></td>
</tr>
<tr>
<td>
2 </td>
<td>邦威男式T恤</td>
<td>纯棉，透气性好</td>
<td>60</td>
<td>10</td>
<td><input class='myinput' type='button' onclick='delRow(this);' value='删除'></td>
<td><input class='myinput' type='button' value='更新'></td>
</tr>
<input class="myinput" type="hidden" name="action" value="delete">
</form>
<!-- ====== END ===== -->
</table>
<TABLE cellSpacing=0 cellPadding=3 width=740 align=center border=1>
<TBODY>
<form name="form3" method="post" action="/pet/ownerservlet">
<TR>
<TD bgColor=#cccccc>
编号</TD>
<TD><INPUT type="text" size=10 name="number"> </TD></TR>
<TR>
<TR>
<TD bgColor=#cccccc>
商品名</TD>
<TD><INPUT type="text" size=10 name="name"> </TD></TR>
<TR>
<TD bgColor=#cccccc>
描述</TD>
<TD><INPUT type="text"size=35 name="address"> </TD></TR>
<TR>
<TD bgColor=#cccccc>
价格（元/件）</TD>
<TD><INPUT type="text" size=10 name="city"> </TD></TR>
<TR>
<TD bgColor=#cccccc>
货量</TD>
<TD><INPUT type="text" name="telephone"> </TD></TR>
<TR>
<TD colSpan=6 align="right">
<INPUT class=myinput type=button value=增加 onClick='addRow(this.form);'>
<INPUT class=myinput type=reset value=重置 name=>
<INPUT type=hidden value=insert name=action>
</TD></TR></FORM></TBODY></TABLE>
</body>
</html>
<script type="text/javascript">
/*
增加行
fm是表单对象
*/
function addRow(fm)
{
var tabObj = document.getElementById("productTab");//获取表格对象
var newRow = tabObj.insertRow(tabObj.rows.length);//插入行对象
//行数据
var valueArr = new Array(
fm.number.value,
fm.name.value,
fm.address.value,
fm.city.value,
fm.telephone.value,
"<input class='myinput' type='button' onclick='delRow(this);' value='删除'>",
"<input class='myinput' type='button' value='更新'>"
);
for(var i = 0 ; i < valueArr.length ; i++){
newRow.insertCell(i).innerHTML = valueArr[i];//插入单元格和内容
}
}
/*
删除行
btObj是事件的按钮对象
*/
function delRow(btObj)
{
var tabObj = document.getElementById("productTab");
var rowObj = btObj.parentElement.parentElement;//获取点击的行对象
tabObj.deleteRow(rowObj.rowIndex);//删除
//alert(rowObj.rowIndex);
}
</script>
