在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
---------------------

我该如何使它正常工作？

- user793468

---

没有“单元格内有行”的概念...你要么需要实现rowspan属性，要么在每个单元格中实现一个表格结构，例如： - freefaller

请确保您在以适当的表格标签开始和结束的单元格中插入完整的表格。 - j08691

如果你想使用jQuery... 那就用jQuery。 - Blazemonger

没有看到任何jQuery代码。而且this是一个关键字，不要将其用作参数。 - light

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/

- Anuj

Answer 2

请看这里 动态添加表格的行列合并

或者

如果不需要新增行，您可以将值添加到单元格中。

例如：

function showP(){
     txt1 = $($('#myTable').find('TR').find('TD')[1]).html()+'</br>S1'
     txt3 = $($('#myTable').find('TR').find('TD')[3]).html()+'</br>D1'

     $($('#myTable').find('TR').find('TD')[1]).html(txt1 )
     $($('#myTable').find('TR').find('TD')[3]).html(txt3 )
}

- Anton Baksheiev

Answer 3

.innerHTML 在处理表格时存在一些问题，至少在 IE 下是如此。

您的选择有：

1. 仅限使用 .innerHTML 更改 td 元素的内容。
2. 使用 .innerHTML 替换整个表格结构。
3. 使用 DOM 方法来操作表格行和单元格。
   https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

- Jeremy J Starcher