我正在创建网站，并且我有一个HTML表，您可以通过单击按钮向其中添加行。每行的每一列都有一个输入框。提交表格后，它应该从所有输入框中检索所有信息，并将其放在分隔行的数组中。
我很肯定这需要循环，因此我尝试从tbody元素中获取子元素，但是没有返回正确的值。
function submitForm() {
var c = $("#tbl").children;
console.log(c);
}
答案 0 :(得分：0)
这是一个简化的解决方案，您可以轻松地处理表单提交代码。
const tdInputs = document.querySelectorAll('td > input');
let inputValues = [];
tdInputs.forEach(input => inputValues.push(input.value));
console.log(inputValues);<table>
<tr>
<td><input type="text" value="value1"></td>
</tr>
<tr>
<td><input type="text" value="value2"></td>
</tr>
</table>
答案 1 :(得分：0)
非常简单，只需浏览数组的行和每一行的单元格即可。 所以显然我不知道您想要什么类型的数组，但是我在这里为您提供了一个带有Jquery的数组的示例。
希望它能对您有所帮助。
$(function(){
var datas = [];
$.each($('#table tr'), function(index, val) {
var childs = $(this).children('td');
var array = {childs: []};
$.each(childs, function(i, v) {
//get your value
var value = $(this).text();
array.childs.push(value);
});
datas.push(array);
});
//final result
console.log(datas);
});<!DOCTYPE html>
<html>
<head>
<title>Resultat</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>
<table id="table" border="1">
<tr>
<td>Value1 line1</td>
<td>Value2 line1</td>
<td>Value3 line1</td>
</tr>
<tr>
<td>Value1 line2</td>
<td>Value2 line2</td>
<td>Value3 line2</td>
</tr>
<tr>
<td>Value1 line3</td>
<td>Value2 line3</td>
<td>Value3 line3</td>
</tr>
</table>
</div>
</body>
</html>
答案 2 :(得分：0)
由于问题中几乎没有任何代码，因此我自由地添加了我认为需要提供的，忽略的问题。如果您没有像演示程序那样进行设置，我建议您考虑对代码进行一些重构。
该演示功能全面：
添加和删除行
<form>包裹在<table>周围，因为每个<input>中都有一个<td>
<form>事件触发后，submit会将其数据发送到实时测试服务器。<iframe>下方的<table>中。submit事件触发的默认行为将通过以下功能暂时推迟：// Earlier in the code, this was called to interrupt the default behavior event.preventDefault(); ... /* .map() all inputs in the table... | store all the strings that contain an input's name and value into a jQuery Object | .get() the data from the jQuery Object as an array | although optional, you can present it as a string by using `.join()` */// Finally, submit the form data to the test server var dataArray = $('.data input').map(function(idx, txt) { return `${$(this).attr('name')}: ${$(this).val()}`; }).get().join(', '); console.log(JSON.stringify(dataArray)); $('.ui').submit(); /**/
var count = 0;
var row = `<tr><td><input name='a'></td><td><input name='b'></td><td><input name='c'></td><td><button class='del' type='button'>➖</button></td></tr>`;
$('.ui').on('click', 'button', function(e) {
e.preventDefault();
if ($(this).hasClass('add')) {
count++;
$('.data').append(row);
$('tr:last input').each(function() {
var name = $(this).attr('name');
$(this).attr('name', name+count);
});
} else if ($(this).hasClass('del')) {
$(this).closest('tr').remove();
} else {
var dataArray = $('.data input').map(function(idx, txt) {
return `${$(this).attr('name')}: ${$(this).val()}`;
}).get().join(', ');
console.log(JSON.stringify(dataArray));
$('.ui').submit();
}
});.ui {width: 100%}
.set {padding: 0;}
.data {width: 100%; table-layout: fixed; border: 1px ridge #777; border-spacing: 1px}
td {width: 30%; padding: 0 1px}
tr td:last-of-type {width: 10%}
.add {margin: 0 0 0 85%;}
iframe {width: 100%}
.as-console-wrapper.as-console-wrapper {
max-height: 20%;
}
.as-console-row.as-console-row::after {
content:'';
padding:0;
margin:0;
border:0;
width:0;
}<form class='ui' action='https://httpbin.org/post' method='post' target='response'>
<fieldset class='set'>
<button class='add' type='button'>➕</button>
<button>🡺</button>
</fieldset>
<table class='data'>
<tr><td><input name='a0'></td><td><input name='b0'></td><td><input name='c0'></td><td><button class='del' type='button'>➖</button></td></tr>
</table>
</form>
<iframe src='about:blank' name='response'></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>