在 JQuery 中的动态数组中创建动态数组
Creating a dynamic array within a dynamic array in JQuery
我有一个像下面这样的表格,其中包含步骤,每个步骤包含多门课程。
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name">
<input type="text" class="si-step-input" name="step-id">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name">
<input type="text" class="si-step-input" name="course-id">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<button type="button" id="si-step-btn" class="si-step-btn">Add step</button>
当我点击 "Add step" 和 "Add course" 按钮时,如何正确地附加这些?
我需要以这种格式添加它们
targetCourse: [{
step-name:
step-id:
course: [{
course-name:
course-id:
}]
}]
您可以使用 querySelectorAll
提取所有步骤。然后,遍历此集合中的所有步骤并使用 querySelector
收集名称、ID 和课程。
Array.prototype.map
将使迭代更容易。
var stepElements = document.querySelectorAll('.si-steps');
var result = [].map.call(stepElements, function(stepElement) {
var courseElements = stepElement.querySelectorAll('.si-courses');
var coursesInfo = [].map.call(courseElements, function(courseElement) {
return {
'course-name': courseElement.querySelector("[name='course-name']").value,
'course-id': courseElement.querySelector("[name='course-id']").value
};
});
return {
'step-name': stepElement.querySelector("[name='step-name']").value,
'step-id': stepElement.querySelector("[name='step-id']").value,
'course': coursesInfo
};
});
document.getElementById('result').innerText = JSON.stringify(result, null, 4);
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name" value="step1">
<input type="text" class="si-step-input" name="step-id" value="1">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name" value="course1">
<input type="text" class="si-step-input" name="course-id" id="c1">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name" value="step2">
<input type="text" class="si-step-input" name="step-id" value="2">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name" value="course3">
<input type="text" class="si-step-input" name="course-id" id="c3">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<button type="button" id="si-step-btn" class="si-step-btn">Add step</button>
<div>
<pre id="result">
</pre>
</div>
请注意,Add course
和 Add step
按钮未实现。向下滚动代码段以查看结果。
我有一个像下面这样的表格,其中包含步骤,每个步骤包含多门课程。
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name">
<input type="text" class="si-step-input" name="step-id">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name">
<input type="text" class="si-step-input" name="course-id">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<button type="button" id="si-step-btn" class="si-step-btn">Add step</button>
当我点击 "Add step" 和 "Add course" 按钮时,如何正确地附加这些?
我需要以这种格式添加它们
targetCourse: [{
step-name:
step-id:
course: [{
course-name:
course-id:
}]
}]
您可以使用 querySelectorAll
提取所有步骤。然后,遍历此集合中的所有步骤并使用 querySelector
收集名称、ID 和课程。
Array.prototype.map
将使迭代更容易。
var stepElements = document.querySelectorAll('.si-steps');
var result = [].map.call(stepElements, function(stepElement) {
var courseElements = stepElement.querySelectorAll('.si-courses');
var coursesInfo = [].map.call(courseElements, function(courseElement) {
return {
'course-name': courseElement.querySelector("[name='course-name']").value,
'course-id': courseElement.querySelector("[name='course-id']").value
};
});
return {
'step-name': stepElement.querySelector("[name='step-name']").value,
'step-id': stepElement.querySelector("[name='step-id']").value,
'course': coursesInfo
};
});
document.getElementById('result').innerText = JSON.stringify(result, null, 4);
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name" value="step1">
<input type="text" class="si-step-input" name="step-id" value="1">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name" value="course1">
<input type="text" class="si-step-input" name="course-id" id="c1">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name" value="step2">
<input type="text" class="si-step-input" name="step-id" value="2">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name" value="course3">
<input type="text" class="si-step-input" name="course-id" id="c3">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<button type="button" id="si-step-btn" class="si-step-btn">Add step</button>
<div>
<pre id="result">
</pre>
</div>
请注意,Add course
和 Add step
按钮未实现。向下滚动代码段以查看结果。