DIV CSS 佈局教程網

我的思路是這樣的：
1.對任何一個 table, tr 都可以添加編輯、刪除功能——功能獨立
2.可以自動的完成編輯、取消功能，如點擊編輯， 表格內容自動變成編輯框、下拉框等， 點擊取消結束編輯狀態
3.添加刪除、確定(即更新)事件——只需要添加自己服務端的刪除、更新代碼就可以
4.能夠自定義設置可編輯列，不可編輯列——方便定制編輯功能

下面是我實現的功能代碼：
editable.js
_ 代碼如下:
/*
code: editable.js
version: v1.0
date: 2011/10/21
author: [email protected]
usage:
$("table").editable({ selector 可以選擇table或者tr
head: true, 是否有標題
noeditcol: [1, 0], 哪些列不能編輯
編輯列配置：colindex：列索引
edittype：編輯時顯示的元素 0：input 1：checkbox 2：select
ctrid：關聯元素的id 如edittype=2， 那麼需要設置select的元素
css:元素的樣式
editcol: [{ colindex: 2, edittype: 2, ctrid: "sel",css:""}],
onok: function () {
return true; 根據結果返回true or false
},
ondel: function () {
return true; 根據結果返回true or false
}
});
*/
(function ($) {
$.fn.editable = function (options) {
options = options || {};
opt = $.extend({}, $.fn.editable.defaults, options);
trs = [];
$.each(this, function () {
if (this.tagName.toString().toLowerCase() == "table") {
$(this).find("tr").each(function () {
trs.push(this);
});
}
else if (this.tagName.toString().toLowerCase() == "tr") {
trs.push(this);
}
});
$trs = $(trs);
if ($trs.size() == 0 || (opt.head && $trs.size() == 1))
return false;
var button = "<td><a href='#' class='" + opt.editcss + "'>編輯</a> <a href='#' class='" + opt.delcss + "'>刪除</a><a href='#' class='" + opt.onokcss + "'>確定</a> <a href='#' class='" + opt.canclcss + "'>取消</a></td>";
$trs.each(function (i, tr) {
if (opt.head && i == 0) {
$(tr).append("<td></td>");
return true;
}
$(tr).append(button);
});
$trs.find(".onok, .cancl").hide();
$trs.find(".edit").click(function () {
$tr = $(this).closest("tr");
$tds = $tr.find("td");
$.each($tds.filter(":lt(" + ($tds.size() - 1) + ")"), function (i, td) {
if ($.inArray(i, opt.noeditcol) != -1)
return true;
var t = $.trim($(td).text());
if (opt.editcol != undefined) {
$.each(opt.editcol, function (j, obj) {
if (obj.colindex == i) {
css = obj.css ? "class='" + obj.css + "'" : "";
if (obj.edittype == undefined || obj.edittype == 0) {
$(td).data("v", t);
$(td).html("<input type='text' value='" + t + "' " + css + " />");
}
else if (obj.edittype == 2) { //select
if (obj.ctrid == undefined) {
alert('請指定select元素id ctrid');
return;
}
$(td).empty().append($("#" + obj.ctrid).clone().show());
$(td).find("option").filter(":contains('" + t + "')").attr("selected", true);
}
/* 可以在此處擴展input、select以外的元素編輯行為 */
}
});
}
else {
$(td).data("v", t);
$(td).html("<input type='text' value='" + t + "' />");
}
});
$tr.find(".onok, .cancl, .edit, .del").toggle();
return false;
}); ;
$trs.find(".del").click(function () {
$tr = $(this).closest("tr");
if (opt.ondel()) {
$tr.remove();
}
return false;
});
$trs.find(".onok").click(function () {
$tr = $(this).closest("tr");
$tds = $tr.find("td");
if (opt.onok()) {
$.each($tds.filter(":lt(" + ($tds.size() - 1) + ")"), function (i, td) {
var c = $(td).children().get(0);
if (c != null)
if (c.tagName.toLowerCase() == "select") {
$(td).html(c.options[c.selectedIndex].text);
}
else if (c.tagName.toLowerCase() == "input") {
$(td).html(c.value);
}
/* 可以在此處擴展input、select以外的元素確認行為 */
});
$tr.find(".onok, .cancl, .edit, .del").toggle();
}
return false;
});
$trs.find(".cancl").click(function () {
$tr = $(this).closest("tr");
$tds = $tr.find("td");
$.each($tds.filter(":lt(" + ($tds.size() - 1) + ")"), function (i, td) {
var c = $(td).children().get(0);
if (c != null)
if (c.tagName.toLowerCase() == "select") {
$(td).html(c.options[c.selectedIndex].text);
}
else if (c.tagName.toLowerCase() == "input") {
$(td).html(c.value);
}
/* 可以在此處擴展input、select以外的元素取消行為 */
});
$tr.find(".onok, .cancl, .edit, .del").toggle();
return false;
});
};
$.fn.editable.defaults = {
head: false,
/*
如果為空那麼所有的列都可以編輯，並且默認為文本框的方式編輯
如下形式：
{{colindex:'', edittype:'', ctrid:'', css:''}, ...}
edittype 0:input 1:checkbox 2:select
*/
//editcol:{},
/*
設置不可以編輯的列，默認為空
如下形式：
[0,2,3,...]
*/
noeditcol: [],
onok: function () {
alert("this's default onok click event");
return true;
},
ondel: function () {
alert("this's default on del click event");
return true;
},
editcss: "edit",
delcss: "del",
onokcss: "onok",
canclcss: "cancl"
};
})(jQuery);

下面來看下插件的效果

1.數據表格

2.添加編輯功能

_ 代碼如下:
$(function () {
$("table").editable({
head: true, //有表頭
noeditcol: [0], //第一列不可編輯
editcol: [{ colindex: 1 }, { colindex: 2, edittype: 2, ctrid: "sel"}], //配置表格的編輯列 ctrid:為關聯的dom元素id
onok: function () {
return false; //返回false表示失敗，dom元素不會有變化
},
ondel: function () {
return true; //返回false表示成功，dom元素相應有變化
}
});
});

3.添加編輯後的效果

注：另外可以配置編輯功能中的幾個按鈕樣式，詳見代碼咯 ；)
文件源碼：editable.rar