如何从动态创建的表中删除信息

Posted 2023-03-05

【中文标题】如何从动态创建的表中删除信息

【英文标题】：How to delete the information from dynamically created table

【发布时间】：2013-09-12 23:38:09

【问题描述】：

<table>
<form>         
<tr><td colspan="4"><div id="myTableData" style="display:none;"><table><tr><td >NAME</td><td >&nbsp;Gender</td><td >Date of Birth</td></tr></table></div></td></tr>
                 <tr><td colspan="4"><input type="button"  value="ADD KID " onClick="addrow()" />
<tr><td><input type="submit" name="reg"  value="" class="submitbut" onclick="chkform()"/></td></tr>
        </table>

          </form>
    <script>
     function addrow() 

                document.getElementById("myTableData").style.display="block";

                  var el = document.createElement('input');
                      el.type = 'text';
                      el.name = 'kname';

                  var del = document.createElement('input');
                      del.type = 'button';
                      del.name = 'delll';
                      del.value = 'del';


                  var el_r = document.createElement('input');
                      el_r.type = 'radio';
                      el_r.name = 'gender';
                      el_r.value ='FEMALE';
                      el_r.id = "rad1";  
                      el_r.defaultChecked = true;   


                  var el_r2 = document.createElement('input');
                      el_r2.type = 'radio';
                      el_r2.name = 'gender';
                      el_r2.value ='MALE';
                      el_r2.id = "rad2";  
                   var obj1 = document.createTextNode("Female");  
                   var obj2 = document.createTextNode("Male");  

                   var objLabel = document.createElement("label");  
                    objLabel.htmlFor = el_r.id;  
                    objLabel.appendChild(el_r);  
                    objLabel.appendChild(obj1);

                   var objLabel2 = document.createElement("label");  
                    objLabel2.htmlFor = el_r2.id;  
                    objLabel2.appendChild(el_r2);  
                    objLabel2.appendChild(obj2);  

                   var el_s = document.createElement('select');
                       el_s.onchange =  function() 
                       var r = el_s.options[el_s.selectedIndex].value;

                        


                  for(var i=0;i<32;i++)
                  
                     var j = i;
                      j = document.createElement('option');
                      j.text=i;
                      j.name="day";
                      j.value=j;
                      el_s.appendChild(j);
                  
                  var month = new Array("January","Februray","March","April","May","June","July","August","September","October","November","December");
                  var el_sm = document.createElement('select');
                  for(var i=0;i<month.length;i++)
                  
                     var j = i;
                      j = document.createElement('option');
                      j.text=month[i];
                      j.name="month";
                      j.value=month[i];
                      el_sm.appendChild(j);
                  

                  var el_sy = document.createElement('select');
                  for(var i=2013;i>1950;i--)
                  
                     var j = i;
                      j = document.createElement('option');
                      j.text=i;
                      j.name="year";
                      j.value=j;
                      el_sy.appendChild(j);
                  



                var table = document.getElementById("myTableData");
                var tableBody = document.createElement('TBODY');
                table.appendChild(tableBody);

                   var tr = document.createElement('TR');
                   tableBody.appendChild(tr);

                       var td = document.createElement('TD');
                       td.width='175';
                       td.appendChild(el);
                       tr.appendChild(td);

                       var td = document.createElement('TD');
                       td.width='245';
                       td.appendChild(objLabel);
                       td.appendChild(objLabel2);
                       tr.appendChild(td);

                       var td = document.createElement('TD');
                       td.width='245';
                       td.appendChild(el_s);
                       td.appendChild(el_sm);
                       td.appendChild(el_sy);
                       tr.appendChild(td);

                       var td = document.createElement('TD');
                       td.width='20';
                       td.appendChild(del);
                       tr.appendChild(td);

                      myTableData.appendChild(table);

            

            </script>
    </body>
    </html>

有一个隐藏的 div，但是当我单击添加孩子按钮时，该 div 显示为 4 列，名为 name 性别和出生日期并删除。

我已经在按钮单击 addkid 上动态创建了一个表，现在我想删除包含信息的整行，如果单击名为 (del) 的删除按钮，这怎么可能。 整个事情都是在提交时起作用的形式。

【参考方案1】：

$('#myTableData').find('tr').each(function()
   $(this).remove(); // remove element 
)

使用纯 javascript 你可以做到：

var table = document.getElementById('myTableData');
var trs = table.getElementsByTagName('tr');
var dad = trs[0].parentNode;

for(var i = 0; i < trs.length; i++)
   dad.removeChild(trs[i]);

【讨论】：

我不想在这个中使用 jquery 我可以在 jaavscript 中这样做

是的，正如我发布的那样，第二段代码使用纯 javascript 删除了所有 trs。