JS动态添加tr元素

来源：互联网发布：淘宝美图怎么学编辑：程序博客网时间：2024/04/29 18:09

<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元素下添加，可能会出现

Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

了解更多

http://blog.csdn.net/cike121272604/article/details/5809114

http://stackoverflow.com/questions/23401641/uncaught-notfounderror-failed-to-execute-insertbefore-on-node-the-node-bef

0 0