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

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

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

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

• javascript
• jquery
• html-table

• 1 There is no concept of having "rows within cells"... you either need to implement the rowspan attribute, or implement a table structure within each cell, for example – freefaller Commented Sep 24, 2012 at 16:22
• 2 Make sure you insert complete tables within the cell that start and end with proper table tags. – j08691 Commented Sep 24, 2012 at 16:23
• If you want to use jQuery... then use jQuery. – Blazemonger Commented Sep 24, 2012 at 16:35
• There is no jQuery code visible. And this is a keyword, don't use it as a parameter. – light Commented Jun 22, 2015 at 11:19

4 Answers 4

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

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

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

Your choices are:

1. Restrict the use of .innerHTML to only change the contents of a td element.
2. Use .innerHTML to replace the ENTIRE table structure
3. 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

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

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

Old question but if anybody still cares ...

I'll assume the <table> statement and the headings are already in the HTML but there is no "detail data" inside it and we want to add all that stuff. That is, the HTML includes

<table id="mytable">
<tr><th>ID</th> <th>Sec</th> <th>Div</th>
</table>

That's how I do it if I can so that you can readily see where the table goes when looking at the HTML, and you don't need possibly obscure code to put it in the right place. And you don't need code to create the th's, which is a bit more complicated than creating td's ... but that's another subject.

let table=document.getElementById("mytable")
let row=table.insertRow(-1)
let cell=row.insertCell(-1)
cell.rowSpan=3
cell.innerHTML="1"
let cell=row.insertCell(-1)
cell.innerHTML="S1"
let cell=row.insertCell(-1)
cell.innerHTML="D1"
row=table.insertRow(-1)
cell=row.insertCell(-1)
cell.innerHTML="S2"
cell=row.insertCell(-1)
cell.innerHTML="D2"
row=table.insertRow(-1)
cell=row.insertCell(-1)
cell.innerHTML="S3"
cell=row.insertCell(-1)
cell.innerHTML="D3"
// ... and then similarly for the second block

The trick here, to get "multiple rows in a cell", is rowSpan. That says that this cell takes up more than one row. Note that when you use rowSpan, the following row or rows should not have a cell where it would be "overlapped". That is, in this example where you have 3 columns but the first cell takes 3 rows, the next 2 rows should have only 2 columns each.

A logically simpler option is to put "S1
S2
S3" into the appropriate cell. The catch to this is that if you have multiple columns, text between columns might not line up. I had a table that I tried to do this way but the first column had radio buttons, which made each text line a little taller, so they didn't line up.