如何使rowspan添加1和新行添加與JavaScript的jQuery的最後？

Question

這裏我想在名字和年齡下添加新行。 ApplyPeople的合併單元格將被添加到1.But我失敗了，這是我的JS代碼：

$(document).ready(function() 
{ 
    $('#add').click(function() { 
     newrow = '<tr><td style="width:25%">John</td><td style="width:55%">20</td></tr>'; 
     $('#apply').rowspan = $('#apply').rowspan + 1; 
     $('#staTable tr:xie').append(newrow);  
    }); 
} 

點擊之前，HTML代碼：

<tr> 
    <td style="width:20%" rowspan=1 id="apply"> 
     applyPeople<br /> 
     <input type="button" id="add" value="add"> 
    </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%" colspan=2>letter</td> 
</tr> 

點擊後，HTML代碼：

<tr> 
    <td style="width:20%" rowspan=2 id="apply"> 
     apply<br /> 
     <input type="button" id="add" value="add"> 
    </td> 
    <td style="width:25%">name</td> 
    <td style="width:55%">age</td> 
</tr> 
<tr id="xie" > 
    <td style="width:25%">John</td> 
    <td style="width:55%">20</td> 
</tr> 
<tr> 
    <td style="width:20%">zone</td> 
    <td style="width:80%" colspan=2>letter</td> 
</tr> 

我的代碼有什麼問題？誰能幫我？

Answer 1

您可以使用jQuery的.attr()達到你想要的東西：

在代碼中的註釋的JS， - 而且在你的HTML，開始你行跨度斷爲2（或你在你的表格開始的行數）第二行中擺脫合併單元格的 - 該行跨度處理缺失列

$('#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>