How to add a new row below to clicked row using jquery

Question

On click of second column click I am calling below method

function getListOfList(primaryId, isFlat, col) {
        alert(primaryId)
        $.ajax({
            url : ("/" + serverURL + "/dataGrid/getChilds"),
            type : "POST",
            data : {
                primaryId : primaryId,
                isFlat : isFlat,
                column : col
            },
            success : function(result) {
                                }
        });
    }

this will return

returnMap as JSON ==========================[statusFlag:SUCCESS, data:[[<a onclick="viewEmpDetails('56374e74f45f064d33b57583','false','UniqueId')" title='View' style='cursor:pointer'><i class='ace-icon fa fa-search-plus grey' style='width:30px;'> </i></a>, <a onclick="getChilds('8','false','UniqueId')" title='View' style='cursor:pointer'><i class='ace-icon fa fa-search-plus grey' style='width:30px;'> </i></a>   Bhagyawan, 02/02/49, 02/08/81, 15/02/1836, 15-Jan-2012, 10-Feb-25]]]

the data part of the result is actually a row data. which has data of two rows and might be three depending upon query which I need to add below to clicked row.

I am creating table dynamically

<div class="row">
        <div class="col-xs-12">

            <table id="data-grid-table-tree" class="datasetTable">
              <tr>
                    <th>View</th>
                    <th align="left">${session.data}</th>
                    <g:if test="${session.fieldsToFetch }">
                    <g:each in="${session.fieldsToFetch}"  var="column">
                        <th >${column }</th>

                    </g:each>
                    </g:if>
                                      </tr>
              <tr>
                   <g:each in="${session.treeGridJsonObject}"  var="lists">
                    <tr align="left">
                        <g:each in="${lists}"  var="list">
                               <td align="left">${raw(list)}</td>

                        </g:each>
                    </tr>
                   </g:each>              

            </table>

Anyone help!

score 0 · Answer 1 · answered Nov 02 '15 at 13:12

0

<table border="2">
    <tr><td>test1</td></tr>
     <tr><td>test1</td></tr>
     <tr><td>test1</td></tr>
</table>


$(document).ready(function(){
    $('table tr:nth-child(1)').after('<tr><td>test2</td></tr>');
});

$('table tr:nth-child(1)') - Take this as your selected row.

Convert your records of result as a table row html then use above code to append your row of your table.

jsfiddle

answered Nov 02 '15 at 13:12

Visva

194
1
3
11

I am dealing with no. of columns and list within list – Nov 02 '15 at 13:17
Even I don't know user will click to 1 or 100 row right – Nov 02 '15 at 13:21
Then, how do you call **getListOfList()** method. You can get selected or clicked row object using jquery – Visva Nov 03 '15 at 04:23
I just wanna no how to create rows with results and append below to clicked row. I am getting clicked row no – Nov 03 '15 at 04:44
**$('table tr:nth-child(1)').after('test2');** In this code use your row number instead of using number 1. This code will append the row after the selected row / for given row number. Form **** tag by iterating your result data and put it into the **after()** method. – Visva Nov 03 '15 at 05:10
[[, +&nbsp&nbsp&nbsp&nbsp2, 30/02/49, 02/02/98, 02/08/2015, 12-Jan-2015, 10-Feb-15]] can you please tell how to iterate and make tr tag. – Nov 03 '15 at 05:35
[http://stackoverflow.com/questions/4233354/how-to-iterate-json-data-in-jquery] this link may help you – Visva Nov 03 '15 at 05:59
**Update:** $('table tr:nth-child(2)').after(tr); is working but below throwing error > Uncaught Error: Syntax error, unrecognized expression: :nth-child() For `$('table tr:nth-child(rowNumber)').after(tr);` rowNumber is the clicked row number. – Nov 03 '15 at 06:49
1

**$('table tr:nth-child(rowNumber)').after(tr);** I think rowNumber is variable. So you have to use like this **$('table tr:nth-child('+rowNumber+')').after(tr);**. Suppose if it is not working try following code. **$('table tr:nth-child('+Number(rowNumber)+')').after(tr);** – Visva Nov 03 '15 at 07:29

How to add a new row below to clicked row using jquery

1 Answers1