insertRow() to specific row id

Question

Using

var row = table.insertRow(id);

how can I specify that the new row goes under the used chosen ID, rather than a hardcoded index or at the end of the table? I have a drop down that has different options of what row id to place your new row under. The drop down options have matching ids to the related rows. Thanks. Here is my table, I want the new row go go under the user selected father (father3, father4, or father5)

 <table id="shore_tab" border="1">
                      <tr class="row_blue_bold father" id="father3">
                        <td colspan="2" class="father_header">Category 3</td>
                        <td class="cell_50">&nbsp;</td>
                      </tr>
                            <tr class="row_blue_bold son3">
                              <td class="cell_20 cell_no_bkg">&nbsp;</td>
                              <td class="cell_190">(information for father3, category 3)</td>
                              <td class="cell_50">&nbsp;</td>
                            </tr>
                            <tr class="row_blue_bold son3">
                              <td class="cell_20 cell_no_bkg">&nbsp;</td>
                              <td class="cell_190">(information for father3, category 3)</td>
                              <td class="cell_50">&nbsp;</td>
                            </tr>
                      <tr class="row_blue_bold father" id="father4">
                        <td colspan="2" class="father_header">Category 4</td>
                        <td class="cell_50">&nbsp;</td>
                      </tr>
                            <tr class="row_blue_bold son4">
                              <td class="cell_20 cell_no_bkg">&nbsp;</td>
                              <td class="cell_190">(information for father4, category 4)</td>
                              <td class="cell_50">&nbsp;</td>
                            </tr>
                            <tr class="row_blue_bold son4">
                              <td class="cell_20 cell_no_bkg">&nbsp;</td>
                              <td class="cell_190">(information for father4, category 4)</td>
                              <td class="cell_50">&nbsp;</td>
                            </tr>
                    </table>

You probably have to get the index of the row with that ID and pass it (+1) to insertRow. — Felix Kling
– Felix Kling, Commented Jan 22, 2013 at 17:42

Musa · Accepted Answer · 2013-01-22 17:49:07Z

2

You can use the id to get the index

var row = table.insertRow(document.getElementById(id).rowIndex+1);//+1 to be inserted under

answered Jan 22, 2013 at 17:49

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

triplethreat77 Over a year ago

I updated my question. I need new rows to go under either father3, father4, or father5, depending on what the user chose from the drop down.

Musa Over a year ago

@triplethreat77 id will be the id the user chooses like father3 etc

triplethreat77 Over a year ago

this seems like a perfect solution, but I can't get it to work. Can you take a look at my previous post? The code for the drop downs is there too. stackoverflow.com/questions/14463030/…

Musa Over a year ago

@triplethreat77 your <option>s had ids and not values, use these values to get the rowIndex of the required row see jsfiddle.net/mowglisanu/8tfhn/1

triplethreat77 Over a year ago

I thought I was going crazy. I copied the exact code to my document...and it wouldn't work. To realize my jsfiddle was in Chrome and my project is in IE. Musa, this works beautifully in Chrome, but unfortunately I must use it in IE.

|

Halcyon · Accepted Answer · 2013-01-22 17:43:56Z

0

id should be index, that is: table.rows is like an Array (it's not actually an Array, but behaves like one).

answered Jan 22, 2013 at 17:43

Halcyon

57.8k10 gold badges93 silver badges131 bronze badges

2 Comments

triplethreat77 Over a year ago

var row = table.insertRow(0); Like this. But I don't want it at a specfied index of 0 or -3. I need it to place after a chosen row id.

Halcyon Over a year ago

Pass in the index of the row (not the id because there is no such thing).

Collectives™ on Stack Overflow

insertRow() to specific row id

2 Answers 2

10 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

2 Comments

Linked

Related