1

我正在尝试创建一个表格，当用户单击其中一个表格行时，我希望它在单击的行之后添加一行。添加完成后，我想用一些 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>

如果我能把它放在一个函数中就更好了。我还想将该行滑入滑出。谢谢大家，我感谢所有的评论！

达米安

4

5 回答 5

1

基于上面 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
});
于 2013-04-22T20:01:13.857 回答
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')";
于 2013-04-22T19:44:31.423 回答
0 
$('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/

于 2013-04-22T20:12:57.220 回答
0

你可以试试这个

$(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")')来使选择更加具体。

演示。

于 2013-04-22T20:34:04.293 回答
0

您可能可以通过以下方式实现它：

$("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
});
于 2013-04-22T19:43:57.607 回答