I am currently working on designing a table for displaying transaction history related to baby items as part of my javascript course. I need help with assigning each checkbox a unique ID that corresponds to the row number in a sequential order.
Here is the wireframe design:
https://i.sstatic.net/6JVp2.png
Each row in the table is numbered from 1 to the end, and in the rightmost column, there is a toggle checkbox using Bootstrap 4. This allows users to manually select whether they want to list their item for sale ('listing') or end the sales ('ended').
To ensure uniqueness, I plan to name each checkbox input-id 'toggle1', 'toggle2', etc., based on their respective row numbers. The challenge lies in auto-generating these id numbers dynamically.
In order to automatically generate the ids, I have successfully implemented a code snippet that assigns row numbers to the table rows:
Here is a simplified version of the HTML and JavaScript code snippets used:
<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>
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;
}
In addition to this, the code for the table structure and checkboxes has been set up 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>
The goal is to have the input id generated and assigned automatically, matching the corresponding row number.
Your suggestions are greatly appreciated.
Update: @cengiz sevimli mentioned that it might be more prudent to assign the status checkbox id with the item ID instead of row numbers for greater uniqueness. However, the question remains on how to create an id combining user ID #000001 with timestamp - such as 000001-201910301600?