how to loop table row and get the column checkbox

Question

Using ajax, how to:

loop through each table row

get the respective column checkbox value

upon finish loop, store in database (refer to Database section below)

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 (screenshot)

Database table design

file_id is the foreign key to the file master table (page that authorized user will access)

user_id is the foreign key to the user master table (to whom this access is granted)

rights r=read,c=create,e=edit,d=delete

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

If I understand it well, each row corresponds to permissions to one file master table, right? (identified by file_id in your database) If that's the case, first I'd put that id each table row (as an id, as a data-* field, etc.)...

<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>
...................

Then, considering your table structure, to loop your rows and get all the checkboxes values, one option could be...

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(',');

});

So you finally get an object myPermissions with all permissions for each section...

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

You can send that in your ajax call as a parameter.

NOTE: Two pieces of advice in your code...

There's an error in your html, your closing td lines twice (</td></td>)
If you're going to do this collecting data with ajax and not using a form, to avoid getting the permission letter from the string name, it would be better if you assign a value to each checkbox indicating the letter of that permission. I mean...
```
<td><input type="checkbox" class="big-checkbox" name="r[]" value="r"/></td>
<td><input type="checkbox" class="big-checkbox" name="c[]" value="c"/></td>
..........
```
... so then would be easier and cleaner to get the value...
```
sectionPermissions.push($(this).val());
```

I hope it helps

how to loop table row and get the column checkbox

Sign up