时间戳

首页 > 解决方案 > 迭代 JQuery 数据表中的所有检查行

jquery - 迭代 JQuery 数据表中的所有检查行

问题描述

您好我有一个带有复选框的 Jquery 数据表。我想迭代所有选中的行并将其显示在警报上。我怎样才能做到这一点？这是我的代码：

$(document).ready(function () {
        dataTable = $("#ItemDT").DataTable({
            "ajax": {
                "url": "/Home/GetData",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                { "data": "Name","width": "300px" }, 
                { "data": "Brand" },
                { "data": "ReplenishLimit" },
                { "data": "ReplenishQuantity" },
                { "data": "Quantity" }, 


            ],
            'columnDefs': [{
                'targets': 5,
                'searchable': false,
                'orderable': false,
                "data": "Id",
                'className': 'dt-body-center',
                'render': function (data, type, full, meta) {
                    return '<input type="checkbox" name="id[]" value="'
                        + $('<div/>').text(data).html() + '">';
                }
            }],
        });
    });

标签： jquery

解决方案

您可以尝试以下方式从table. datatable此处使用来自博客的示例数据。

HTML

<table id="ItemDT">
 <thead>
            <tr>
                <th></th>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>$320,800</td>
            </tr>
            <tr>
            <td><input type="checkbox"></td>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>$170,750</td>
            </tr>
            <tr>
            <td><input type="checkbox"></td>
                <td>Ashton</td>
                <td>Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>$86,000</td>
            </tr>
            <tr>
            <td><input type="checkbox"></td>
                <td>Cedric</td>
                <td>Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>$433,060</td>
            </tr>
            <tr>
            <td><input type="checkbox"></td>
                <td>Airi</td>
                <td>Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>$162,700</td>
            </tr>

        </tbody>
</table>

<input type="button" value="Get Checked" id="btnGetchecked" />

JS

$(function() {

    dataTable = $("#ItemDT").DataTable();

    $('body').on('click', '#btnGetchecked', '', function() {
        var CheckedRow = $("#ItemDT tbody tr").filter(function() {

            if ($(this).find('td:eq(0) > input[type="checkbox"]').is(':checked')) {
                return $(this).html();
            }
        });

        $.each(CheckedRow, function(key, value) {
            console.log(key);
            console.log(value);
        });



    });


});

这里value包含每个选中的行。希望这可以帮助。

在这里演示

推荐阅读