js:
//选择成人票数
$("#Crrs").on("change", function () {
var Crrs = $('#Crrs').val();
var len = maxLength - parseInt(Crrs);
setErtong(len);//根据已选择的成人票数,决定儿童和婴儿的票数上限
setYinger(len);
addCrrsData(parseInt(Crrs), '成人');
});
//添加成人机票信息
function addCrrsData(length, type) {
var html = "";
for (var i = 0; i < length; i++) {
html += "<tr>";
html += "<td>" + (i + 1) + "</td> ";
html += "<td>" + type + "</td>";
html += "<td><input id='crrsName" + i + "' /></td>";
html += "<td><select id='crrsType" + i + "' ><option value='0' selected='selected'>身份证</option><option value='1'>护照</option></select></td>";
html += "<td><input id='crrsNum" + i + "' /></td>";
html += "<td>CZ:<input id='czNum" + i + "' /></td>";
html += "</tr>";
}
$('#data').html(html);
}
html:
<table style="width: 768px; font-size: 14px; margin-top: 20px;">
<thead>
<tr>
<th>序号</th>
<th>类型</th>
<th>旅客姓名</th>
<th>证件类型</th>
<th>证件号码</th>
<th>明珠卡号</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
第一步:选择N个人数的时候,循环次数为N,通过append方法追加html到指定dom节点下即可。
第二步:取值的时候,通过$(document).find("dom元素") 去取元素,再去取值。因为动态追加的dom元素直接$("dom元素")是取不到的。而是需要先获取document文档,再查找文档里的指定元素。
动态追加的每行可以加个统一的class,通过JQ获取class的时候遍历下面的children节点,然后一个一个正常取值。
谢谢