表格中数据的编辑和删除
$(function() {
Division.init();
}); // JS的初始化
Division = { // 使用json进行初始化
detaiDataId : null, // 部门id信息
datatbl : null, // 数据表格
init: function() { // 初始化的参数
var $this = Division; // 方便引用Division
$this.listView = $('#data_division_list'); //对常用的元素进行定义，提高编码效率
$this.listView.find('tbody').on('click', 'tr[class!="c_tbl_nodata"] td', Division.editDel); // 绑定表格内除“暂无数据”这一行的元素点击事件，执行Division.editDel方法
},
// 编辑或删除部门信息
editDel : function() {
// this 是绑定该方法的被点击元素
// $(this) 而不是 this 是因为后面的attr方法前只能是选择器的格式
// attr() 方法设置或返回被选元素的属性值
// $('#my_select').attr('attribute')返回被选元素的属性值
//$('#my_select').attr('attribute', 'value') 设置被选元素的属性和值
var clas = $(this).attr('class'); // 获取被点击元素的class值
// closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上
var tr = $(this).closest('tr'); // 获取该行的数据对象
var data = tr.data('data'); // 获取其data数据
var id = data.id; // 获取部门id
if (!clas) {// 判断被点击元素是否有class属性值
Division.loadDetail(id); // 进入编辑模式
if (clas == "ico_del') // 判断被点击元素是否是删除标志
Division.del(tr); // 删除该行元素
},
// 加载编辑界面
loadDetail : function(id) {
var $this = Division;
var options = {
url : ......,
data : {id : id},
success : function(result) {
$this.detaiDataId = result.data.id; // 获取进行编辑的部门的id
},
};
Utils.ajax(options);
},
// 删除部门信息
del : function(tr) {
var id = tr.data('data').id; // 获取删除部门的id
var options = {
url : ......,
data : {id : id},
success : function(result) {
tr.remove(); // 移除该部门信息
// 若表格中表内数据行数为0，则加入一行html代码，提示暂无数据，美化界面
if (Division.listView.find('tbody tr').length === 0)
Division.listView,find('tboay').html('
// setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式
// 因为使用的是双表头，设置延迟来对齐表格
setTimeout(function() {Division.datatbl.loadTheadWidth();,300);
}
}；
Utils.aiax(options);
},
}
这是比较常用的对表格进行编辑或删除操作的JS代码，相关的PHP代码是根据部门id搜索部门的详情信息以及根据部门id删除对应部门信息