<!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=utf-8" />
<title>交接单</title>
</head><body><table width="100%" border="1" bordercolor="#000000" cellpadding="1">  <tr align="center">
    <td width="136" height="25">&nbsp;</td>
    <td colspan="7">&nbsp;</td>
  </tr>
  <tr align="center">
    <td height="25">&nbsp;</td>
    <td width="141">&nbsp;</td>
    <td width="60">&nbsp;</td>
    <td width="60">&nbsp;</td>
    <td width="248" colspan="3">&nbsp;</td>
    <td width="163">&nbsp;</td>
  </tr>
</table>
</body>
</html>
例如上面html页面,弄2个按钮控制从第二行开始往后增加或者删除一行,js代码如何写?

解决方案 »

  1.   


    var table = document.getElementById("tableId");
                             var tr = table.insertRow(0);//0表示放在最上边
    var td1 = tr.insertCell();//插入单元格
    var td2 = tr.insertCell();
    var td3 = tr.insertCell();
                            td1.innerHTML = "ffffff";//单元格增加内容
    td2.innerHTML = "DDDD";
    td3.innerHTML = "DDDAAa";
      

  2.   


    var table =   document.getElementById('tableId') ;
           table.deleteRow(rowIndex);//rowIndex是一个整数,如果删除是第一个是0,第二个是1,以次类推
      

  3.   


    <!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=utf-8" />
    <title>无标题文档</title>
    <style>
    </style>
    <script src="jquery-1.3.2.js"></script>
    <script>
    $(document).ready(function(){
        $("#add").click(function(){
         $("table").append("<tr align='center'>"+
           "<td height='25'>&nbsp;1</td>"+
       "<td width='141'>&nbsp;2</td>"+
       "<td width='60'>&nbsp;3</td>"+
       "<td width='60'>&nbsp;4</td>"+
       "<td width='248' colspan='3'>5&nbsp;</td>"+
       "<td width='163'>&nbsp;6</td>"+
       "</tr>")
    });
    $("#delete").click(function(){
    if($("table tr:gt(0)").html() != null){
             $("table tr:last").remove();
    }
    });
    });
    </script>
    </head><body>
    <table width="100%" border="1" bordercolor="#000000" cellpadding="1">  <tr align="center">
          <td width="136" height="25">&nbsp;</td>
          <td colspan="7">&nbsp;</td>
      </tr>
      <tr align="center">
          <td height="25">&nbsp;1</td>
          <td width="141">&nbsp;2</td>
          <td width="60">&nbsp;3</td>
          <td width="60">&nbsp;4</td>
          <td width="248" colspan="3">5&nbsp;</td>
          <td width="163">&nbsp;6</td>
      </tr>
    </table>
    <input type="button" id="add" value="增加一行" />
    <input type="button" id="delete" value="减少一行" />
    </body>
    </html>
    jquery的