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

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.loop through each table row

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

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

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

      });
});

2.get the respective column checkbox value

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

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

3.upon finish loop, store in database

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