I'm trying to create a dynamic table where I can add rows and Sub rows on button click.
Currently I have 2 features:
- on Group button click, add a new row,
- on Genre button click, add a new sub row inside the same genre,
On Group button click I can Add a new row and it works fine, but in any group, If I try to add 2+ genres, then the table layout gets messed up.
$(document).on('click', '#my_table button.2ndName', function() {
var $row = $(this).closest("tr");
var nrid = $row.find(".nr").attr('rowspan');
if (nrid == null) {
nrid = 1;
}
nrid++;
$row.find(".nr").attr('rowspan', nrid);
var newRow = $("<tr>");
var cols = "";
var $td = $(this).closest("td");
$td.find("#btn").hide();
cols += '<td><input type="text" placeholder="" size="13" /><button class="2ndName" id="btn">+</button></td> <td><input type="text" placeholder="" size="7"></td><td><input type="text"placeholder="" size="7"></td><td><input type="text" placeholder="" size="7"></td"><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="10" placeholder=""></td><td><input type="text" placeholder="" size="7"></td><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="7" placeholder=""></td></tr>';
newRow.append(cols);
newRow.insertAfter($(this).parents().closest('tr'));
});
$(document).on('click', '#my_table button.site', function() {
var $row = $(this).closest("tr");
var newRow = $("<tr>");
var cols = "";
var $td = $(this).closest("td");
$td.find("#btn").hide();
cols += '<td class="nr"><input type="text" placeholder="" size="9"><button id="btn" class="site" style="float:right;">+</button></td><td><input type="text" placeholder="" size="13"><button class="2ndName" id="btn" style="float:right;">+</button></td><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="10" placeholder=""></td><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="7" placeholder=""></td></tr>';
newRow.append(cols);
newRow.insertAfter($(this).parents().closest('tr'));
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table class="my_table" id="my_table" border="1px" style="border-collapse: collapse;"><tr><td>Group</td><td>Genre</td><td>Movie Name</td><td>Imdb</td><td>Rotten Tomato</td><td>Lead Actress</td><td>Lead Actor</td><td>Year of Release</td><td>Revenue</td><td>Budget</td></tr><tr><td class="nr"><input type="text" placeholder="" size="9"><button id="btn" class="site" style="float:right;">+</button></td><td><input type="text" placeholder="" size="13"><button class="2ndName" id="btn" style="float:right;">+</button></td><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="10" placeholder=""></td><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="7" placeholder=""></td></tr></table>
