我有一个包含多行的html表，用户可以在其中输入一些字段详细信息，如Sprint、Role、Project、Comments和其余字段SID、项目代码当用户单击getDetails按钮时从后端检索。。。用户可以在所有现有的7行中输入数据桌子或者可以只输入几行，然后单击getDetails按钮。我想将用户为每列输入的数据存储在单独的数组可变，这样我就可以将这个数组传递给我的后端函数。。
示例演示：https://plnkr.co/edit/wqvUY58921gzSp1RpUqJ?p=preview
我看到过一些示例，它们在表中显示数组值，但我的要求是将用户输入的每列数据存储在一个单独的表中。样本代码：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function submitData(){
alert("submit");
var sprintFieldArray = [];
var roleFieldArray =[];
var projectFieldArray = [];
}
</script>
</head>
<body>
<table id="productTable" border="1">
<tr>
<th>Sprint <span style="color:red;">*</span></th>
<th>Role<span style="color:red;">*</span></th>
<th>Comments</th>
<th>Project<span style="color:red;">*</span></th>
<th>SID</th>
<th>Proj Code</th>
</tr>
<tr>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="" required>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
<td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
<td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
</tr>
<tr>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="" required>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
<td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
<td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td> </tr>
<tr>
<tr>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="" required>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
<td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
<td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td> </tr>
<tr>
<tr>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="" required>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
<td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
<td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td> </tr>
<tr>
<tr>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="" required>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
<td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
<td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td> </tr>
<tr>
<tr>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="" required>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
<td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
<td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td> </tr>
<tr>
<tr>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="" required>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
<td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
<td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td> </tr>
<tr>
</table> <br>
<input type="submit" value="getDetails" onclick="submitData()">
</body>
</html>
如果用户只在表中输入前5行信息，我希望将数组中字段sprint、role和project列的值存储在这5行的3个不同变量中。。
var sprintFieldArray = [];
var roleFieldArray =[];
var projectFieldArray = [];
您的最终目标仍然不清楚，为什么要将这些值保存到单独的数组中，这样可以将值彼此分离，但现在就开始了。
document.getElementById('form').addEventListener(
'submit',
function(e){
e.preventDefault();
var sprintFieldArray = [];
var roleFieldArray = [];
var projectFieldArray = [];
var sprints = this.getElementsByClassName('sprint');
var roles = this.getElementsByClassName('role');
var projects = this.getElementsByClassName('project');
for (i = 0; i < sprints.length; i++) {
var e = sprints[i];
sprintFieldArray.push(e.options[e.selectedIndex].value)
}
for (i = 0; i < roles.length; i++) {
var e = roles[i];
roleFieldArray.push(e.value);
}
for (i = 0; i < projects.length; i++) {
var e = projects[i];
projectFieldArray.push(e.options[e.selectedIndex].value)
}
console.log('sprintFieldArray', sprintFieldArray);
console.log('roleFieldArray', roleFieldArray);
console.log('projectFieldArray', projectFieldArray);
}
);<form id="form">
<section>
<input type="text" class="role">
<select class="sprint">
<option value=""></option>
<option value="121.1">121.1</option>
<option value="121.2">121.2</option>
<option value="121.3">121.3</option>
<option value="122.1">122.1</option>
<option value="122.2">122.2</option>
</select>
<select class="project" >
<option value=""></option>
<option value="ProA">ProA</option>
<option value="ProB">ProB</option>
<option value="ProC">ProC</option>
<option value="ProD">ProD</option>
</select>
</section>
<section>
<input type="text" class="role">
<select class="sprint" >
<option value=""></option>
<option value="121.1">121.1</option>
<option value="121.2">121.2</option>
<option value="121.3">121.3</option>
<option value="122.1">122.1</option>
<option value="122.2">122.2</option>
</select>
<select class="project" >
<option value=""></option>
<option value="ProA">ProA</option>
<option value="ProB">ProB</option>
<option value="ProC">ProC</option>
<option value="ProD">ProD</option>
</select>
</section>
<button type="submit">Submit</button>
</form>