Response title
This is preview!
Add Multiple Row In A Table and Sub Row
in Getting Started
•
2 years ago
With
jQuery, most of the time we add rows one by one in a
table or delete them. But in my case, the requirement is bit different.
Say I've a table and have to add new row and tested the below:HTML:
<button class="addRow">
Add New Row
</button>
<table>
<thead>
<tr>
<th>Rows</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 0</td>
</tr>
</tbody>
</table> Script:
<script>
var lineNo = 1;
var html = "";
$(document).ready(function () {
$(".addRow").click(function () {
html = "<tr><td>Row" + lineNo + "</td></tr>"; //Binding line no
tableBody = $("table tbody"); //Getting table element with selector
tableBody.append(html); //Appending the table row
lineNo++; //Counter to keep track of added rows
});
});
</script>So with a click event, I am adding multiple rows or rows one by one. But
I am not sure if I can achieve this feature. Say with adding new rows
to a table, I've to add more rows in the same row. As an example, adding
multiple rows seem like this:
product size color price //Column
product1 size1 color1 price1 //Row
product2 size2 color2 price2 In my case, I require to do the following:
product size color price //Column product1 size1 color1(+) price1 //Row product2 size2 color2(+) price2 color2(-) color2(-) color2(-) product3 size3 color3(+) price3 product4 size4 color4(+) price4 color4(-) color4(-) color4(-)There will be add row option (+) in the newly created row, so user can add or remove rows and require to keep the track, say product1 with multiple colors will be assigned to that specific product 1 and so on. I am expecting ideas to implement this feature efficiently and look forward to hear from experts. Thanks.
1