Javascript 在 HTML 表格的单元格中插入多行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12569020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert multiple rows in a cell in HTML Table
提问by user793468
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?
我怎样才能使这个工作？
回答by Anuj
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/
回答by Anton Baksheiev
take a look here Add colspan and rowspan on table on the fly
看看这里 动态在表上添加 colspan 和 rowspan
OR
或者
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 )
}
回答by Jeremy J Starcher
.innerHTMLis rather broken when dealing with tables, at least under IE.
.innerHTML处理表格时相当糟糕，至少在 IE 下是这样。
Your choices are:
您的选择是：
- Restrict the use of
.innerHTMLto only change the contents of atdelement. - Use
.innerHTMLto replace the ENTIRE table structure - Use
DOMmethods to manipulate table rows and table cells.
https://developer.mozilla.org/en-US/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
- 将 的使用限制
.innerHTML为仅更改td元素的内容。 - 使用
.innerHTML更换整个表结构 - 使用
DOM方法来操作表格行和表格单元格。
https://developer.mozilla.org/en-US/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
