table表格的遍历

最新推荐文章于 2021-09-23 11:59:38 发布

原创最新推荐文章于 2021-09-23 11:59:38 发布 · 4.8k 阅读

7 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍如何使用jQuery遍历不带选择按钮及带有选择按钮的Table表格数据，包括将数据存储到数组中，以及如何获取被选中的行数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.没有选择按钮的table表格的遍历，如图所示：

代码1：

<script>
    // 遍历每条数据的id，playlist代表tbody的id，这里id的值为vid，然后放在数组arr里面
    var arr=[];
    $("#playlist tr").each(function(k,v) {
        //v代表每一个tr标签
        var vid = $(v).data("dt");
        console.log("--->",v,vid);
        arr.push(vid);
    });
</script>

代码2：

<script>
    var ads = [];
    // speakers代表tbody的id
    $("#speakers").find("tr").each(function() {
        // this代表每一个tr标签，tdArr代表每一个tr标签下面的所有td标签
        var tdArr = $(this).children();
        var dict = {}
        dict["title"] = tdArr.eq(0).html();//标题
        dict["adver"] = tdArr.eq(1).html();//视频广告
        dict["time"] = tdArr.eq(2).html(); //时间
        ads.push(dict)
    });
</script>

2.有选择按钮的table表格的遍历(取出按钮选中的)，如图所示：

代码1：

<script>
    var carts=[];
    // playlist是tbody的id
    $.each($('#playlist input:checkbox:checked'),function () {
        // 第一个parent是td，第二个parent是tr，第三个children是tr下面所有的td标签
        var p = $(this).parent().parent().children();
        // eq(1)代表第二个td标签
        carts.push(p.eq(1).text())
    });
</script>

代码2：

<script>
    var carts=[];
    $.each($('input:checkbox:checked'),function () {
        var dict = {}
        var p = $(this).parent().parent().children();
        dict["id"] = p.eq(1).text()
        dict["title"] = p.eq(2).text()
        dict["category"] = p.eq(3).text()
        dict["videlurl"] = p.eq(4).text()
        dict["brief"] = p.eq(5).text()
        carts.push(dict)
    });
</script>

代码3：

<script>
    var qas=[];
    $('#questionlist tr.gradeX input[type="checkbox"]').each(function (k, v) {
        // console.log(k,v);
        if ($(v).prop('checked')) {
            var tds = $(v).parent().parent().find('td');
            console.log(k,tds.eq(1).text());
            var record = [];
            // 每一行一共有多少列，就小于多少
            for(var i=1;i<7;i++)
                record.push(tds.eq(i).text());
            record.push(tds.eq(7).find("input").val());
            console.log("record=>",record);
            qas.push(record);
        }
    });
</script>