1

テーブルを作成しようとしていますが、ユーザーがテーブルの行の 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

まず、すべてのセルで OnClick イベントを処理する必要があります。次に、これを関数に抽象化した方がよいかもしれません。

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

次に、「MyTable」IDを指定すると仮定して、簡単に参照できるようにIDをテーブルに追加すると、次のことができます。

onClick = "addRow('#MyTable')";
于 2013-04-22T19:44:31.423 に答える
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 に答える
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 に答える