How to add a <tr> right underneath the selected <tr>?

I have a table and would like to add an ajax loaded underneath the row I click with the mouse. However I don't know how to get the index and it gets appended to the end instead.

e.g. click on "hol" and the row shall be inserted underneath "hol" row.

Please see --> fiddle <--

<table id="tab_open_deals" class="table table-condensed table-striped cb_table-hover">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody id="search_result">
    <tr>
      <td>Lunch Deal- Light</td>
      <td>39.90</td>
      <td>29 Dec 2012</td>
    </tr>
  <tr>
    <td>hol</td>
    <td>1499.00</td>
    <td>8 Jan 2013</td>
  </tr>
 </tbody>
</table>


$(document).ready(function() {
    $('#tab_open_deals tbody tr').off('click').on('click', function() {
        var row = $('<tr/>');
        $(row).load('/echo/html/', {
            html: '<td class="override" colspan="4"><table class="table-striped sub_table-hover"><thead><tr><th>Sub1</th><th>Sub2</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></td>'
        });

        $(this).parent().append(row);
    });
});

Answers


In the context of your function, the id, or index, is irrelevant; simply use a reference to the currently-clicked tr:

row.insertAfter($(this));

JS Fiddle demo.

Incidentally, row is already a jQuery object (since you created it with: row = $('<tr />')), so you don't need to wrap it in a jQuery object in the next line $(row).load(/*...*/), just use: row.load(/*...*/).

Reference:


You don't need the index, just get a reference to the clicked tr (closest is good for that) and use after:

$('#tab_open_deals tbody tr').off('click').on('click', function() {
    var row = $('<tr/>');
    $(row).load('/echo/html/', {
        html: '<td class="override" colspan="4"><table class="table-striped sub_table-hover"><thead><tr><th>Sub1</th><th>Sub2</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></td>'
    });

    $(this).closest("tr").after(row);
});

But the way you're hooking the event, it won't be hooked on any new rows you add. You might consider delegate, which is for doing event delegation (you can also use the hyper-overloaded on function for event delegation in newer versions of jQuery).

Here's a simplified example:

$("#theTable tbody").delegate("tr", "click", function() {
  var row = $("<tr><td></td></tr>");

  row.find("td").text("New row at " + new Date());

  $(this).after(row);
});

Live Example | Source

Or if you prefer on to delegate, change

$("#theTable tbody").delegate("tr", "click", function() {

to

$("#theTable tbody").on("click", "tr", function() {

(Note that the order of arguments changed.) Live Example | Source


Side notes:

  • You might want to wait until the content is loaded, though, by not putting it in the DOM until the load callback fires.

  • It seems odd that you're sending an HTML fragment to the server (that's what the second argument to load does, if it's not a function). But given the name of the URL you're sending it to, I'm assuming it's correct. :-)


Need Your Help

How to set Cursor type in JDBC?

java oracle jdbc cursors

I'm running tomcat and have some jsp pages that display a subset of a table. I show 20 rows at a time on a single page. When the table has large amounts of data, the jsp page doesn't render. I'm

Perfmon File Analysis Tools

performance logfile-analysis

I have a bunch of perfmon files that have captured information over a period of time. Whats the best tool to crunch this information? Idealy I'd like to be able to see avg stats per hour for the ob...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.