如何使用javascript从html表单读取数组数据

Question

面对从HTML表单显示动态添加的数组数据的问题。我也面临着删除添加的行的问题。

  
 var x = 0;
 $('#addButton').on('click', function(e) {
 e.preventDefault();
 if (x < 10) {
  x++;
  $("#addRow").append(
       "<tr>"
    	  +"<td>"+x+"<input type='hidden' value='"+x+"' name='sl[]'></td>"
    	  +"<td><input type='text' name='name[]' placeholder='Full Name'></td>"
    	  +"<td><select name='class[]' >"
    	  +"<option value=''>-select-</option>"
    	  +"<option value='one'>one</option>"
    	  +"<option value='Two'>Two</option>"
    	  +"<option value='Three'>Three</option>"
    	  +"<option value='Four'>Four</option>"
    	  +"</select></td>"
    	  +"<td><input type='radio' name='gender"+x+"[]' value='Male'>Male <input type='radio'  name='gender"+x+"[]' value='Male'>Female</td>"
    	  +"<td><label><input type='checkbox' name='cricket[]' value='Cricket'>Cricket</label> <label><input type='checkbox' name='football[]' value='Football[]'>Football</label><label><input type='checkbox' name='daba[]' value='Daba[]'>Daba</label></td>"
    	  +"<td><button type='button' class='remove_field'>x</button></td>"
    	  +"</tr>");
    	  } else {
    	    alert('Only 10 row alloted');
    	  }
    	});
    	// remove row section
    	$(document).on("click", ".remove_field", function(e) {
    		alert('ok')
    	  e.preventDefault();
    	  $(this).parent('tr').remove();
    	  x--;

    	});
    	// data show from HTML form section
    	$('#myForm').submit(function(event) {
    	    event.preventDefault();
    	    var inputs = $('#myForm :input');
    	    var values = {};
    	    inputs.each(function() {
    	      values[this.name] = $(this).val();
    	    });
        $('#showResult').append(
        		"<tr>"
        			+"<td>" + values.sl + "</td>"
    		    	+"<td>" + values.name + "</td>" 
    		    	+"<td>"	+ values.class + "</td>" 
    		    	+"<td>"+ values.gender + "</td>" 
    		    	+"<td>"	+ values.cricket + ",       "+values.football+","+values.daba+"</td>" 
        		+ "</tr>");
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

     

 - <!-- data section-->

      <h2>Show Result</h2>
       <table class="table" border="">
    		  <thead>
    		    <tr>
    		      <th>SL</th>
    		      <th>Name</th>
    		      <th>Class</th>
    		      <th>Gender</th>
    		      <th>Favourit Game</th>
    		    </tr>
    		    <tbody id="showResult">
    		    </tbody>
    		</table>
<!-- data input section-->

<h2>Input Information</h2>
<form id="myForm">
	<table class="table" border="">
	  <thead>
	    <tr>
	      <th>SL</th>
	      <th>Name</th>
	      <th>Class</th>
	      <th>Gender</th>
	      <th>Favourit Game</th>
	       <th>Action</th>
	    </tr>
	    <tbody id="addRow">
	    </tbody>
	</table>
	<button type="button" id="addButton">Add New</button>
	<button type="submit" name="submit">Show</button>
</form>

我想显示所有数组数据到HTML表中的动态添加的行HTML，我该怎么办，请帮助我

Answer 1

尝试这样。我已经修改了大多数代码，因此无法解释。

var x = 0;
 $('#addButton').on('click', function(e) {
 e.preventDefault();
 if (x < 11) {
  x++;
  $("#addRow").append(
       "<tr>"
    	  +"<td>"+x+"<input type='hidden' value='"+x+"' name='sl[]' id='sl"+x+"'></td>"
    	  +"<td><input type='text' name='name[]' placeholder='Full Name' id='name"+x+"'></td>"
    	  +"<td><select name='class[]' id='class"+x+"'>"
    	  +"<option value=''>-select-</option>"
    	  +"<option value='one'>one</option>"
    	  +"<option value='Two'>Two</option>"
    	  +"<option value='Three'>Three</option>"
    	  +"<option value='Four'>Four</option>"
    	  +"</select></td>"
    	  +"<td><input type='radio' name='gender"+x+"' value='Male' id='male"+x+"'>Male <input type='radio'  name='gender"+x+"' value='Female' id='female"+x+"'>Female</td>"
    	  +"<td><label><input type='checkbox' name='cricket[]' value='Cricket' id='cricket"+x+"'>Cricket</label> <label><input type='checkbox' name='football[]' value='Football' id='football"+x+"'>Football</label><label><input type='checkbox' name='daba[]' value='Daba' id='daba"+x+"'>Daba</label></td>"
    	  +"<td><button type='button' class='remove_field'>x</button></td>"
    	  +"</tr>");
    	  } else {
    	    alert('Only 10 row alloted');
    	  }
    	});
    	// remove row section
    	$(document).on("click", ".remove_field", function(e) {
        e.preventDefault();
        $(this).closest('tr').remove();
        x--;
      });
    	// data show from HTML form section
    	$('#myForm').submit(function(event) {
       $('#showResult').html("");
    	    event.preventDefault();
    	    var inputs = $('#inputTab tbody tr');
    	    var values = {};
           var i = 1;
    	    inputs.each(function() {
          
              var fav = [];
              if($('#cricket'+i).is(":checked")){
                fav.push($('#cricket'+i).val());
              }
              if($('#football'+i).is(":checked")){
                fav.push($('#football'+i).val());
              }
              if($('#daba'+i).is(":checked")){
                fav.push($('#daba'+i).val());
              }
              var sports = fav.join(",");
              var gender = "";
              if($('#male'+i).is(":checked")){
                gender = $('#male'+i).val();
              } else if($('#female'+i).is(":checked")){
                gender = $('#female'+i).val();
              }

             $('#showResult').append(
        		"<tr>"
                +"<td>" + $('#sl'+i).val() + "</td>"
                +"<td>" + $('#name'+i).val() + "</td>" 
                +"<td>"	+ $('#class'+i).val() + "</td>" 
                +"<td>"+ gender + "</td>" 
                +"<td>"	+ sports +"</td>" 
              + "</tr>");
              i++;
    	    });
       
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

     

 - <!-- data section-->

      <h2>Show Result</h2>
       <table class="table" border="">
    		  <thead>
    		    <tr>
    		      <th>SL</th>
    		      <th>Name</th>
    		      <th>Class</th>
    		      <th>Gender</th>
    		      <th>Favourit Game</th>
    		    </tr>
    		    <tbody id="showResult">
    		    </tbody>
    		</table>
<!-- data input section-->

<h2>Input Information</h2>
<form id="myForm">
	<table class="table" border="" id="inputTab">
	  <thead>
	    <tr>
	      <th>SL</th>
	      <th>Name</th>
	      <th>Class</th>
	      <th>Gender</th>
	      <th>Favourit Game</th>
	       <th>Action</th>
	    </tr>
	    <tbody id="addRow">
	    </tbody>
	</table>
	<button type="button" id="addButton">Add New</button>
	<button type="submit" name="submit">Show</button>
</form>

Answer 2

检查所有工作代码的小提琴。

您需要使用.closest而不是.parent。因此您的函数如下所示：

// remove row section
    $(document).on("click", ".remove_field", function(e) {
      alert('ok')
      e.preventDefault();
      $(this).closest('tr').remove();
      x--;
    });

工作小提琴here

Answer 3

以下是我根据您的代码进行的更改：

• 向表元素添加id="inputTable"属性。
• 添加自定义numberRows()函数，以便在每次添加或删除行时动态计算每个行号，因此不再需要重复编号。
• 将class='input-row'属性添加到<tr>生成的元素中。
• 显示空数据，而不显示undefined。

 function numberRows($t) {
     var c = 0;
     $t.find("tr.input-row").each(function (ind, el) {
         $(el).find("td:eq(0)").html(++c + "<input type='hidden' value='" + c + "' name='sl[]'>");
     });
 }

 $('#addButton').on('click', function (e) {
     e.preventDefault();
     x = $("#inputTable").find("tr.input-row").length;         
     if (x < 10) {
         $("#addRow").append(
             "<tr class='input-row'>" +
             "<td></td>" +
             "<td><input type='text' name='name[]' placeholder='Full Name'></td>" +
             "<td><select name='class[]' >" +
             "<option value=''>-select-</option>" +
             "<option value='one'>one</option>" +
             "<option value='Two'>Two</option>" +
             "<option value='Three'>Three</option>" +
             "<option value='Four'>Four</option>" +
             "</select></td>" +
             "<td><input type='radio' name='gender["+x+"]' value='Male'>Male <input type='radio'  name='gender["+x+"]' value='Female'>Female</td>" +
             "<td><label><input type='checkbox' name='cricket[]' value='Cricket'>Cricket</label> <label><input type='checkbox' name='football[]' value='Football'>Football</label><label><input type='checkbox' name='daba[]' value='Daba'>Daba</label></td>" +
             "<td><button type='button' class='remove_field'>x</button></td>" +
             "</tr>");
         x++;
     } else {
         alert('Only 10 row alloted');
     }
     numberRows($("#inputTable"));
 });
 // remove row section
 $(document).on("click", ".remove_field", function (e) {
     alert('ok')
     e.preventDefault();
     $(this).closest('tr').remove(); // changed .parent() to .closest()
     x--;
     numberRows($("#inputTable"));

 });
 // data show from HTML form section
 $('#myForm').submit(function (event) {
     event.preventDefault();

     var input_sl = [];
     var input_name = [];
     var input_class = [];
     var input_gender = [];
     var input_cricket = [];
     var input_football = [];
     var input_daba = [];

     $("#inputTable").find("tr.input-row").each(function (idx, elmt) {
        input_sl.push($(elmt).find("input[name='sl[]']").val());
        input_name.push($(elmt).find("input[name='name[]']").val());
        input_class.push($(elmt).find("select[name='class[]']").val());
        input_gender.push($(elmt).find("input[type='radio']:checked:enabled").val());
        input_cricket.push($(elmt).find("input[name='cricket[]']:checked:enabled").val());
        input_football.push($(elmt).find("input[name='football[]']:checked:enabled").val());
        input_daba.push($(elmt).find("input[name='daba[]']:checked:enabled").val());
     });


     var result = '';
     $.each(input_sl, function (idx, elmt) { 
         result +=
             "<tr>" +
             "<td>" + (input_sl[idx] !== undefined ? input_sl[idx] : '') + "</td>" +
             "<td>" + (input_name[idx] !== undefined ? input_name[idx] : '') + "</td>" +
             "<td>" + (input_class[idx] !== undefined ? input_class[idx] : '') + "</td>" +
             "<td>" + (input_gender[idx] !== undefined ? input_gender[idx] : '') + "</td>" +
             "<td>" + (input_cricket[idx] !== undefined ? input_cricket[idx] + ",       " : '') + (input_football[idx] !== undefined ? input_football[idx] + "," : '') + (input_daba[idx] !== undefined ? input_daba[idx] : '')+ "</td>" +
             "</tr>";
     });

     $('#showResult').html(result);


 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

     

 - <!-- data section-->

      <h2>Show Result</h2>
       <table class="table" border="">
    		  <thead>
    		    <tr>
    		      <th>SL</th>
    		      <th>Name</th>
    		      <th>Class</th>
    		      <th>Gender</th>
    		      <th>Favourit Game</th>
    		    </tr>
    		    <tbody id="showResult">
    		    </tbody>
    		</table>
<!-- data input section-->

<h2>Input Information</h2>
<form id="myForm">
	<table class="table" border="" id="inputTable">
	  <thead>
	    <tr>
	      <th>SL</th>
	      <th>Name</th>
	      <th>Class</th>
	      <th>Gender</th>
	      <th>Favourit Game</th>
	       <th>Action</th>
	    </tr>
	    <tbody id="addRow">
	    </tbody>
	</table>
	<button type="button" id="addButton">Add New</button>
	<button type="submit" name="submit">Show</button>
</form>

从结果表开始，我的方法是创建一个空数组集，并在每次单击[show button]时用它替换表主体，而不是使用.append()。