表格中数据的编辑和删除

$(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('<tr class="c_tbl_nodata"><td colspan="100">暂无数据</td></tr>');

// setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

// 因为使用的是双表头，设置延迟来对齐表格

setTimeout(function() {Division.datatbl.loadTheadWidth();,300);

}

}；

Utils.aiax(options);

},

}

这是比较常用的对表格进行编辑或删除操作的JS代码，相关的PHP代码是根据部门id搜索部门的详情信息以及根据部门id删除对应部门信息