Question

我正在尝试拥有一个表，当用户点击其中一个表行时，我希望它在单击的行之后添加一行。完成添加后，我想用一些ajax信息填充行。在这个传递的ajax信息将是一个“关闭/销毁”行的按钮。我怎么做到这一点？到目前为止，我已经尝试过这种方法，但它不起作用。

  <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>

如果我把它放在一个函数中会更好。我也想将这一行滑入和滑出。谢谢大家，我感谢所有评论！

达明

Answer 1

首先，你需要在每个单元格中处理OnClick事件，其次，如果你把它抽象成一个函数可能会更好，更像是这样：

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

然后，在表格中添加一个ID，这样您就可以轻松引用它，假设您给它一个“MyTable”ID，那么您可以这样做：

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

Answer 2

以tymeJV上面的答案为基础，但如果用户如此选择，则包括销毁该行的按钮：

$("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
});

Answer 3

你可以用这样的东西来实现它：

$("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
});

Answer 4

$('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/

Answer 5

你可以试试这个

$(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();
    });
});

只需更改td变量的内容即可使用ajax调用中的数据，例如，如果您在按钮中使用了ID，则可以使用

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

同时尝试使用表格中的id来$('table#myId tr:not(".closeDestroy")')使选项更具体。

DEMO.

添加动态tr并使用jquery引用它

5 个答案: