1.通过table的Id获取到每行(tr)的元素,
$("#table_xuan tr") 如果过滤第一行和最后一行 $("#table_xuan tr:not(:first):not(:last)")
2.通过 each()函数遍历 每一行
$("#table_xuan tr").each(function(i)){ // i 代表的是行数
$(this).children("td").each(function(j)){ //j代表的是每一列
}
}
3. 单选框是否选中,及获取选中值
var radio = $(this).find(':radio:checked');
if(radio.length > 0) {
trcontent=trcontent+radio.val()+"|";
} else {
return false;
}
4.多选框是否选中
var checkbox = $(this).find(':checkbox:checked');
if(checkbox.length > 0) {
var firstzx=$(checkbox[0]).val(); //第一被选中的子项
trcontent=trcontent+firstzx.substring(0,firstzx.indexOf('_')+1);//子项
checkbox.each(function(k){
var zx=$(checkbox[k]).val();
trcontent=trcontent+zx.substring(zx.indexOf('_')+1);
});
trcontent=trcontent+"|";
} else {
return false;
}
HTML代码
<form id="xuanform">
<table id="table_xuan" class="default trChangeColor" width="100%"><tr class="title">
<td >学校编号</td>
<td >教学规模</td>
<td >教学经费</td>
<td >专业门类</td>
</tr>
<tr>
<td><input id="X00" type="text" value="10060" readonly="readonly" style="background-color:transparent;border: 0px transparent;" /></td>
<td>
<label><input id="X01" name="X01" type="radio" value="A0_A" />苹果 </label>
<label><input id="X01" name="X01" type="radio" value="A0_B" />桃子 </label>
<label><input id="X01" name="X01" type="radio" value="A0_C" />香蕉 </label>
<label><input id="X01" name="X01" type="radio" value="A0_D" />梨 </label>
<label><input id="X01" name="X01" type="radio" value="A0_E" />其它 </label>
</td>
<td>
<label><input id="X02" name="X02" type="radio" value="boy" />男</label>
<label><input id="X02" name="X02" type="radio" value="girl" />女</label>
</td>
<td>
<label><input id="X03" name="B0" type="checkbox" value="B0_A" />苹果 </label>
<label><input id="X03" name="B0" type="checkbox" value="B0_B" />桃子 </label>
<label><input id="X03" name="B0" type="checkbox" value="B0_C" />香蕉 </label>
<label><input id="X03" name="B0" type="checkbox" value="B0_D" />梨 </label>
</td>
</tr>
<tr>
<td><input id="X10" type="text" value="10061" readonly="readonly" style="background-color:transparent;border: 0px transparent;" /></td>
<td>
<label><input id="X11" name="A1" type="radio" value="A1_A" />苹果 </label>
<label><input id="X11" name="A1" type="radio" value="A1_B" />桃子 </label>
<label><input id="X11" name="A1" type="radio" value="A1_C" />香蕉 </label>
<label><input id="X11" name="A1" type="radio" value="A1_D" />梨 </label>
<label><input id="X11" name="A1" type="radio" value="A1_E" />其它 </label>
</td>
<td>
<label><input id="X12" name="C1" type="radio" value="boy" />男</label>
<label><input id="X12" name="C1" type="radio" value="girl" />女</label>
</td>
<td>
<label><input id="X13" name="B1" type="checkbox" value="B1_A" />苹果 </label>
<label><input id="X13" name="B1" type="checkbox" value="B1_B" />桃子 </label>
<label><input id="X13" name="B1" type="checkbox" value="B1_C" />香蕉 </label>
<label><input id="X13" name="B1" type="checkbox" value="B1_D" />梨 </label>
</td>
</tr>
<tr align="center">
<td colspan="5">
<input type="button" value="确定" onclick="addxuan()" class="btn" id="okbtn">
</td>
</tr>
</table>
</form>
JS代码:
<script type="text/javascript">
function check(){
var trcontent="";
$("#table_xuan tr:not(:first):not(:last)").each(function(i){ //过滤掉第一行和最后一行
console.info("这是第"+i+"行内容");
$(this).children("td").each(function(j){
var typename=$("#X"+i+j).prop("type");
if(typename=="radio"){
var radio = $(this).find(':radio:checked');
if(radio.length > 0) {
trcontent=trcontent+radio.val()+"|";
} else {
return false;
}
}else{
if(typename=="checkbox"){
var checkbox = $(this).find(':checkbox:checked');
if(checkbox.length > 0) {
var firstzx=$(checkbox[0]).val(); //第一被选中的子项
trcontent=trcontent+firstzx.substring(0,firstzx.indexOf('_')+1);//子项
checkbox.each(function(k){
var zx=$(checkbox[k]).val();
trcontent=trcontent+zx.substring(zx.indexOf('_')+1);
});
trcontent=trcontent+"|";
} else {
return false;
}
}else{
trcontent=trcontent+$("#X"+i+j).val()+"|";
}
}
//console.info("第"+i+"个td的内容:"+$(this).text());
});
trcontent=trcontent+";";
});
console.info(trcontent);
return trcontent;
}
function addxuan(){
check();
/* if(check()){
var content=check();
$.post(
"xuan!addxuan.action",{
"xuan" : content
},
function(data) {
if(data){
alert("设置成功!");
}else
alert("设置失败,请重新刷新页面!");
}
);
}else{
alert("页面中有未选中项!");
}
*/
}
</script>
页面展示如图所示: