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>

页面展示如图所示:

时间: 2024-10-06 23:11:36

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

如何实时获取DBGrid 中当前单元格输入的内容?

如何获取DBGrid 中当前单元格输入的内容? 还没输入完成,我想实时获取 Cell中的内容,以便作其他处理, 用什么事件呢? 所以Field的Onchange事件是没用的. 这个问题简单啊,每输入1个数据的后就提交(并不是提交到数据库,还是在编辑状态),那么用DataSet就可以取值了 用DBGrid的KeyUp事件: procedure TForm1.DBGrid1KeyUp(Sender: TObject; var Key: Word;   Shift: TShiftState); beg

(很难啊)如何实时获取DBGrid 中当前单元格输入的内容? [问题点数:100分,结帖人yifawu100]

如何获取DBGrid 中当前单元格输入的内容? 还没输入完成,我想实时获取 Cell中的内容,以便作其他处理,用什么事件呢? 所以Field的Onchange事件是没用的. DBGrid1.SelectedField.AsStringDBGrid1.SelectedField.Text看你需要选择 这个问题简单啊,每输入1个数据的后就提交(并不是提交到数据库,还是在编辑状态),那么用DataSet就可以取值了用DBGrid的KeyUp事件: procedure TForm1.DBGrid1Key

JavaScript基础 rows,cells 得到表格中所有单元格的内容

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

HTML页面中使用JQuery获取表格的所有单元的的数据

首先在IE下面  var mytable = document.getElementById("mytable").rows[1].cells[2].innerHTML;  这种方式 IE下面回报错:说没有.innerHTML的值:查资料发现是因为 .innerHTML和jQuery冲突 那只能用jQuery的方式获取单元的值了 1.先获取表格有几行数据和几列数据          var rows = document.getElementById("playlistTab

使用JS遍历Table表格中所有单元格内容

通过JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现:使用该方法时必须为Table表格设置唯一的id属性. function GetInfoFromTable() { var tableInfo = ""; var tableObj = document.getElementByIdx_x("tableid"); //获取表格对象 for (var i = 0; i < tableObj.rows.length; i++) { //遍历Tabl

JQuery 获取表格中的数据

举个例子 var arr = $('#table tbody tr td:nth-child(2)') //根据id依次找到表格中的td,而后取每列的第二个值 .map(function () { return $(this).text() }) // 使用 map 对每一个 td 进行处理,function为回调函数,返回每个元素的text .get(); // 将对象集合转换为数组 另外还可以在后面.join(",") 这将转换成字符串. jQuery下有个概念叫"类数组

Bootstrap3基础 table-condensed 表格中的单元格紧凑一些

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Firefox / Chrome   bootstrap:3.3.7 代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta

JS动态生成表格后 合并单元格

JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单元格操作,在做之前也试着google下,但是网上没有碰到这方面的需求,所以自己写了一个简单的.用文字描述需求太费劲了,如下图所示: 1. 没有合并之前的图如下: 2. 合并之后的图如下: 如上所示:是根据相邻的编号相同 进行单元格合并. 先看看实现后的效果再聊吧! JSfiddle链接地址如下: 点

使用jquery合并表格中相同文本的相邻单元格

一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/> <style></style> <script src="js/jquery-2.1.4.min.js"></script> </head> <body>