table修改狀態改變td內容

table列表展示信息,ajax修改某條記錄的狀態後需要更改其狀態。刷新頁面能達到這樣的效果,但是客戶端需要多向服務端發送一次請求。本文將介紹如何在修改狀態操作後修改頁面上的狀態。例如:



點擊第一行的「禁用」時,狀態變爲已禁用,超鏈接變爲「啓用」



先貼出table的代碼:

注意劃線部分的class="listState"

點擊啓用或禁用時調用changeState()方法:

<script>
//修改用戶狀態:啓用/禁用
function changeState(statedom) {
var state = $(statedom).attr("data-state");
var stateText = "", stated = "", stateNub = "";
if (state == "禁用") {
stateText = "禁用";
stated = "已啓用";
stateNub = "啓用";
} else {
stateText = "啓用";
stated = "已禁用"
stateNub = "禁用";
}
$(statedom).attr("data-state", stateNub);
$(statedom).html(stateText).closest("tr").find(".listState").html(stated);
}
    </script>