2 
<table>
<form>         
<tr><td colspan="4"><div id="myTableData" style="display:none;"><table><tr><td width="175">NAME</td><td width="245">&nbsp;Gender</td><td width="245">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 がありますが、[子供の追加] ボタンをクリックすると、名前、性別、生年月日、および削除という名前の 4 つの列が div に表示されます。

ボタンのクリック addkid でテーブルを動的に作成しましたが、(del) という名前の削除ボタンがクリックされた場合に、情報を含む行全体を削除したいと考えています。全体が送信時に機能する形式になっています。

4

1 に答える 1

0 
$('#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]);
}
于 2013-09-09T13:14:31.790 に答える