javascript - 在 HTML 表格的单元格中插入多行

Question

我正在尝试使用 jquery 在 HTML 表格的单元格中插入行，我想要这样的东西:

--------------
ID | Sec | Div
--------------
1  | S1  | D1
   | S2  | D2
   | S3  | D3
--------------
2  | S3  | D3
   | S4  | D4
   | S5  | D5
--------------

这是我目前所拥有的:

function insertRows(this){


var Rows1 = '<tr><td> S1 </td></tr><tr><td> S2 </td></tr><tr><td> S3 </td></tr>'
var Rows2 = '<tr><td> S3 </td></tr><tr><td> S4 </td></tr><tr><td> S5 </td></tr>'

this.srcElement.parentElement.nextSibling.outerHTML = Rows1
this.srcElement.parentElement.nextSibling.nextSibling.outerHTML = Rows2

}

它的作用是，将所有内容插入同一行，如下所示:

---------------------
ID | Sec     | Div
---------------------
1  | S1S2S3  | D1D2D3
---------------------
2  | S3S4S5  | D3D4D5
---------------------

我怎样才能让它发挥作用？

Answer 1

您可以在不使用 jquery 的情况下满足您的要求 只需将这段代码粘贴到 body 标签中

 <table>
 <tr>
 <td >ID</td>
 <td>SEC</td>
 <td>DIV</td>

 </tr>
 <tr>
 <td rowspan="3">1</td>
 <td>S1</td>
 <td>D1</td>

 </tr>
 <tr>

 <td>S2</td>
<td>D2</td>

</tr>
<tr>

<td>S3</td>
<td>D3</td>

</tr>
<tr><td colspan="3">---------------------</td></tr>
<tr>
<td>ID</td>
<td>SEC</td>
<td>DIV</td>

</tr>
<tr>
<td rowspan="3">2</td>
<td>S1</td>
<td>D1</td>

</tr>
<tr>

<td>S2</td>
<td>D2</td>

</tr>
<tr>

<td>S3</td>
<td>D3</td>

</tr>
</table>

在这里你可以找到实例 http://jsfiddle.net/Anujyadav123/AdQy3/