CODEWITHSUNDEEP
jquery
Damien
Damien

Reputation: 4319

Adding a dynamic tr and referencing it with jquery

I'm trying to have a table and when a user clicks on one of the table rows, I want it to add a row right after the row that was clicked on. After it's done adding, I want to populate the row with some ajax info. In this ajax info that's being passed will be a button to 'close/destroy' the row. How do I acheive this? I've tried this so far and it doesn't work.

  <tr onclick="$(this).append('<tr style=\'background-color:#ff0000;\'><td colspan='5'>AJAX CONTENT GOES HERE</td></tr>');">
    <td class="center"><%=location%></td>
    <td><span class="text-warning"><%=formatcurrency(refundAmount,2)%></span> <small class="muted">(potential)</small></td>
    <td><span class="text-error"><%=formatcurrency(refundReceived,2)%></span></td>
    <td><span class="text-info"><%=formatcurrency(lateAmount,2)%></span></td>
    <td><span class="text-success"><%=formatcurrency(refundReceived+refundAmount,2)%></span> <small class="muted">(potential)</small></td>
  </tr>

It'd be even better if I could put this in a function. I'd also like to slide that row in and out. Thanks guys, I appreciate all comments!

damien

Upvotes: 1

Views: 587

Answers (5)

The Alpha
The Alpha

Reputation: 146229

You may try this

$(function(){
    $('table tr:not(".closeDestroy")').on('click', function(){
        var activeTr = $(this);
        if(activeTr.next('tr').hasClass('closeDestroy')) return false;
        $.post('your_url', function(data) {
            var tr = $('<tr/>', {'class':'closeDestroy', 'style':'background-color:#ff0000'});
            var td = $('<td/>', {'html':'<button>Destroy</button>', 'colspan':5});
            activeTr.after(tr.append(td));
        });
    });

    // Click handler for button
    $('table').on('click', 'tr.closeDestroy td button', function(){
        // code for clicked button
        var button = $(this);
        button.closest('tr').prev().remove().andSelf().remove();
    });
});

Just change the content of td variable to use data from your ajax call, for example, if you have an id to use in the button then you can use

var td = $('<td/>', {'html':'<button id='+data.id+'>Destroy Me</button>', 'colspan':5});

Also try to use an id in your table to use $('table#myId tr:not(".closeDestroy")') to make the the selection more specific.

DEMO.

Upvotes: 0

smilebomb
smilebomb

Reputation: 5483

$('tr').on('click',function(){
$var =
'\
<tr>\
    <td>asdf</td>\
    <td><input type="button" value="I need an event handler"></td>\
</tr>\
';
$(this).parent().append($var);
});

http://jsfiddle.net/M3BpW/

Upvotes: 0

burgerB
burgerB

Reputation: 772

Building on tymeJV's answer above, but including the button to destroy the row if the user so chooses: 

$("table tr").click(function() {
    var htmlRowData = "<tr style=\'background-color:#ff0000;\'><td>";
    $.ajax() {
        //do some ajax stuff here
        success: function(data) {
            htmlRowData += data;
        }
    });
    var removeRow = function(this){
        $(this).parents("td").remove();
    }
    htmlRowData += "<input type='button' value='Delete' onclick='removeRow(this)'";
    htmlRowData += "</td></tr>";
    $(this).after(htmlRowData).slideDown(); <-- Append and achieve sliding effect
});

Upvotes: 1

Rafael
Rafael

Reputation: 2817

First, you need to handle the OnClick event in every cell, second, it could be better if you abstract this into a function, more less like this:

function addRow(element)
{
    $(element).append('<tr style=\'background-color:#ff0000;\'><td colspan='5'>AJAX CONTENT GOES HERE</td></tr>');
}

Then, add an Id to your table so you can reference it easily, assuming you give it a "MyTable" id, then you can do this:

onClick = "addRow('#MyTable')";

Upvotes: 1

tymeJV
tymeJV

Reputation: 104785

You can probably achieve it with something like this:

$("table tr").click(function() {
    var htmlRowData = "<tr style=\'background-color:#ff0000;\'><td>";
    $.ajax() {
        //do some ajax stuff here
        success: function(data) {
            htmlRowData += data;
        }
    });
    htmlRowData += "</td></tr>";
    $(this).after(htmlRowData).slideDown(); <-- Append and achieve sliding effect
});

Upvotes: 0

Related Questions