javascript如何动态在table中加tr和td啊

javascript如何动态在table中加tr和td啊

解决方案 »

  1.   

    主要是通过insertRow实现<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
    <script>
    function onchecks(){
       var tb = document.getElementById("tb")
           var tr1 = tb.insertRow(tb.rows.length);
           index= tb.rows.length;
           var name="name"+index;
           var standand="standand"+index;
           var unit="unit"+index;
           var amount="amount"+index;
           var price="price"+index;
           var re="re"+index;  
           var td1 = tr1.insertCell();
           td1.width = "100px";
           td1.align = "center";
           td1.innerHTML="<input type='text' name='name' id='name' class='fulltext required'/>";    
           var td2 = tr1.insertCell();
          td2.width = "100px";
          td2.innerHTML="<input type='text' name='standand' id='standand' class='fulltext required' />";
           var td3 = tr1.insertCell();
          td3.width = "100px";
          td3.innerHTML="<input type='text' name='unit' id='unit' class='fulltext required' />";
           var td4 = tr1.insertCell();
          td4.width = "100px";
          td4.innerHTML="<input type='text' name='amount' id='amount' class='fulltext required' />";
           var td5 = tr1.insertCell();
          td5.width = "100px";
          td5.innerHTML="<input type='text' name='price' id='price' class='fulltext required' />";
           var td6 = tr1.insertCell();
          td6.width = "100px";
          td6.innerHTML="<input type='text' name='re' id='re' class='fulltext' />";
          index++;
    }
    </script>
    <table id="tb">
    <tr>
        <td class="title" width="1%" nowrap>名称</td>
        <td class="title" width="1%" nowrap>规格</td>
        <td class="title" width="1%" nowrap>单位</td>
        <td class="title" width="1%" nowrap>数量</td>
        <td class="title" width="1%" nowrap>单价(￥)</td>
        <td class="title" width="1%" nowrap>备注</td>
       </tr>
      <tr>
        <td width="1%">
         <input type="text" name="name" id="name1"  />
        </td>  
        <td width="1%">
         <input type="text" name="standand" id="standand1" />
        </td>  
        <td width="1%">
         <input type="text" name="unit" id="unit1" />
        </td>   
        <td width="1%">
         <input type="text" name="amount" id="amount1" />
        </td>   
        <td width="1%">
         <input type="text" name="price" id="price1" />
        </td>      
        <td width="1%">
         <input type="text" name="re" id="re1" />
        </td> 
       </tr>
    </table>
    <input type="button" value="添加行" onclick="onchecks();"> 
    </body>
    </html>
      

  2.   

    createElement + appendChild试试
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title>text</title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <script type="text/javascript" src="jquery-1.7.1.js"></script>
      <script type="text/javascript">
      $(function(){
     $("#addBtn").live("click",function(){
    var number = $("#dataTable tr").length;
    var addRow = "<tr><td>"+number+"</td><td>路人"+number+"</td><td>"+number+"</td><td>男</td></tr>";
    $("#dataTable").append(addRow);
     });
      });
      </script>
     </head> <body>
      <table id="dataTable" border="1">
      <tr>
    <td>序号</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
      </tr>
      <tr>
    <td>1</td>
    <td>甲</td>
    <td>11</td>
    <td>男</td>
      </tr>
      <tr>
    <td>2</td>
    <td>乙</td>
    <td>12</td>
    <td>女</td>
      </tr>
      <tr>
    <td>3</td>
    <td>丙</td>
    <td>13</td>
    <td>男</td>
      </tr>
      </table>
      <button id="addBtn">addRow</button>
     </body>
    </html>
      

  4.   

    jquery
    $(function(){
       var str="<tr><td></td></tr>";
       $("table").append(str);
    });
      

  5.   


    推荐使用insertRow或者insertCell，appendchild在IE浏览器下可能会引起莫名其妙的问题。insertRow或者insertCell各大浏览器的使用方法都一样，只不过有一点小差别，IE允许insertRow() 和insertCell() 不带任何参数，表示插入到最后，而FiireFox要求insertRow 和insertCell 必须带任何参数，用-1表示插入到最后。
      

  6.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            window.onload = function () {
                document.getElementById("butAddRow").attachEvent("onclick", butAddRow);
            }
            function butAddRow() {
                var tab = document.getElementById("tab");
                var trCount = tab.childNodes.length;
                var _tr = document.createElement("tr");
                var _td1 = document.createElement("td");
                _td1.innerHTML = trCount;
                _td1.align = "center";
                var _td2 = document.createElement("td");
                _td2.innerHTML = "<input type='text' style='width:120px;text-align:left;' value='张三'/>";
                _td2.align = "right";
                var _td3 = document.createElement("td");
                _td3.innerHTML = "<input type='text' style='width:120px;text-align:right;' value='20'/>";
                _td3.align = "right";
                var _td4 = document.createElement("td");
                _td4.innerHTML = "<input type='radio' name='gender" + trCount + "' value='男'/>男<input type='radio' name='gender" + trCount + "' value='女'/>女";
                _td4.align = "center";
                _tr.appendChild(_td1);
                _tr.appendChild(_td2);
                _tr.appendChild(_td3);
                _tr.appendChild(_td4);
                tab.appendChild(_tr);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <input type="button" id="butAddRow" value="添加行"/>
        <table id="tab">
        <tr><th style='width:50px;'>序号</th><th style='width:120px;'>姓名</th><th style='width:120px;'>年龄</th><th style='width:120px;'>性别</th></tr>
        </table>
        </div>
        </form>
    </body>
    </html>