Insert multiple rows in a cell in an HTML table

Question

I am trying to insert rows inside a cell in an HTML table using jquery, I need something like this:

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

Here is what I still have:

 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 it does, it inserts everything on one line, something like this:

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

How can I make this work?

Answer 1

You can fill in your requirement without using jquery just paste this code in 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 a live example http://jsfiddle.net/Anujyadav123/AdQy3/

Answer 2

look here Add a column and rows to the table on the fly

OR

it is important to add a row if you cannot add your values ​​to the 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 ) } 

Answer 3

.innerHTML doesn't work quite well with tables, at least in IE.

Your options:

• Limit the use of .innerHTML only modify the contents of the td element.
• Use .innerHTML to replace the ENTIRE table structure
• Use DOM methods to manage table rows and table cells.
  https://developer.mozilla.org/en-US/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces