我们继续讲解jquery插件介绍，今天介绍的是使用使用自定义表格编辑插件，实现效果就是双击表格，表格会变成文本框，可以编辑和修改。通过后台要修改数据的时候可以用到这个插件，直接修改然后进行数据库操作保存到数据库。
我们看代码效果
上代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
jQuery.uiTableEdit = function(jq, options) {
function unbind() {
return jq.find(options.find).die('mousedown.uiTableEdit');
}
options = options || {}
options.find = options.find || 'tbody > tr > td'
if(options.off) {
unbind().find('form').each(function() {
var f = $(this);
f.parents("td:first").text(f.find(':text').attr('value'));
f.remove();
});
return jq;
}
function bind_mouse_down(mouseDn) {
unbind().live('mousedown.uiTableEdit', mouseDn);
}
function td_edit() {
var td = jQuery(this);
function restore(e) {
var val = td.find(':text').attr('value')
if(options.dataVerify) {
var value = options.dataVerify.call(this, val, orig_text, e, td);
if(value === false) {
return false;
}
if(value !== null && value !== undefined)
val = value;
}
td.html("");
td.text(val);
if(options.editDone)
options.editDone(val, orig_text, e, td)
bind_mouse_down(td_edit_wrapper);
}
function checkEscape(e) {
if(e.keyCode === 27) {
td.html("");
td.text(orig_text);
bind_mouse_down(td_edit_wrapper);
}
}
var orig_text = td.text();
var w = td.width();
var h = td.height();
td.css({
width : w + "px",
height : h + "px",
padding : "0",
margin : "0"
});
td.html('<form name="td-editor" action="javascript：void(0);">' + '<input type="text" name="td_edit" value="' + td.text() + '"' + ' style="margin:0px;padding:0px;border:0px;width: ' + w + 'px;height:' + h + 'px;">' + '</input></form>').find('form').submit(restore).mousedown(restore).blur(restore).keypress(checkEscape);
function focus_text() {
td.find('input:text').get(0).focus()
}
// focus bug (seen in FireFox) fixed by small delay
setTimeout(focus_text, 50);
/* TODO: investigate removing bind_mouse_down
I also got rid of bind_mouse_down(restore),
because now that you can refocus on fields that have been blurred,
you can have multiple edits going simultaneously
*/
bind_mouse_down(restore);
}
var td_edit_wrapper = !options.mouseDown ? td_edit : function() {
if(options.mouseDown.apply(this, arguments) == false)
return false;
td_edit.apply(this, arguments);
};
bind_mouse_down(td_edit_wrapper);
return jq;
}
$(function() {
var theTable = $('.tableEdit')
$.uiTableEdit( theTable )
})
</script>
<style type="text/css">
table { font-size:12px; width:100%; table-layout:fixed; empty-cells:show; border-collapse: collapse; margin:0 auto; border:1px solid #cad9ea; color:#666; }
th { background-image: url(//freemuban.com/js/422//th_bg1.gif); background-repeat:repeat-x; height:30px; cursor:pointer; }
td { height:20px; }
td, th { border:1px solid #cad9ea; padding:0; }
td input{ background:#FFC;};
td.sorted { background: #ffd; }
th.sorted-asc { background: url('//freemuban.com/js/422//icons/arrow_up.png') no-repeat 0 50%; }
th.sorted-desc { background: url('//freemuban.com/js/422//icons/arrow_down.png') no-repeat 0 50%; }
tr.even, tr.first { background-color: #fff; }
tr.odd, tr.second { background-color: #f5fafe; }
tr.third { background-color: #ccc; }
</style>
<title></title>
</head>
<body>
<table class="tableEdit">
<thead>
<tr>
<th>ID</th>
<th>产品名称</th>
<th>标准成本</th>
<th>列出价格</th>
<th>单位数量</th>
<th>最小再订购数量</th>
<th>类别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>苹果汁</td>
<td>5.00</td>
<td>30.00</td>
<td>10箱 x 20包</td>
<td>10</td>
<td>饮料</td>
</tr>
<tr>
<td>3</td>
<td>蕃茄酱</td>
<td>4.00</td>
<td>20.00</td>
<td>每箱12瓶</td>
<td>25</td>
<td>调味品</td>
</tr>
<tr>
<td>4</td>
<td>盐</td>
<td>8.00</td>
<td>25.00</td>
<td>每箱12瓶</td>
<td>10</td>
<td>调味品</td>
</tr>
<tr>
<td>5</td>
<td>麻油</td>
<td>12.00</td>
<td>40.00</td>
<td>每箱12瓶</td>
<td>10</td>
<td>调味品</td>
</tr>
<tr>
<td>6</td>
<td>酱油</td>
<td>6.00</td>
<td>20.00</td>
<td>每箱12瓶</td>
<td>25</td>
<td>果酱</td>
</tr>
<tr>
<td>7</td>
<td>海鲜粉</td>
<td>20.00</td>
<td>40.00</td>
<td>每箱30盒</td>
<td>10</td>
<td>干果和坚果</td>
</tr>
<tr>
<td>8</td>
<td>胡椒粉</td>
<td>15.00</td>
<td>35.00</td>
<td>每箱30盒</td>
<td>10</td>
<td>调味品</td>
</tr>
<tr>
<td>14</td>
<td>沙茶</td>
<td>12.00</td>
<td>30.00</td>
<td>每箱12瓶</td>
<td>10</td>
<td>干果和坚果</td>
</tr>
<tr>
<td>17</td>
<td>猪肉</td>
<td>2.00</td>
<td>9.00</td>
<td>每袋500克</td>
<td>10</td>
<td>水果和蔬菜罐头</td>
</tr>
<tr>
<td>19</td>
<td>糖果</td>
<td>10.00</td>
<td>45.00</td>
<td>每箱30盒</td>
<td>5</td>
<td>焙烤食品</td>
</tr>
<tr>
<td>20</td>
<td>桂花糕</td>
<td>25.00</td>
<td>60.00</td>
<td>每箱30盒</td>
<td>10</td>
<td>果酱</td>
</tr>
<tr>
<td>21</td>
<td>花生</td>
<td>15.00</td>
<td>35.00</td>
<td>每箱30包</td>
<td>5</td>
<td>焙烤食品</td>
</tr>
<tr>
<td>34</td>
<td>啤酒</td>
<td>10.00</td>
<td>30.00</td>
<td>每箱24瓶</td>
<td>15</td>
<td>饮料</td>
</tr>
<tr>
<td>40</td>
<td>虾米</td>
<td>8.00</td>
<td>35.00</td>
<td>每袋3公斤</td>
<td>30</td>
<td>肉罐头</td>
</tr>
<tr>
<td>41</td>
<td>虾子</td>
<td>6.00</td>
<td>30.00</td>
<td>每袋3公斤</td>
<td>10</td>
<td>汤</td>
</tr>
<tr>
<td>43</td>
<td>柳橙汁</td>
<td>10.00</td>
<td>30.00</td>
<td>每箱24瓶</td>
<td>25</td>
<td>饮料</td>
</tr>
<tr>
<td>48</td>
<td>玉米片</td>
<td>5.00</td>
<td>15.00</td>
<td>每箱24包</td>
<td>25</td>
<td>点心</td>
</tr>
<tr>
<td>51</td>
<td>猪肉干</td>
<td>15.00</td>
<td>40.00</td>
<td>每箱24包</td>
<td>10</td>
<td>干果和坚果</td>
</tr>
<tr>
<td>52</td>
<td>三合一麦片</td>
<td>12.00</td>
<td>30.00</td>
<td>每箱24包</td>
<td>25</td>
<td>谷类/麦片</td>
</tr>
<tr>
<td>56</td>
<td>白米</td>
<td>3.00</td>
<td>10.00</td>
<td>每袋3公斤</td>
<td>30</td>
<td>意大利面食</td>
</tr>
<tr>
<td>57</td>
<td>小米</td>
<td>4.00</td>
<td>12.00</td>
<td>每袋3公斤</td>
<td>20</td>
<td>意大利面食</td>
</tr>
<tr>
<td>65</td>
<td>海苔酱</td>
<td>8.00</td>
<td>30.00</td>
<td>每箱24瓶</td>
<td>10</td>
<td>调味品</td>
</tr>
<tr>
<td>66</td>
<td>肉松</td>
<td>10.00</td>
<td>35.00</td>
<td>每箱24瓶</td>
<td>20</td>
<td>调味品</td>
</tr>
<tr>
<td>72</td>
<td>酸奶酪</td>
<td>3.00</td>
<td>8.00</td>
<td>每箱2个</td>
<td>10</td>
<td>奶制品</td>
</tr>
<tr>
<td>74</td>
<td>鸡精</td>
<td>8.00</td>
<td>15.00</td>
<td>每盒24个</td>
<td>5</td>
<td>干果和坚果</td>
</tr>
<tr>
<td>77</td>
<td>辣椒粉</td>
<td>3.00</td>
<td>18.00</td>
<td>每袋3公斤</td>
<td>15</td>
<td>调味品</td>
</tr>
<tr>
<td>80</td>
<td>葡萄干</td>
<td>2.00</td>
<td>10.00</td>
<td>每包500克</td>
<td>25</td>
<td>干果和坚果</td>
</tr>
<tr>
<td>81</td>
<td>绿茶</td>
<td>4.00</td>
<td>20.00</td>
<td>每箱20包</td>
<td>25</td>
<td>饮料</td>
</tr>
</tbody>
</table>
</body>
</html>
