mercredi 30 octobre 2019

How to assign unique id to checkboxes which correspond to its row number under Bootstrap 4?

I'm designing a table to display transaction history for baby items for a javascript course. How to assign each checkbox with unique id composed of number sequence corresponding to row number?

The wireframe is shown below.

A design of the table

Each row is numbered in sequence, starting from 1 to the end of table row.

In the rightmost column, with the help of Bootstrap 4, I put a toggle checkbox, so that the user can manually choose whether to list his / her item for sale ('listing'), or end the sales ('ended').

I've been told that each checkbox id has to be unique, so I intend to name the input-id of each one 'toogle1', 'toogle2', etc, according to their respective row number.

My question is: how to auto-generate the id number?

I did a similar exercise for the row number, with the following code:

HTML:

<table id="table" data-toggle="table" data-height="800" data-pagination="true" data-page-size="3">
    <thead>
        <tr>
            <th data-field="seq-number" data-width="100" data-width-unit="px">Number</th>
        </tr>
    </thead>
</table>

JavaScript:

var table = document.getElementsByTagName('table')[0],
rows = table.getElementsByTagName('tr'),
text = 'textContent' in document ? 'textContent' : 'innerText';

for (var i = 1, rowlength = rows.length; i < rowlength; i++) {rows[i].children[0][text]= i;
}

On the other hand, my code for the table and checkbox is as follows:

<table id="table" data-toggle="table" data-height="800" data-pagination="true" data-page-size="3">
            <thead>
                <tr>
                    <th data-field="status" data-width="200" data-width-unit="px">Status</th>
                </tr>
            </thead>



<tr>
    <td>
        <input type="checkbox" id="toggle1" data-width="100">
            <script>
                 $(function () {
                 $('#toggle1').bootstrapToggle({
                 on: 'Listing',
                 off: 'Ended'
                 });
                 })
            </script>
    </td>
</tr>

I expect the input id (ie. toggle1, toggle2, ... , toggle999) can be generated and assigned automatically, corresponding to the row number.

I expect the end result with id = "'toggle' + i" .

Thank you very much for your help.




Aucun commentaire:

Enregistrer un commentaire