可編輯的jquery表格外掛

轉自：http://blog.csdn.net/luoyeyu1989/article/details/7201345

注意：

.live() was introduced in jQuery 1.3, therefore it won't work with earlier versions.

.live() has also since been deprecated in jQuery 1.7 onwards.

The alternatives are .on() and .delegate()

See related question jQuery 1.9 .live() is not a function on how to migrate existing code.

程式碼中使用的是jquery 1.5 所以可以使用.live函式

用on繫結未來元素：

//放在$(function(){})裡才有效
$(document).on("click", "#testDiv", function(){
//此處的$(this)指$( "#testDiv")，而非$(document)
});

繫結已有元素和未來元素

$(function(){
//動態新增
$(".add").on("click",function(){
console.log("進來了");
$(".info").append('<div class="delete"><h3>單擊我來刪除我</h3></div>');
});
//對動態新增的元素新增事件-刪除
$(".info").on("click",".delete",function(){
console.log("進來了Delete！");
$(this).remove();
});
});

[javascript] view plain copy

/*可編輯的表格外掛v1.0*/
/*author:塵絮緣 xcl date:2011-12-02*/
/*update:2011-12-05*/
/*qq:80213876 */
/*說明：
雙擊行編輯，再雙擊則儲存
更多引數，請參照最下方的：defaults
*/
var tableListInfo = {
init: function(options) {
options = $.extend(tableListInfo.defaults, options); //這裡其實就是合併多個物件為一個。這裡就是，如果你在呼叫的時候寫了新的引數，就用你新的引數，如果沒有寫，就用預設的引數。
//滑過變色
$(options.tableClass).hover(function() {
$(this).addClass(options.trHoverClass);
}, function() {
$(this).removeClass(options.trHoverClass);
});
//設定奇數行和偶數行的樣式
$(options.tableClass + ":odd").addClass(options.trOddClass);
$(options.tableClass + ":even").addClass(options.trEvenClass);
//單擊選中
$(options.tableClass).live("click", function() {
$(this).hasClass(options.trSelectedClass) ? $(this).removeClass(options.trSelectedClass) : $(this).addClass(options.trSelectedClass);
returnfalse;
});
//全選
$(options.selectAllClass).live("click", function() {
$(options.tableClass).addClass(options.trSelectedClass);
returnfalse;
});
//全不選
$(options.selectNothingClass).live("click", function() {
$(options.tableClass).removeClass(options.trSelectedClass);
returnfalse;
});
//反選
$(options.selectOtherClass).live("click", function() {
$(options.tableClass).each(function() {
$(this).hasClass(options.trSelectedClass) ? $(this).removeClass(options.trSelectedClass) : $(this).addClass(options.trSelectedClass);
});
returnfalse;
});
//刪除
$(options.delClass).live("click", function() {
var ids = [];
var trObjs = [];
$(options.tableClass).each(function() {
if ($(this).hasClass(options.trSelectedClass)) {
ids.push($(this).attr(options.idAttr));
trObjs.push($(this));
}
});
if (ids.length > 0) {
if (options.delCallBack != null) {
var str=options.delCallBack(ids, trObjs).split(",");//刪除失敗的ID陣列
for (var i = 0; i < trObjs.length; i++)
{
var flag=1;
for(var m=0;m<str.length;m++)
{
if(trObjs[i].attr(options.idAttr)==str[m])//刪除失敗的行
{
flag=0;break;
}
}
if(flag==1)
{
trObjs[i].fadeTo("normal", 0.6, function() {$(this).remove();});
}
}
}
}
returnfalse;
});
//編輯
$(options.editClass).live("click", function() {
var ids = [];
var trObjs = [];
$(options.tableClass).each(function() {
if ($(this).hasClass(options.trSelectedClass)) {
ids.push($(this).attr(options.idAttr));
trObjs.push($(this));
}
});
if (ids.length > 1) {
alert(options.trEditMsg);
returnfalse;
}
elseif (ids.length == 1) {
if (options.editCallBack != null) {
options.editCallBack(ids, trObjs);
}
}
returnfalse;
});
//單擊“全部取消編輯”按鈕
$(options.cancleAllClass).live("click", function() {
$(options.tableClass + " .cancleEditCurrentTr"

相關推薦

可編輯的jquery表格外掛

轉自：http://blog.csdn.net/luoyeyu1989/article/details/7201345 注意： .live() was introduced in jQuery 1.3, therefore it won't work with e

Datatables--一款jQuery表格外掛

Datatables是一款強大的jquery表格外掛。它是一個高度靈活的工具，可以將任何HTML表格新增高階的互動功能。主要特點：自動分頁處理即時表格資料過濾資料排序以及資料

jquery表格外掛DataTables 合計功能(當前頁)

[email protected]1.table中新增 <tfoot> <tr> <td><b>當前頁合計</b> </td> <td id="weightsum"

JavaScript實現可編輯的表格

一、建立js檔案（JavaScript檔案） /* * 建立人：張興軍 * 說明：可編輯的表格 */ $(function () { // 相當於在頁面中的body標籤加上onload事件 $(".caname").click(functio

jQuery 表格外掛jqGird學習

專案開放中。專案不需要再額外新增JavaScript框架之類，要求可以找基於jQuery的外掛進行開發，或者自己新開發。從網上上了一下。jqGird比較不錯。故將自己的學習開發過程記錄下來。不是單純為了分享，只是做一個自己的學習記錄，會同不到自己的163部落格上去。介紹：wi

使用easyui的可編輯資料表格(editable datagrid)

相關的參考屬性、方法和事件： 1、列屬性： 2、datagrid事件： 3、datagrid方法： 4、示範程式碼： <table id="myTable"></table> <script type="te

封裝Vue Element的可編輯table表格元件

前一段時間，有博友在我那篇封裝Vue Element的table表格元件的博文下邊留言說有沒有那種“表格行內編輯”的封裝元件，我當時說我沒有封裝過這樣的元件，因為一直以來在實際開發中也沒有遇到過這樣的需求，但我當時給他提供了一個思路。時間過去了這麼久，公司的各種需求也不停地往外冒，什麼地圖圖表、表格行內編

jQuery Handsontable【jQuery外掛-一個非常酷的可編輯表格】

jQuery Handsontable 是jQuery外掛中一款非常酷的可編輯的表格，它的描述是：a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery. (一款類似於Exce

jquery實現可編輯表格，並生成json結果

實現效果如下，在編輯表格的同時可以實現欄位json內容的自動變化，點選提交可以儲存到後臺，頁面載入的時候自動解析json並載入表格內容。該程式碼解析和載入功能都用前端js實現，簡化了後臺程式碼邏輯。定義要操作的表格頭： <input readonly="read

js和jQuery實現雙擊表格變為可編輯狀態

看到別人的程式碼，自己分析加的備註，直接上程式碼！ <style type="text/css"> body {font-size: 12px; } td {border-width: 1px;border-top-style: solid;border-rig

基於Bootstrap使用jQuery實現簡單可編輯表格

editTable.js 提供編輯表格當前行、新增一行、刪除當前行的操作，其中可以設定引數，如： operatePos 用於設定放置操作的列，從0開始，-1表示以最後一列作為放置操作的列；（這裡的操作包括編輯當前行、在當前行下新增一行、刪除當前行） han

extjs 表格為可編輯，保存後為不可編輯狀態

action bottom ams res read true turn jre sql 畫出表格編輯後思路：在初始時設置一個狀態，panduan=‘0‘，此時，就是一個不可編輯的input，當點擊編輯時，改變panduan = ‘1‘，即可編輯。保存是加入正則表

JQuery實戰--能夠編輯的表格

src 總結 black 問題 bsp col ext 背景 meta 　　今天學習到了一個實例，其名稱為的能夠編輯的表格。事實上現的效果是：點擊頁面上的單元格，單元格中的內容變成選中狀態，變成能夠輸入的狀態。向單元

實戰Jquery(二)--能夠編輯的表格

文本框 color ren spa 實現思路部分 trac link http 今天實現的是一個表格的樣例,通過獲取表格的奇數行,設置背景色屬性,使得奇偶行背景色不同.這個表格能夠在單擊時編輯,回車即更改為新輸入的

基於Birt4.6實現報表表格數據的可編輯

Birt 報表可編輯奇葩需求：客戶要求某業務系統中生成的報表數據可以編輯。為響應客戶的需求，本文基於Birt 4.6實現報表數據的可編輯（偽修改）。 BIRT 是以 Java 和 JavaEE 為基礎為 Web 應用程序開發的基於 Eclipse 的開源報表系統，其本身並不支持報表數據的修改。

ExtJs 日期相加，Grid表格列可編輯

for CI tex lec combox ant head tool RM 1、日期相加： Ext.Date.add(new Date(), Ext.Date.DAY, 15) 2、Grid表格列可編輯： { header : "實際已交貨量",

bootstrap-table實現表格可編輯出現的問題

bootstrap-table實現可編輯最近在用bootstrap-table實現可編輯的表格，在使用過程中遇到一個小問題，總是找不到原因在使用表格編輯的時候我引用了如下css和js <link href="/Content/bootstrap.min.css" rel="stylesheet" /

你可能不知道的iview可編輯表格與表格驗證

操作新增 ica 刪除 ont ros pan 表格 mic https://dev.iviewui.com/articles/1040179759335739392 然後在表格有其他操作，比如新增或刪除行時將數據賦給List,提交數據時，用的也是臨時數據，原來的Li

vue+iview 實現可編輯表格

先簡單說明一下,這個Demo引入的vue,iview的方式是標籤引入的,沒有用到webpack之類的構建工具... 畢竟公司還在用angularjs+jq. 這也是我第一次寫文章,大家看看思路就行了,要是有大佬指點指點就更好了話不多說,先來個效果圖我們再看下極為簡單的目錄結構

ExtJS4.2學習(七)EditorGrid可編輯表格

原網址：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html 上節講到通過後臺數據進行分頁，分頁工具條還可以放置在頂端，或者上下都有而不影響資料，因為它們都共用一個s

可編輯的jquery表格外掛

相關推薦