最近要处理一些前端的工作,重新学习了一下jQuery,感觉还是那么的锋利啊! ! !
总结了一下对表的增删改查,写一篇留着以后自己重新编码。
1。首先我自己写了一个简单的div布局。
2。实现几个用& lt; a>标签做的按钮的功能分别是新增修改删除查询和返回。
代码如下
html + css(原谅我写在一起吧. .毕竟渲染不是我的强项)
& lt; html>
& lt; head> & lt; title>测试数据& lt;/title> & lt;/head>
& lt;风格类型=" text/css "比;
表,td {
字体:100%的微软雅黑”;
}
表{宽度:80%;border-collapse:崩溃;保证金:0 0 0 100 px}
th, td {text-align:中心;边界:1 px固体# fff;}
th{背景:# 328 aa4}
td{背景:# e5f1f4;}
& lt;/style>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/jquery-1.8.0.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/jq.js "祝辞& lt;/script>
& lt; body>
& lt; a href=" https://www.yisu.com/zixun/"风格=氨Ｖそ?100 px”id=癮dd_btn”在新增& lt;/a>
& lt;输入id=" Ktext " type=" text "比;& lt; a href=" https://www.yisu.com/zixun/" id=皊earch_btn”比;查询& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/"风格=氨Ｖそ?100 px”id=癰ack_btn祝辞返回& lt;/a>
& lt; br/比;
& lt;表id=敖岷恕北?
& lt; tr id=皌rr”比;
& lt; th祝辞ID
& lt; th祝辞Name
& lt; th祝辞salary
& lt; th祝辞功能& lt;/th>
& lt;/tr>
& lt; tbody id=癶ide_tbody”比;
& lt; tr id=皌rr”比;
& lt; td id=" no_id "祝辞& lt;输入值=" type='文本'祝辞& lt;/td>
& lt; td祝辞& lt;输入值=" type='文本'祝辞& lt;/td>
& lt; td祝辞& lt;输入值=" type='文本'祝辞& lt;/td>
& lt; td id=癮”祝辞& lt; a href=" https://www.yisu.com/zixun/" id=" save_btn祝辞保存& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/" id=" edit_btn祝辞修改& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/" id=" del_btn祝辞删除& lt;/a> & lt;/td>
& lt;/tr>
& lt;/tbody>
& lt; tbody id=皊how_tbody”比;
& lt; tr id=皌rr”比;
& lt; td id=" no_id "祝辞1 & lt;/td>
& lt; td祝辞小王& lt;/td>
& lt; td祝辞3000 & lt;/td>
& lt; td id=癮”祝辞& lt; a href=" https://www.yisu.com/zixun/" id=" save_btn祝辞保存& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/" id=" edit_btn祝辞修改& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/" id=" del_btn祝辞删除& lt;/a> & lt;/td>
& lt;/tr>
& lt; tr id=皌rr”比;
& lt; td id=" no_id "祝辞2 & lt;/td>
& lt; td祝辞小李& lt;/td>
& lt; td祝辞4000 & lt;/td>
& lt; td id=癮”祝辞& lt; a href=" https://www.yisu.com/zixun/" id=" save_btn祝辞保存& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/" id=" edit_btn祝辞修改& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/" id=" del_btn祝辞删除& lt;/a> & lt;/td>
& lt;/tr>
& lt; tr id=皌rr”比;
& lt; td id=" no_id "在3 & lt;/td>
& lt; td祝辞小张& lt;/td>
& lt; td祝辞5000 & lt;/td>
& lt; td id=癮”祝辞& lt; a href=" https://www.yisu.com/zixun/" id=" save_btn祝辞保存& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/" id=" edit_btn祝辞修改& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/" id=" del_btn祝辞删除& lt;/a> & lt;/td>
& lt;/tr>
& lt; tr id=皌rr”比;
& lt; td id=" no_id "祝辞4 & lt;/td>
& lt; td祝辞小赵& lt;/td>
& lt; td祝辞6000 & lt;/td>
& lt; td id=癮”祝辞& lt; a href=" https://www.yisu.com/zixun/" id=" save_btn祝辞保存& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/" id=" edit_btn祝辞修改& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/" id=" del_btn祝辞删除& lt;/a> & lt;/td>
& lt;/tr>
& lt;/tbody>
& lt;/table>
& lt;/body>
& lt;/html>
之前
jQuery的代码如下
$(文档)时函数(){
结核病var=$(“#结核病”);//添加
$ (" # add_btn ") .click(函数(){
var hideTr=$ (" # hide_tbody ",结核病)定格()中国当代();
var newTr=hideTr.clone(),告诉();
$ (" # show_tbody”,结核病).append (newTr);
});//保存
$ (" # save_btn”,结核病).die(点击).live(“点击”,函数(){
var tr=$(这).parent () .parent ();
$("输入type='文本']”,tr) . each(函数(我,el) {
el=$ (el);
el.parent ()。text (el.val ());
el.remove ();
});
$ (" # save_btn”, tr) hide ();
$ (" # edit_btn”, tr),告诉();
});//修改
$ (" # edit_btn”,结核病).die(点击).live(“点击”,函数(){
var tr=$(这).parent () .parent ();
$(“道明:不是(“#”)”,tr) . each(函数(我,el) {
el=$ (el);
var html=? lt;输入值=" + el.text () +”“type='文本'祝辞”;
el.html (html);
});
$ (" # edit_btn”, tr) hide ();
$ (" # save_btn”, tr),告诉();
});//删除
$ (" # del_btn”,结核病).die(点击).live(“点击”,函数(){
(美元).parent () .parent () .remove ();
});//查询
$ (" # search_btn ") .click(函数(){
var关键=$ (" # Ktext”) .val ();
var sbody=$ (" # show_tbody ");
var trr=$ (" # trr”, sbody);
var关键字=$ (" # no_id " sbody)。text ();
(var=0;我& lt;keyword.length;我+ +)
{
如果关键字[我][0]==键){
trr.eq (i),告诉();
其他}{
trr.eq (i) hide ();
}
}
});//返回
$ (" # back_btn ") .click(函数(){
var sbody=$ (" # show_tbody ");
$ (" # trr " sbody),告诉();
});
});
