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