Question

我使用此方法从表中删除一行。我可以从数据库中删除该行并显示“＆＃39; status＆＃39;警报。但我要刷新页面以从页面中删除行。我该怎么办？

<script type="text/javascript">
function DeleteRow(btnDel) {
    $.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status){
      alert("Status: " + status);
    });
    $(btnDel).closest("tr").remove();
}
</script>



***Html***


<tbody>
            <% var ATRowId = 0; foreach (var item in Model.List)
               {%>
        <tr style="text-align:center">
            <td><%=Html.TextAreaFor(m => m.List[RowId].Type, new { value = @Model.List[ATRowId].Type, @style = "width:260px;" })%>
                <%=Html.HiddenFor(x=>x.List[RowId].AssistiveId,Model.ATList[RowId].AssistiveId) %></td>
            <td><%=Html.TextAreaFor(m => m.List[RowId].Schedule, new { value = @Model.List[ATRowId].Schedule, @style = "width:260px;" })%></td>
            <td><%=Html.TextAreaFor(m => m.List[RowId].Storage, new { value = @Model.List[ATRowId].Storage, @style = "width:260px;" })%></td>
            <td style="width:50px"><input type="button" value="delete" class="btnDel" style="float:right;width:20px" onclick="DeleteRow(<%= item.AssistiveId%>)" /></td>
        </tr>
               <% ATRowId++;
               }%>
            </tbody>

Answer 1

首先（如果尚未完成，因为我只能看到部分HTML）：您必须将<tbody>放在<table>元素中。

<table>
    <tbody>
        <tr style="text-align:center">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td style="width:50px">
                <input type="button" value="delete" class="btnDel" style="width:20px" onclick="DeleteRow(1)" />
            </td>
        </tr>
    </tbody>
</table>

然后，修改DeleteRow功能。您无法使用btnDel中的值访问任何元素，因为它不是任何元素的id或class。但你可以这样做

function DeleteRow(btnDel) {
    var btn = event.target;
    $(btn).closest("tr").remove();
}

查看工作fiddle

HTH

Answer 2

我认为您删除后会再次将数据绑定到表/网格。所以你可以这样做：

var metaConnection = new Sequelize(dbConfig.meta.database,
    dbConfig.meta.username,
    dbConfig.meta.password,
    dbConfig.meta.options);
module.exports.dbMeta = metaConnection;
var user1Connection = new Sequelize(dbConfig.shard1.database,
    dbConfig.shard1.username,
    dbConfig.shard1.password,
    dbConfig.shard1.options);
module.exports.dbUser1 = user1Connection;
var user2Connection = new Sequelize(dbConfig.shard2.database,
    dbConfig.shard2.username,
    dbConfig.shard2.password,
    dbConfig.shard2.options);
module.exports.dbUser2 = user2Connection;

module.exports.MetaUser = metaConnection.import(__dirname + "/models/MetaUser");
module.exports.User1 = user1Connection.import(__dirname + "/models/User");
module.exports.User2 = user2Connection.import(__dirname + "/models/User");

这里我正在考虑将<script type="text/javascript"> function DeleteRow(btnDel) { $.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status){ if(status=="active") { $.get('../ProtocolSummary/BindRowATList',function(data){ alert("Data had bind to the grid"); }); } $(btnDel).closest("tr").remove(); }); } </script>函数绑定到"BindRowATList" Controller中的网格。

Answer 3

如果您的警报正确无误，那是因为它符合您的承诺。 jQuery返回一个promise（回调），你试图在AJAX运行之前删除你的tr。

我不确定你的DOM是如何正确的，但我相信它确实如此。

<script type="text/javascript">
function DeleteRow(btnDel) {
    $.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status){
      alert("Status: " + status);

      //Now I can be deleted as I'm inside the promise
      $(btnDel).closest("tr").remove();
    });    
}
</script>

Answer 4

我这样做的方法是为行设置一个id并将其传递给删除函数。

<tr id="rowId">
   <!-- some html -->
   <button type="button" class="deleteRow" onclick="DeleteRow('rowId')">Delete Row</button>
</tr>
<script>
function DeleteRow(rowId) {
    $.get('../ProtocolSummary/DeleteRowATList?id2=' + rowId, function(data, status){
      alert("Status: " + status);
      $("#"+rowId).remove();
    });    
}
</script>

另外，将删除功能保存在$ get中。我不使用表格，并且没有使用此逻辑进行删除。但是这个逻辑适用于更新（添加和删除具有id的元素的类）。希望能帮助到你。

从页面中删除行而不刷新页面

4 个答案: