动态表格的增删改查

（1）对表格数据的获取

从服务器端获取的数据放在表格的对应位置，假设表格的最后一列设为操作栏，目标实现每点击操作栏中的按钮，都能够对该行进行相应的操作。显然，第一步完成的应该是对该行数据的获取。

对于表格数据的获取，推荐使用$this。即数据绑定在兄弟节点或者父节点上，直接在同级或父级dom节点（下面例子中的edit按钮即为dom节点）里取数据，这样简洁方便。下面具体实现展示：

对操作栏按钮绑定按钮点击事件

tag +=  '<tr><td>'+'</td><td>'+book.id+'</td><td>'+book.name+'</td><td>'+'<span class="edit" data-pid='+book.id+'><button>编辑</button></span>'+'</td></tr>';

点击触发按钮

$(document).on('click','.edit',function(){
// var d=$(this).data('pid');
}）

$this获取dom（edit按钮）的父节点以及兄弟节点（td）

var t= $(this).parent().siblings();    //该行的td

遍历获取td中文本数据

-

var data = [];
$(t).each(function(index, item){
data[index]= $(item).text( );
});
//以json字符串的格式输出
demo = "{"+"\"id\":\""+data[1]+"\","+"\"name\":\""+data[2]+"\"}";
alert(demo) ;

对于文本输入框，想要取其中的值可以采用jQuery中的.val（）的功能，而想要在下拉框或者复选框中取值，可用jQuery的api，val（）用法，具体可参考jQuery的API.val()用法

（2）删除行

删除对应表格的行很简单，同样使用$this，只需一行代码即可

$(this).parent().parent().remove();

（3）编辑表格

思路：写一个隐藏的弹出层，点击编辑的时候，把这条记录的内容，放到弹出层里，显示弹出层。编辑完提交（在弹出层中实现），把记录id,和其他内容ajax传给后台去更新。

有两种实现的可能：

edit发起起一个ajax请求，去取数据；

自己去当前页面根据id去找对应的数据，然后填充到弹出层，再开始编辑。

弹出层可以用jqueryUI中的dialog实现

在进行前端写作时，最好尽量减少对服务器的请求，所以最好选择第二种方法

具体实现：

jQueryUI中的dialog实现弹出层设置

需要引入jquery-ui.min.css和jquery-ui.min.js文件库

a.在html定义模块用来设置弹出层的形式，如下：

<div id="dialog-form" title="编辑">
<form  id="myform" action="">
<fieldset>
<label for="id">序    号</label>
<input type="text" name="id" id="id" value=" " class="text ui-widget-content ui-corner-all"><br>
<label for="name">名    称</label>
<input type="text" name="name" id="name" value=" " class="text ui-widget-content ui-corner-all">
</fieldset>
</form>
</div>

b.在js中调用dialog的弹出层

//打开弹出层
$( "#dialog-form" ).dialog( "open" );

c.弹出层的功能以及属性的设置，具体可参考博客jQueryUI中的dialog

//对弹出层的设置
$(function() {
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}

$( "#dialog-form" ).dialog({
autoOpen: false,
height: 500,
width: 550,
modal: true,
buttons: {
//对按钮的设置
"确认修改":
$( this ).dialog( "close" );
},
"取消修改": function() {
$( this ).dialog( "close" );
}
},
close: function() {
$(document).val( "" ).removeClass( "ui-state-error" );
}
});
});

在弹出层按钮中对弹出层表单数据进行封装，发送请求到服务器端，并将修改好后的数据回显在表格中。