如何循环表格行并获取列复选框

Question

使用 ajax，如何：

1. 循环遍历每个表格行
2. 获取相应列的复选框值
3. 完成循环后，存储在数据库中（请参阅下面的数据库部分）

javascript/jquery

<script type="text/javascript">
    $(document).ready(function() {
        $('#btnUpdPermission').on('click', function(e) {
            var id = '<?php echo $_GET['id'];?>';

            $('#table_perm tbody tr').each(function(){

            });

        });
    });
</script>

HTML

<div class="table-responsive">
    <table class="table table-bordered" id="table_perm">
        <thead>
            <th>Permission</th>
            <th>Read</th>
            <th>Create</th>
            <th>Edit</th>
            <th>Delete</th>
        </thead>
        <tbody>
            <tr>
                <td>Product</td>
                <td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
                <td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
                <td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
                <td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
            </tr>
            <tr>
                <td>Invoice</td>
                <td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
                <td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
                <td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
                <td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
            </tr>
            <tr>
                <td>Quotation</td>
                <td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
                <td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
                <td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
                <td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
            </tr>
            <tr>
                <td>Banking</td>
                <td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
                <td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
                <td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
                <td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
            </tr>
        </tbody>
    </table>
</div>

<button type="button" class="btn btn-primary" id="btnUpdPermission">Save</button>

HTML（屏幕截图）

数据库表设计

1. file_id 是文件主表（授权用户将访问的页面）的外键
2. user_id 是用户主表的外键（授予此访问权限）
3. 权利 r=read,c=create,e=edit,d=delete

Answer 1

1.遍历每个表格行

您应该将.each 方法与children 结合使用。

children 方法获取匹配元素集中每个元素的子元素，可选地由选择器过滤。

$('#table_perm tbody tr').each(function(){
      $(this).children('td').each(function(){

      });
});

2.获取相应列的复选框值

为此，您可以使用find 方法。

$('#table_perm tbody tr').each(function(){
      $(this).children('td').each(function(){
         let checkboxValue = $(this).find('.big-checkbox').val();
      });
});

3.完成循环后，存入数据库

为此，您可以通过 AJAX 发送所有信息来创建一个异步调用，也可以通过从服务器端传递一个操作方法来使用form。

Answer 2

如果我理解得很好，每一行对应一个文件主表的权限，对吧？ （在您的数据库中由 file_id 标识）如果是这种情况，首先我会将该 id 放入每个表行（作为 id、作为 data-* 字段等）...

<tr data-id="3">
    <td>Product</td>
    <td><input type="checkbox" class="big-checkbox" name="r[]"/></td>
    <td><input type="checkbox" class="big-checkbox" name="c[]"/></td>
    <td><input type="checkbox" class="big-checkbox" name="e[]"/></td>
    <td><input type="checkbox" class="big-checkbox" name="d[]"/></td>
</tr>
<tr data-id="4">
    <td>Invoice</td>
    <td><input type="checkbox" class="big-checkbox" name="r[]"/></td>
    <td><input type="checkbox" class="big-checkbox" name="c[]"/></td>
    <td><input type="checkbox" class="big-checkbox" name="e[]"/></td>
    <td><input type="checkbox" class="big-checkbox" name="d[]"/></td>
</tr>
...................

然后，考虑到您的表结构，循环您的行并获取所有复选框值，一个选项可能是...

var myPermissions = {};

$('#table_perm tbody tr').each(function() {

    var sectionId = $(this).data('id');
    var sectionPermissions = [];

    $(this).find('input.big-checkbox:checked').each(function() {
        sectionPermissions.push($(this).attr('name').charAt(0));
    });

    myPermissions[sectionId] = sectionPermissions.join(',');

});

所以你终于得到了一个对象myPermissions，它拥有每个部分的所有权限...

{
    3: "r,c",
    4: "r,d",
    5: "c,e,d"
    ....
}

您可以在 ajax 调用中将其作为参数发送。

注意：您的代码中有两条建议...

1. 您的 html 中有错误，您的 td 结束行两次 (</td></td>)

2. 如果您打算使用 ajax 而不是使用表单来收集数据，为了避免从字符串名称中获取权限字母，最好为每个复选框分配一个值，指示该权限的字母.我的意思是……

   <td><input type="checkbox" class="big-checkbox" name="r[]" value="r"/></td>
   <td><input type="checkbox" class="big-checkbox" name="c[]" value="c"/></td>
   ..........
   

   ...那么获得价值会更容易和更清洁...

   sectionPermissions.push($(this).val());
   

希望对你有帮助