Add tr below specific row

javascript add rows to table dynamically
jquery add row to table after specific row
jquery append row to table tbody
cannot read property 'insertrow' of null
jquery add row to table before specific row
jquery add td to tr dynamically
jquery add row to table dynamically example
jquery insert table row after clicked row

I have table with different records on each row. After click on "show" link in td. I want to display another tr below current tr.

I am calling "opentr" function after click on "show" link. How to add new tr after current tr using id of link "uniqueid"

<table id="table" border="0">
<th>Col 1</th> <th>Col2</th> <th>col3</th>
<tbody>
<tr>
<td>
    <a onclick ="opentr();" id="uniqueid">show</a>
</td>
<td>
    <input type="text"></input>
</td>
<td>
    <input type="text"></input>
</td>
</tr>
</tbody>
</table>

Here is a vanilla js sample. Note the added "this" in the html's "onclick" handler.

If you wish I can show how to add a global handler that will take care of all row's onclick links.

function opentr(el) {
    var currTR = el.parentNode.parentNode;
    var newTR = document.createElement("tr");
    newTR.innerHTML = "<td>Col 1</td><td>Col 2</td><td>Col 3</td>";
    currTR.parentNode.insertBefore(newTR, currTR.nextSibling);
}
.after { font-weight: bold }
<table id="table" border="0">
<th>Col 1</th> <th>Col2</th> <th>col3</th>
<tbody>
<tr>
<td>
    <a onclick ="opentr(this);" id="uniqueid">show</a>
</td>
<td>
    <input type="text"></input>
</td>
<td>
    <input type="text"></input>
</td>
</tr>
</tbody>
</table>

How to insert new row at a certain index in a table in jQuery , The task is to insert a new row in that table at a certain index using JQuery. Approach: Store the table column value <td> element into the variable. Then use eq()� It's common to help improve readability of table data by alternating row colors. Let's add a bit of color to every even row: tbody > tr:nth-of-type(even) { background-color: rgb(237, 238, 242); } Give the left-side header some style. Since we want the first column to stand out as well, we'll add some custom styling here, too.

I find the solution in this sample http://live.datatables.net/harurej/1/edit

and this is my code

        $('#tablaConsolidado tbody').on('click', 'td.details-control', function () {
           var tr = $(this).closest('tr');
            var row = table.row(tr);

           if (table.row(tr).child.isShown() ) {
               // This row is already open - close it
               table.row(tr).child.hide();
               tr.removeClass('shown');
           }
           else {
                // Open this row
                 ajax().done(function(result) {
                  // Code depending on result
                     tr.addClass('shown');
                     table.row(tr).child(
                        $(result.d)
                    ).show();

               }).fail(function() { 
                   // An error occurred
               }); 

           }
       });

How to insert new row into table at a certain index using jQuery?, To insert a new row into table at a certain index, use the jQuery val() and var newRow = $('<tr><td>New row is added at index '+$('#myTable� If you want to insert rows, click “insert above” or “insert below”. If you want to insert column, click “insert left” or “insert right”. How to insert multiple rows or columns at a time. From above two methods, you can insert only one row or column. You can also insert more than one row or column, Select number of cells equal to the numbers of rows or columns which you want to insert.

This works for me

function opentr() 
{
  var oldTr = $('.uniqueid').parents("tr:first");
  var newTr = $("<tr><td></td></tr>");
  oldTr.after(newTr);
}

How to Add / Remove Table Rows Dynamically Using jQuery, How to add or remove rows inside a table dynamically using jQuery var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name +� Select the number of rows you want to insert. To insert multiple rows, highlight the rows below where you want to insert rows. Highlight the same number of rows as you want to insert. For example, if you want to insert four new rows, select four rows.

@Raj

I believe you are looking for something like this. http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow

I have pasted a slight modification of the code from that link and used your table structure.

<table id="myTable" border="0">
<th>Col 1</th> <th>Col2</th> <th>col3</th>
<tbody>
<tr>
<td>
    <a onclick ="opentr(this);" href='#' id="uniqueid">show</a>
</td>
<td>
    <input type="text"></input>
</td>
<td>
    <input type="text"></input>
</td>
</tr>
</tbody>
</table>

<script>
function opentr(anchor) {
    var currentTr = anchor.parentElement.parentElement;
    var table = currentTr.parentElement;
    var row = table.insertRow(currentTr.rowIndex);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
    cell3.innerHTML = "NEW CELL3";
}
</script>

HTMLTableElement.insertRow(), insertRow() method inserts a new row (tr) in a given table, and returns a reference to the new row. To insert the row into a specific <tbody> : But I have and seen pdf files that have this function, where by adding another row it would "re-flow" content below downwards to make more space. Having "re-flow" is important because I can't account for the number of rows that may need to be added and I will most likely need two of these types of tables stacked on top of one another, for two

<tr>: The Table Row element, The HTML tr element defines a row of cells in a table. We have some examples below, but for more examples and an in-depth tutorial, see the HTML char: Align each cell in the row on a specific character (such that each row in the column that is Instead, add the CSS vertical-align property to the row. Add up the values for each table cell in that table row to get the final value. Each row should have exactly that value, or else you’ll get an awkward table layout that doesn’t make a rectangle (the longest row will stick out).

JavaScript DOM: JavaScript function to add rows to a table , <meta charset=utf-8 /> <title>Insert row in a table - w3resource</title> </head>< body> <table <tr><td>Row1 cell1</td>. 7 Next: Write a JavaScript function that accept row, column, (to identify a particular cell) and a string to� SQL provides the INSERT statement that allows you to insert one or more rows into a table. The INSERT statement allows you to: Insert a single row into a table; Insert multiple rows into a table; Copy rows from a table to another table. We will examine each function of the INSERT statement in the following sections. Insert one row into a table

Tables in HTML documents, Table rows: The TR element; Table cells: The TH and TD elements If any of the columns are specified in relative or percentage terms (see the section on Examples below illustrate the use of the summary attribute. In the travel expense table, for example, we could add the additional categories "subtotals" and "totals". I would like to insert a new row below the current active cell and copy down the contents of column A of the row above the newly inserted. (I will be assigning this to a ribbon option) Exp: If cell E7 is active. When the macro is run, it will insert a new row below that row and copy the contents of A7 to A8. These cell selections will be random.

Comments
  • unclear what you're asking???
  • please share your js code which you have tried...
  • There are lots of frameworks that can do this for you. The first that comes to mind is jQuery. If you want to do it in pure javascript then maybe you can look at the jQuery source to work out a way to do this in natively. Good luck!
  • Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem.
  • somewhat same but not exact. i want to add row after click on specific row . means that try button will be in any row