前言
不知道是不是大家也遇到过类似的表单，但我绝对是第一次见，如下图所示，表单中包含了表格。
上图中的表格数据是根据数据库中学生表而变化的，这增加了获取表中数据的复杂程度，这里仅仅是记录js如何获取数据传值到后端的办法，所以，仅以表格中张三、李四为例。
示例代码
html
<div class="modal-body">
<form id="exam-score-add-form" class="smart-form">
<dl class="dl-horizontal fullscreen-dl ">
<dt>课程</dt>
<dd>
<section class="col col-6">
<label class="select">
<select name="courseId" id="add-course-id">
</select><i></i>
</section>
</dd>
<table id="table-student-list" class="table table-hover table-bordered smart-form has-tickbox">
<thead>
<tr>
<th width="6%">序号</th>
<th width="28%">学号</th>
<th width="30%">姓名</th>
<th width="30%">成绩</th>
</tr>
</thead>
<tbody id="student-list">
</tbody>
</table>
<div class="row">
<div class="page col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="page-info-add" class="clearfix pull-right mt15">
<div class="pagination-info pull-left">共
<span class="totalPages"></span>页/ 共
<span class="totalElements"></span>条数据, 每页显示
<select class="input-mini" id="maxsize">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>条</div>
<ul class="pull-right pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class=‘fa fa-times‘></i> 取消</button>
<button type="button" class="btn btn-info" id="btn-exam-score-save"><i class=‘fa fa-floppy-o‘></i> 保存</button>
</div>
css就略了。。。
js
表格内容加载：
function student_list(class_id,pageno){
var size =$(‘#maxsize‘).val()?$(‘#maxsize‘).val():20;
//Ajax 获取添加框的学生信息分页列表的 URL 地址
var url ="/server/student/info/pagelist.json?size="+size+"&start="+pageno;
var data={
classId: class_id
};
$.getJSON(url,data,function(rtn){
var datalist = student_list_html(rtn);
$(‘#student-list‘).html(datalist);
$(‘#page-info-add‘).html(data_page(rtn.totalElements,rtn.totalPages,rtn.number,‘student-list‘,‘maxsize‘));
$(‘#maxsize option[value = ‘+size+‘]‘)[0].selected = true;
$(‘#maxsize‘).change(function(){
student_list(class_id,0);
})
});
}不含checkbox的表格
function student_list_html(page){
var tpl=[
‘{@each content as it,k}‘,
‘<tr>‘,
‘<td>${parseInt(k)+1}</td>‘ ,
‘<td>${it.studentCode}</td>‘,
‘<td>${it.studentName}</td>‘,
‘<td>‘,
‘<label class="input remind">‘,
‘<input type="text" name="${it.id}" id="score1s_${parseInt(k)+1}">‘,
‘</label>‘,
‘</td>‘,
‘</tr>‘,
‘{@/each}‘
].join(‘\n‘);
return juicer(tpl,page);
}注：这里用的是juicer模板引擎，你也可以用别的^_^
官网 ：http://juicer.name/
含checkbox的表格
注意：html中表头如下：
<thead>
<tr>
<th width="6%">序号</th>
<th width="28%">学号</th>
<th width="30%">姓名</th>
<th width="30%">成绩</th>
</tr>
</thead>js中表格内容如下：
function student_list_html(page){
var tpl=[
‘{@each content as it,k}‘,
‘<tr>‘,
‘<td>‘,
‘<label class="checkbox">‘,
‘<input type="checkbox" class="invechk" name="checkbox-inline" id="${it.id}">‘,
‘<i></i>‘,
‘</label>‘,
‘</td>‘,
‘<td name="${it.id}">${parseInt(k)+1}</td>‘ ,
‘<td>${it.studentCode}</td>‘,
‘<td>${it.studentName}</td>‘,
‘<td>‘,
‘<label class="input remind">‘,
‘<input type="text" id="score1s_${parseInt(k)+1}">‘,
‘</label>‘,
‘</td>‘,
‘</tr>‘,
‘{@/each}‘
].join(‘\n‘);
return juicer(tpl,page);
}js获取表格中的数据
不含checkbox的表格
没有checkbox的情况下，input的value为空的那条记录不必提交。
var url = "/server/score/info/add.json";//Ajax 获取添加保存时数据提交的 URL 地址
var ids = [ ];
var score1s=[ ];
//表中数据条数
var Num=$("#page-info-add .totalElements").text();
for(var i=1;i<=Num;i++){
if ( $(‘#score1s_‘+i+‘ ‘).val() !=""){
//获取studentId
ids.push($(‘#score1s_‘+i+‘ ‘).attr(‘name‘));
}
}
//获取成绩不为空的成绩值
var courseId =$(‘#add-course-id‘).val();
score1s = $("#student-list input").map(function(i,v){return v.value}).filter(function(i,v){return v.trim() !== ""}) .toArray();
var data={
studentIds: ids,
courseId: courseId,
score1s: score1s
};
jQuery.ajaxSettings.traditional = true;
$.getJSON(url,data,function(rtn){
$(‘#modal-exam-score-add‘).modal(‘hide‘);
showDialog(rtn.code);
//获取当前节点的classId
var class_id=curNode.id;
//刷新列表
exam_score_list(class_id,0);
}); 含checkbox的表格
有checkbox的情况下，没被选中的那条记录以及选中了但input的value为空的那条记录都不必提交。
var url = "/server/score/info/add.json";//Ajax 获取添加保存时数据提交的 URL 地址
var ids = [ ];
var score1s=[ ];
var chkBoxes = $(‘#student-list‘).find(‘input:checked‘);
if (chkBoxes.length == 0) {
showDialog(‘请至少选择一个学生‘);
return false;
}
$(chkBoxes).each(function() {
ids.push($(this).attr(‘id‘));
});
var courseId =$(‘#add-course-id‘).val();
for(var i=0;i<chkBoxes.length;i++){
var tdname=ids[i];
//获取checked该条记录的序号
var n = $("td[name="+tdname+"]").text();
if ( (i+1)==n ) {
//若该记录的序号n与score1s的id: score1s_n对应，则获取该成绩值
score1s.push($(‘#score1s_‘+n+‘‘).val());
}
}
var data={
studentIds: ids,
courseId: courseId,
score1s: score1s
};
jQuery.ajaxSettings.traditional = true;
$.getJSON(url,data,function(rtn){
$(‘#modal-exam-score-add‘).modal(‘hide‘);
showDialog(rtn.code);
//该添加框隐藏后，主页面上的相应列表刷新
});后记
可能写的思路有些乱，看不懂，不是你原因，那一定是我写的太差劲，表达不清晰。。。
由于这是公司项目里用到的，不可能贴完整代码，所以，只言片语表达不清楚的地方，还请谅解^_^
