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>
页面展示如图所示: