1.需求描述
通过js动态的新建、编辑、删除角色时需要对table列表的角色进行标记,当用户在input内修改角色名称或者角色备注后,点击提交按钮,修改成功后会更新列表内的信息。
2.代码
//表格内修改按钮触发事件
$(function () {
$("#tableList").delegate(".table_edit", "click", function () {
var input = $('.box1 input');
//标记正在编辑的表格行
$(this).parent().parent().addClass('edit');
var td = $(this).parent().parent().find('.td1');
input[0].value = td.eq(1).text();
input[1].value = td.eq(2).text();
$('#add_button').css("display", "none");
$('#edit_button').removeAttr('style');
})
});
//编辑按钮事件-修改角色备注-ajax
function edit_event() {
var input = $('.box1 input');
var ROLE_NAME = $('.box1 input')[0].value;
var ROLE_REMARKS = $('.box1 input')[1].value;
var type = "edit_role";
var row = {};
row.ID = $('.edit').find('.td1').eq(0).text();
row.ROLE_NAME = ROLE_NAME;
row.ROLE_REMARKS = ROLE_REMARKS;
$.ajax({
type: 'post',
url: '../new/ajax/ajaxRight.aspx?type=' + type,
data: JSON.stringify(row),
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
processData: false,
cache: false,
success: function (reg) {
//修改角色的描述
$('.edit').find('.td1').eq(1).text(ROLE_NAME);
$('.edit').find('.td1').eq(2).text(ROLE_REMARKS);
$('.edit').removeClass('edit');
$('#edit_button').css("display", "none");
$('#add_button').removeAttr('style');
input[0].value = "";
input[1].value = "";
alert(reg);
},
error: function () {
$('#edit_button').css("display", "none");
$('#add_button').removeAttr('style');
$('#add_button').removeAttr('style');
input[0].value = "";
input[1].value = "";
alert("角色修改失败!");
}
});
}
3.遇到的问题和解决方法
修改成功后我需要removeClass(“edit”),但是一直会出问题,导致角色只能编辑一列。
原因是我写成了removeClass(“.edit”),区别在于不需要选择器符号。
可能说这个问题也可以换一个思路解决,比如removeClass(),将会移除所有的class,再比如attr(“class”,”“),只是这样做并不妥帖。