Jquery insert new row into table at a certain index

Question

I know how to append or prepend a new row into a table using jquery       my table  gt  tbody last   append html     How to I insert the row  given in the html variable  into a specific  row index  i   So if i 3  for instance  the row will be inserted as the 4th row in the table

User · Accepted Answer

You can use  eq   and  after   like this       my table  gt  tbody  gt  tr   eq i-1  after html     The indexes are 0 based  so to be the 4th row  you need i-1  since  eq 3  would be the 4th row  you need to go back to the 3rd row  2  and insert  after   that

User · Answer

Use the eq selector to selct the nth row  0-based  and add your row after it using after  so       my table  gt  tbody last tr eq 2    after html     where html is a tr

User · Answer

try this      table myTable tr   last   after data

User · Answer

Note       my table  gt  tbody last   append newRow      this will add new row inside tbody     table myTable tr   last   after newRow       this will add new row outside tbody                                                 i e  between thead and tbody                                                 before   will also work similar

User · Answer

my table tbody tr nth-child     i        after html

User · Answer

Try this   var i   3       my table  gt  tbody  gt  tr eq     i        after html     or this   var i   3       my table  gt  tbody  gt  tr   eq  i   after html     or this   var i   4       my table  gt  tbody  gt  tr nth-child     i        after html     All of these will place the row in the same position  nth-child uses a 1 based index

User · Answer

my table  gt  tbody last   index   append html

User · Answer

Adding on to Nick Craver s answer and also considering the point raised by rossisdead  if scenario exists like one has to append to an empty table  or before a certain row  I have done like this   var arr         array if  your condition      arr push row id     push row s id for eg  to the array   idx   arr sort   indexOf row id      if  idx     0           if  arr length     1       if array size is only 1  currently pushed item              tableID   append row             else           if array size more than 1  but index still 0  meaning inserted row must be the first row            tableID tr   eq idx   1  before row                            else         if index is greater than 0  meaning inserted row to be after specified index row           tableID tr   eq idx  after row               Hope it helps someone

User · Answer

I know it s coming late but for those people who want to implement it purely using the JavaScript   here s how you can do it    Get the reference to the current tr which is clicked  Make a new tr DOM element  Add it to the referred tr parent node    HTML    lt table gt        lt tr gt                       lt td gt                           lt button id  0  onclick  addRow    gt Expand lt  button gt                       lt  td gt                       lt td gt abc lt  td gt                       lt td gt abc lt  td gt                       lt td gt abc lt  td gt                       lt td gt abc lt  td gt        lt  tr gt         lt tr gt                       lt td gt                           lt button id  1  onclick  addRow    gt Expand lt  button gt                       lt  td gt                       lt td gt abc lt  td gt                       lt td gt abc lt  td gt                       lt td gt abc lt  td gt                       lt td gt abc lt  td gt        lt  tr gt        lt tr gt                       lt td gt                           lt button id  2  onclick  addRow    gt Expand lt  button gt                       lt  td gt                       lt td gt abc lt  td gt                       lt td gt abc lt  td gt                       lt td gt abc lt  td gt                       lt td gt abc lt  td gt        lt  tr gt      In JavaScript   function addRow             var evt   event srcElement id          var btn clicked   document getElementById evt           var tr referred   btn clicked parentNode parentNode          var td   document createElement  td            td innerHTML    abc           var tr   document createElement  tr            tr appendChild td           tr referred parentNode insertBefore tr  tr referred nextSibling           return tr          This will add the new table row exactly below the row on which the button is clicked

[javascript] Jquery insert new row into table at a certain index

Examples related to javascript

Examples related to jquery

Examples related to html-table