zoukankan      html  css  js  c++  java
  • 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>

    页面展示如图所示: 

  • 相关阅读:
    h5唤起app
    app唤起的完美解决方案,及阻止浏览器的默认弹窗行为
    cdn
    函数声明和函数表达式的区别
    基础系列(7)—— 结构
    基础系列(4)—— C#装箱和拆箱
    重温软件工程——对软件工程的初步了解
    基础系列(9)—— 抽象方法和接口
    自学系列--git的基础简介
    设计模式之简单工厂模式
  • 原文地址:https://www.cnblogs.com/doudingbest/p/4905646.html
Copyright © 2011-2022 走看看