<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">&nbsp;</td>
    <td width="70">&nbsp;</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>

解决方案 »

  1.   

    现成的代码俺是没有,不过可以告诉你几个dom的常用命令,熟悉一下以后就不会常常问别人了createElement() //创建一个HTML元素setAttribute() //设置一个属性
    appendChild() //向页面或向某个元素里添加元素
    removeChild() //删除元素
    insertRow() //添加表格行insertCell() //添加单元格
      

  2.   

    参考
    <input type="button" onclick="add_row()" value="增加行" />
    <table style="border:1px solid #ccc;">
    <tr id="mb"><td><input type="checkbox"></td><td>中华人民共和国</td><td><input type="button" value="delete" onclick="del_row(this)" /></td></tr>
    </table><script>
    function add_row(){
    var trmb = document.getElementById('mb');
    var ntr = trmb.cloneNode(true);
    ntr.id = '';
    trmb.parentNode.appendChild(ntr);
    } function del_row(tr){
    if(tr.parentNode.parentNode.id!='mb')tr.parentNode.parentNode.parentNode.removeChild(tr.parentNode.parentNode);
    }
    </script>
      

  3.   

    采用CreatElement()动态创建表格即可。
      

  4.   

    <html>
    <head>
    <script type="text/javascript">
    function insRow()
       {
       var r = document.getElementById('myTable').insertRow()
       var c = r.insertCell()
       c.innerText = "new cell"
       c = r.insertCell()
       c.innerText = "new cell"
       }
    </script>
    </head><body>
    <table id="myTable" border="1">
    <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
    </tr>
    <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
    </tr>
    </table>

    <br />
    <input type="button" onclick="insRow()" value="Insert new row"></body>
    </html>
      

  5.   

    谢谢各位,6楼弟兄的代码在firefox没有反应!不知道为什么,揭贴!