如何使用 JavaScript 从 HTML 表单读取数组数据

Question

面临显示HTML表单动态添加的数组数据的问题.i也面临删除添加行的问题。

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

检查所有工作代码。

您需要使用 .nearest 而不是 .parent。所以你的函数将如下所示：

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

在这里工作小提琴

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()。