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

 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>

页面展示如图所示: 

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

原文地址:http://www.cnblogs.com/doudingbest/p/4905646.html

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注