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

I am trying to insert rows within a cell in HTML Table using jquery, I want something like this:

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

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

Here is what I have so far:

以下是我目前所拥有的:

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

}

What is does is, it inserts all in the same Row, something like this:

它所做的是，它把所有的东西都插入到同一行，像这样:

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

How can I make this to work?

我怎样才能使它生效?

3 个解决方案

#1

You Can Fullfill your requirement without using jquery just Paste this Code inside body tag

您可以完全满足您的需求，而无需使用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>

here you can find live example http://jsfiddle.net/Anujyadav123/AdQy3/

在这里，您可以找到实时示例http://jsfiddle.net/Anujyadav123/AdQy3/

#2

.innerHTML is rather broken when dealing with tables, at least under IE.

.在处理表格时，innerhtml是相当坏的，至少在IE下是这样。

Your choices are:

你的选择是:

Restrict the use of .innerHTML to only change the contents of a td element.
限制使用. innerhtml只更改td元素的内容。
Use .innerHTML to replace the ENTIRE table structure
使用.innerHTML替换整个表结构
Use DOM methods to manipulate table rows and table cells.
https://developer.mozilla.org/en-US/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
使用DOM方法操作表行和表单元格。https://developer.mozilla.org/en-US/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

#3

take a look here Add colspan and rowspan on table on the fly

看看这里添加colspan和rowspan在表格上的动态

或

is it important to add row, if not you are able to add your values into cell

如果您不能将您的值添加到单元格中，那么添加行是否重要?

Example:

例子:

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 )
}

#1