我们如何从数据表中获取选定的检查值

Question

我有一个带复选框的数据表，我想要选择的行字段

我们如何使用Jquery

获取所选的复选框行值

数据表的Jquery代码：

$.ajax({
                            type:"post", 
                            dataType : 'json',
                            url:"pages/Createkey.php", 
                            data:"adgroup="+grpvalue, 
                            success: function(s) {
                            oTable.fnClearTable();
                            for(var i = 0; i < s.length; i++) {

                                oTable.fnAddData([
                                    ("<input type='checkbox' id='checkboxID'/>"),
                                    s[i]['adg']["0"],
                                    s[i]['sta']["0"],
                                    s[i]['cli']["0"],
                                    s[i]['cpc']["0"],
                                    s[i]['con']["0"],
                                    s[i]['ctr']["0"],
                                    s[i]['imp']["0"],
                                    s[i]['ap']["0"],
                                    s[i]['cost']["0"]
                                    ]);


                                    }
                                    }
                        });

我的html数据表是：

<table id="example3" class="table table-bordered table-striped num-right-alignct">
                                        <thead>

                                            <tr>
                                                <th></th>
                                                <th  style="text-align: center;">Key Word</th>
                                                <th  style="text-align: center;">Status</th>
                                                <th  style="text-align: center;">Clicks</th>
                                                <th  style="text-align: center;">Avg CPC</th>
                                                <th  style="text-align: center;">Conversions</th>
                                                <th  style="text-align: center;">CTR %</th>
                                                <th  style="text-align: center;">Impressions</th>
                                                <th  style="text-align: center;">Avg Pos</th>
                                                <th  style="text-align: center;">Cost</th>

                                            </tr>
                                        </thead>

                                        <tbody>



                                        </tbody>


                                    </table>

我的桌子是：

Answer 1

首先，在您的复选框中添加一个唯一的id（只是为了以某种方式区分它们）：

...
oTable.fnAddData([
            ("<input type='checkbox' id='row_'" + i +"/>"),// Add unique ID to each checkbox.
....

现在，找到所选复选框并在数组中存储该行的值：

var selected = [];
$('#example3 input:checked').each(function() {
   var $item = $(this);
   var $siblings = $item.parent().siblings();// Assuming the values are siblings of the checkbox parent.
    selected.push({// Store values as objects.
       id: $item.attr("id"),
       keyWord: $($siblings[0]).text(),// Assuming "Key Word" is the first sibling and the value of the field is in the text property.
       status: $($siblings[1]).text(),// Assuming "Status" is the second sibling and the value of the field is in the text property.
       ...
    });
});

您将最终得到一系列对象，这些对象包含所选行的字段。可能你必须做一些调整，但我认为你有这个想法。

Answer 2

@acontell代码中的一点修改解决了我的问题。在这里提供代码，这可能有助于某人。

在您的复选框中添加课程：

oTable.fnAddData([
        ("<input type='checkbox' id='checkboxID' class='checkboxClass'/>"),

将选中的值存储在数组中，并在取消选中时删除值。

var selected = [];
$('table#example3 tbody').on('change', '.checkboxClass', function () {

    var ischecked = $(this).is(":checked");
    // If checkbox is checked then store checkbox value in array
    // If checkbox is unchecked then remove checkbox value from array
    if (ischecked) {
        selected.push($(this).val());
    } else {
        if ((index = selected.indexOf($(this).val())) !== -1) {
            selected.splice(index, 1);
        }
    }

    // Remove duplicate elements from selected array
    selected = $.unique(selected);
    alert(selected);
});