如何从表数据中访问选中的行

Question

我有一个动态生成的表格，在表格加载后，我需要根据复选框在控制台中打印几行选定的行。

表格中填充了来自后端的数据。

<div class="row" style="margin-left : 8px !important;margin-right : 8px !important">
                    <table class="table table-bordered fixed_headers" id="Device_list">
                        <thead>
                            <tr>
                                <th>&nbsp;</th>
                                <th>IPADDRESS</th>
                                <th>DEVICE NAME</th>
                                <th>STATUS</th>
                                <th>BACKUP</th>
                            </tr>
                        </thead>
                        <tbody id = "all_device">
                            {% for item in Device_list %}
                                    <tr>
                                        <td><input type="checkbox" name="device_check"/></td>
                                        <td>{{ item['ipaddress'] }} </td>
                                        <td>{{ item['name'] }} </td>
                                        <td>{{ item['status'] }} </td>
                                        {% if item['backup'] == 'no_backup' %}
                                            <td>{{ item['backup'] }}</td>
                                        {% else %}
                                            <td><a href="{{ url_for('backups_texts',path = item['backup']) }}">Backup</a> </td>
                                        {% endif %}
                                    </tr>
                            {% endfor %}
                        </tbody>
                        <input type="submit" id="bt" value="Show Table Data"  />
                    </table>

function myfunc() {
        console.log ("inside my function");
        var valuelist = [];
        $('#all_device tr').each(function() {
            $(this).find("input[name='device_check']:checked").each(function() {
                var values = [];
                $(this).closest("td").siblings("td").each(function() {
                    values.push($(this).text());
                });
                valuelist.push(values.join(", "));
            });
        });
        console.log("(" + valuelist.join("),(") + ")");
   }
   $(document).ready(function() {
        $("#bt").click(function() {
            myfunc();
        });
   });

请帮助访问表格行内容。

Answer 1

我不知道您的代码是否不起作用，但最好查询所有选中的复选框，而不是循环遍历所有 tr，如下所示：

function myfunc() {
    var valuelist = [];
    $('#all_device input[name=device_check]:checked').each(function(i, c){
        var cb = $(c);
        valuelist.push(cb.parent().siblings().map(function(si, s){ return $(s).text() }).get());
    });

  console.log('Selected', valuelist);
}

控制台应该输出如下：

注意：屏幕截图仅显示示例数据

编辑

如果您想遵循原始代码（其中 valuelist 是逗号分隔值的数组，您可以改用此代码：

function myfunc() {
    var valuelist = [];
    $('#all_device input[name=device_check]:checked').each(function(i, c){
        var cb = $(c);
        valuelist.push(cb.parent().siblings().map(function(si, s){ return $(s).text() }).get().join(', '));
    });

  console.log('Selected', '(' + valuelist.join('),(') + ')');
}