您的位置:首页 > Web前端 > JQuery

jquery获取表格中动态单元格内单选框和多选框的值

2015-10-23 20:49 651 查看
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>


页面展示如图所示:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: