[Solved] How to make rowspan add 1 and new row added last with javascript jquery?

by


You can use jQuery’s .attr() to achieve what you want:

Comments in code for js, – and also in your html, start your rowspan off as 2 (or the number of rows you start in your table) and get rid of the colspan in the second row – the rowspan handles the missing column

$('#addPeople').click(function () {
        newrow = '<tr><td style="width:25%">John</td><td style="width:55%">20</td></tr>';
        var rowspan = parseInt($('#appPeople').attr('rowspan')) + 1; // use attr to get the rowspan and parseInt to make it an int
        
        $('#appPeople').attr('rowspan', rowspan);  // use attr to set the rowspan
        
        $('#staTable tr:eq(0)').after(newrow);       // use after if you want to add it after the first row, eq(0) means get the first instance of
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="staTable">
<tr>
<td style="width:20%" rowspan=2 id="appPeople">
applyPeople<br />
<input type="button" id="addPeople" value="">
</td>
<td style="width:25%">name</td>
<td style="width:55%">age</td>
</tr>
<tr>
   <td style="width:20%">zone</td>
   <td style="width:80%">letter</td>
</tr>
</table>

7

solved How to make rowspan add 1 and new row added last with javascript jquery?