JS动态添加tr元素

最新推荐文章于 2024-08-21 23:32:24 发布

藏红

最新推荐文章于 2024-08-21 23:32:24 发布

阅读量9.7k

点赞数 3

文章标签： javascript 动态添加 Uncaught NotFoundErr

本文链接：https://blog.csdn.net/ch717828/article/details/44852221

版权

<html>
  <body>
   <table width="100%" border="0"  cellspacing="0" cellpadding="0"  class="new_tb">
         
          <tbody id="tb1">
            
         
          
           <tr >
           <td  style="font-size:12px;">tr1:</td>
           <td ><select name="newleaderselection" class="log_select">
              <option value="1" selected>是</option>
              <option value="0" >否</option>
           </select></td>
          </tr>

          <tr id="last_tr"><td><input name="old_mt_id" value="0" type=hidden /></td></tr>
        </tbody>
        </table>
        <a href="javascript:addDiv();">test</a>                          
  </body>
<script   type="text/javascript">   
 function addDiv(){
        //创建行
        var   tr=document.createElement("tr");   
        //newNode.setAttribute("id","a3");   
        //创建第一个单元格
        var   td = document.createElement("td");
        var   tdContent = document.createTextNode("xxxxxx");
        td.appendChild(tdContent);
        //tr中添加该单元格
        tr.appendChild(td);
        //创建第二个单元格
        td = document.createElement("td");
        //创建多选项
        var selection = document.createElement("select");
        //创建选项
        var option = document.createElement("option");
        var optionContent = document.createTextNode("option1");
        option.appendChild(optionContent);
        //多选项添加单选项
        selection.appendChild(option);
        option = document.createElement("option");
        optionContent = document.createTextNode("option2");
         //多选项添加单选项
        selection.appendChild(option);
        //td中添加selection
        td.appendChild(selection);
         //tr中添加该单元格
        tr.appendChild(td);
        //在id为tb1的父元素下添加tr,添加的位置在 id为last_tr之前
        document.getElementById("tb1").insertBefore(tr,document.getElementById("last_tr"));   
       
        alert(document.getElementById("tb1").innerHTML);  
}
 </script>   
</html>

注意，如果没有<tbody>元素，直接在table元素下添加，可能会出现