如何循環表行並獲取列復選框

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 =讀，c =創建，e =編輯，d =刪除

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.upon完成循環，存儲在數據庫中

為此，您可以通過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()); 

我希望它有所幫助