[英]Insert multiple rows in a cell in HTML Table
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? 我怎样才能使这个工作?
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/
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 )
}
.innerHTML
is rather broken when dealing with tables, at least under IE. 处理表时, .innerHTML
相当破碎,至少在IE下。
Your choices are: 你的选择是:
.innerHTML
to only change the contents of a td
element. 限制使用.innerHTML
仅更改td
元素的内容。 .innerHTML
to replace the ENTIRE table structure 使用.innerHTML
替换ENTIRE表结构 DOM
methods to manipulate table rows and table cells. 使用DOM
方法来操作表行和表单元格。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.