JS Functions: Code
Chh
🔊
Listen
JS FUNCTIONS:
On the next there is same JS FUNCTION statements under the collapsible section below -
Dynamic Rowspan Function:
OPEN
▼
"id"detail for the function:
▼
<table>
<thead>
<th style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 8px; text-align: left;">Items</th>
<th style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 8px; text-align: left;">Rate Rs.</th>
<th style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 8px; text-align: left;">Stock</th>
</tr>
</thead>
<!-- Table Body section with editable cells -->
<tbody>
<tr style="background: white">
<td id="row-span" contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">22/11/24</td>
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">India</td>
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">Non-Veg</td>
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">Starter</td>
</tbody>
</table>
Detail statement for the Function":
▼
// Adjust rowspan for the first cell of each row
function setRowSpan() {
const rowSpanCell = document.getElementById('row-span');
const rowCount = document.querySelectorAll('#editableTable tbody tr').length;
if (rowSpanCell) {
rowSpanCell.setAttribute('rowspan', rowCount);
}
}
// Load saved data and apply row spans on page load
document.addEventListener("DOMContentLoaded", () => {
loadSavedData();
setRowSpan();
});
Full HTML Code:
Pest Full HTML Parse Code Here
Comments
Post a Comment