Question

我正在使用Bootstrap以及它在一个小项目中附带的jQuery插件。现在我有一个模式对话框弹出删除确认，当用户点击确认按钮时，它会删除记录就好了。

但是，我还想做的是让表格行有点击它的按钮也被删除。因此，如果用户点击第3行的“删除”按钮，当用户确认它将从表中删除第3行时。

该表是动态生成的，但这是一个小例子：

<table class="table table-hover table-condensed" style="table-layout: fixed;" id="api_key_list">
<tbody>
<tr id="key_0"><td>test</td>
<td>eqeI0Tt-V7rzijDfLqrna2</td>
<td>eqeI0Tt-V7rzijDfLqrn</td>
<td>
<input type="hidden" id="api_server_31" value="test" />
<input type="hidden" id="api_server_31_sid" value="null" />
<input type="hidden" id="api_server_31_tid" value="0" />
<button type="submit" class="api_key_edit btn btn-small btn-primary" value="31">Edit</button>
<button type="submit" class="api_key_delete btn btn-small btn-danger" value="31">Delete</button>
</td>
</tr>
</tbody>
</table>

我的对话框也是动态生成的，但这里是这个例子的显示内容：

<div id="api_key_delete" class="modal hide fade in" role="dialog" style="display: block;" aria-hidden="false"><div class="modal-header"><button class="close" aria="hidden="true"" data-dismiss="modal" type="button"> … </button><h3 id="label">
      Delete API Key for 
    <span id="api_key_delete_server">
      test
    </span>
      ?
    </h3></div><div class="modal-body"> … </div><div class="modal-footer"> … </div></div>

我的JS代码是这样的：

$("#conf_delete").click(function(e){
    e.preventDefault();

    if($(this).hasClass("disabled")){
        return false;
    }

    var conf = $("#conf_delete").val();
    conf = conf.split("|");

    var server = conf[0];
    var kid = conf[1];
    var tid = conf[2].substring(4);

    $.post("/api",
        {server : server, id : kid, api_act : "deletek"},
        function(data){
            var n = data.split("|");
            var type = n[0];
            var msg = n[1];
            var dak = $("#delete_api_key_msgbox");

            dak.show();

            if(type == "e"){
                dak.addClass("alert-error");
            } else{
                dak.addClass("alert-success");

                $("#conf_delete").addClass("disabled");

                $("#api_key_delete").modal("hide");
                // issue is here, though tr is captured, the fadeout/remove doesn't work
                var tr = $("#api_server_"+server).closest("tr");
                console.log("tr:"+tr);
                tr.fadeOut(400, function(){
                    tr.remove();
                });
            }

            $("#dak_msg").html(msg);
        }
    );
});

对话框弹出，用户点击确认，对话框显示消息，但无论我在何处放置fadeOut / remove代码，它似乎都没有对后台做任何事情。

Answer 1

我使用了错误的变量。这非常令人尴尬。

如何使用bootstrap从模式对话框中删除tr行

1 个答案: