rowspanを1に追加する方法と、新しい行を最後にjavascript jqueryで追加する方法はありますか？

Question

名前と年齢の下に新しい行を追加します。クリックする前に

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

私は失敗したApplyPeopleのCOLSPANは、ここに私のJSコードで、1.Butに追加されます

私のコードで何が問題になっていますか？誰が私を助けられるか？

Answer 1

あなたが望むものを達成するためにjQueryの.attr()を使用することができます。

のjsのコード内のコメント、 - 2（または、あなたのテーブルに開始行数）として、あなたのROWSPANを始める、ともあなたのhtmlに2行目ではcolspanを取り除く - ROWSPANは、あなたは正しい行方不明の列

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