js动态生成table元素，并删除tr行

这是我在做项目时，遇到一个问题，动态生成table表格，在网上找了很多资料，要么代码复杂，要么就是不完整的，其中生成的table是可以删除的，不过我是用的jQuery写的，所以要在jQuery的环境下，代码才能更好的演示哦。

<table id="tb1" style="margin-top:5px;">
                               <tr>
                                   <td colspan="3">
                                       <input name="TIME_DAY" id="TIME_DAY" value=" " type="text" readonly="readonly" style="width:100px;" title="日期">
                                   </td>
                                   <td><button onclick="inser_table()" value="添加table" style="margin-left:20px;">添加table</button></td>
                               </tr>
                               <tr>
                                   <td><input name="START_TIME" id="START_TIME" value="" type="text" readonly="readonly" title="开始时间段" style="width:60%;margin-top:5px;" /></td>
                                   <td><input name="END_TIME" id="END_TIME" value="" type="text" readonly="readonly" p title="结束时间段" style="width:60%;margin-top:5px;" /></td>
                                   <td><input name="NUM" id="NUM" value="" type="text" title="就诊的人数" style="width:60%;margin-top:5px;" /></td>
                                   <td style="display: none;"><input type="hiden" name="areadyNUM" value="0"></td>
                                   <td><button onclick="insert_row(this)" value="添加" style="margin-left:20px;">添加行</button></td>
                                   <td></td>
                               </tr>
                               </table>
                               
                               <table name="newTb" id="newTb"></table>

           C = R.insertCell()
           C.innerHTML = "<input name='NUM' id='NUM"+i+"' value='' type='text' style='width:60%;margin-top:5px;' />"


           S = R.insertCell()
           S.innerHTML = "<input type='hiden' name='areadyNUM' value='0'></td>"
           S.setAttribute("style","display:none");//设置这个生成td的属性

           C = R.insertCell();
           C.innerHTML="<td style='text-align: center;'><button onclick='insert_row(this)'style='margin-left:20px;'>添加行</button></td>";

           C = R.insertCell()
           C.innerHTML = "<button value='添加td' onclick='deleteRow(this)' style='margin-left:20px;'>删除行</button>"
           }
           //删除操作
           function deleteRow(obj){

           var tableId=obj.parentElement.parentElement.parentElement.parentElement.id;
           var tdId= document.getElementById(tableId);
           tdId.deleteRow(obj.parentElement.parentElement.rowIndex);
           }
       function deletTable(obj){
           var tableId=obj.parentElement.parentElement.parentElement.parentElement.id;
           var tdId= document.getElementById(tableId);
           $(tdId).remove();
           }

           //添加表格
           var j=0;
           function inser_table(){
           j++;
           var tbB=document.getElementById("newTb")

           tableNode=document.createElement("table");
           tableNode.setAttribute("id","Tb"+j);
           tableNode.setAttribute("name","Tb"+j);
           tableNode.setAttribute("style","margin-top:5px;");
           tbB.parentNode.insertBefore(tableNode,tbB);//新建立的table放在tbB元素前面

           var tab="<td style='display: none;'><input type='hiden' name='new'></td><tr><td colspan='3'><input class='span10 date-picker date2' name='TIME_DAY' id='IME_DAY1"+j+"' value='' type='text' data-date-format='yyyy-mm-dd' readonly='readonly' style='width:100px;' placeholder='日期' title='日期'></td><td><button value='添加table' onclick='inser_table()' style='margin-left:20px;'>添加table</button></td><td><button onclick='deletTable(this)' value='删除table' style='margin-left:20px;'>删除table</button></td></tr><tr><td><input class='span10 date-picker time' name='START_TIME' id='START_TIME01"+j+"' value='' type='text' readonly='readonly' placeholder='开始时间段' title='开始时间段' style='width:60%;margin-top:5px;' /></td><td><input class='pan10 date-picker time' name='END_TIME' id='END_TIME1"+j+"' value='' type='text' readonly='readonly' placeholder='结束时间段' title='结束时间段' style='width:60%;margin-top:5px;' /></td><td><input name='NUM' id='NUM1"+j+"' value='' type='text' placeholder='就诊的人数' title='诊的人数' style='width:60%;margin-top:5px;' /></td><td style='display: none;'><input type='hiden' name='areadyNUM' value='0'></td><td><button onclick='insert_row(this)' value='添加行' style='margin-left:20px;'>添加行</button></td><td><button value='删除行' onclick='deleteRow(this)' style='margin-left:20px;'>删除行</button></td></tr>";

           tableNode.innerHTML=tab;
       }
       </script>

js动态生成table元素，并删除tr行

猜你喜欢