Question

I am using a table, in which there are buttons, on button click i want the new TR element to be inserted between the two TR or at the end of the TR…
my code goes here

<table>
 <tbody>
   <tr>
     <td>
        <input type="submit" value="Add" onclick="addFunction()" />
     </td>
   </tr>
   <tr>
     <td>
        <input type="submit" value="Add" onclick="addFunction()" />
     </td>
   </tr>
   <tr>
     <td>
        <input type="submit" value="Add" onclick="addFunction()" />
     </td>
   </tr>
  </tbody>
 </table>

i want to insert new TR element next to the element which has triggered the event…
NOTE: i am not using any javascript library, just plain javascript

Answer 1

<table>
 <tbody>
   <tr>
     <td>
        <input type="submit" value="Add" onclick="addFunction(this)" />
     </td>
   </tr>
   <tr>
     <td>
        <input type="submit" value="Add" onclick="addFunction(this)" />
     </td>
   </tr>
   <tr>
     <td>
        <input type="submit" value="Add" onclick="addFunction(this)" />
     </td>
   </tr>
  </tbody>
 </table>

function addFunction(input)
{
  var newTr = document.createElement("tr");
  var curRow = input.parentNode.parentNode;
  curRow.parentNode.insertBefore(newTr, curRow.nextSibling);
}