テーブルを exls_jquery に変換するサンプルコード

Web ページのコード

コードをコピー コードは次のとおりです:

$(document).ready(function(e) {
$("#GridTable").ManualTable({
//ChangeAction:function(){
// var inputs=$( this).parent().parent().find("input");
//alert(inputs.length)
}
});



<ボディ>
<テーブルid="GridTable">

员工编号
姓
工作部门
职务
家庭住址
联系电话
手机
备注


456456
456456
456456
456456
456456
456456
456456
456456


456456
456456
456456
456456
456456
456456
456456
456456


456456
456456
456456
456456
456456
456456
456456
456456


456456
456456
456456
456456
456456
456456
456456
456456

// ウェブサイト上前辈の書き込みに基づいて修正一下、追加いくつかの機能、初学者有数の帮助 
//この脚本は、実装饰作用、对原生的サポートテーブル、不过不サポートテーブル有その元素 
(function ($) { 
$.fn. ManualTable = 関数 (オプション) { 
var tabid = $(this).attr("id"); 
var lineMove = false; 
var opts = $.extend ({}, $.fn.ManualTable.defaults, options); 

$(this).css({ 
"*border-collapse": "collapse", 
"border-spacing ": 0, 
"width": "100%", 
"border": "solid " opts.BorderColor " 1px", 
"font-size": opts.TableFontSize 
}) ; 
$("#" tabid " th").css({ 
"background": opts.ThBackColor, 
"border-left": "solid " opts.BorderColor " 1px", 
"高さ": opts.ThHeight, 
"色": opts.ThColor 
}); 

$("#" tabid " td").css({ 
"border -left": "solid " opts.BorderColor " 1px"、
"height": opts.TdHeight、
"border-top": "solid " opts.BorderColor " 1px"、
"padding" : "0"、
"カラー": opts.TdColor、
"背景": opts.TdBackColor 
}); 
$("#" tabid " th:first-child,#" tabid " td:first-child").css({ 
"border-left": "none" 
}); 

/* 

*/ 
var str = $("#" tabid " td").html(); 
$("#" tabid " td").html(""); 


$("#" tabid " input").css({ 
"背景色": opts.TdBackColor, 

"色": opts.TdColor 
}); 
if (opts.IsODDChange) { 
$("#" tabid " tr:even").find("input").css({ 
"背景色": opts.ChangeColor1 
}); 
} 
if (opts.IsMoveChange == true) { 
$("#" + tabid + " tr").hover(function () { 
$(this).find("input").css("background", opts.ChangeColor2); 
}, function () { 
$(this).find("input").css("background", opts.TdBackColor); 

}); 
} 
$.each($("#" + tabid + " tr"), function () { 
for (var i = 0; i < opts.CenterIndex.length; i++) { 
$(this).find("input").eq(opts.CenterIndex[i]).css({ 
"text-align": "center" 
}); 
} 
for (var i = 0; i < opts.EditIndex.length; i++) { 
$(this).find("input").eq(opts.EditIndex[i]).removeAttr("readonly"); 
} 
}); 

$("body").append("
 "); 
$("body").bind("mousemove", function (event) { 
if (lineMove == true) { 
$("#markline").css({ 
"left":event.clientX 
}).show(); 
} 
$("#" tabid " th").bind("mousemove) ", function (event) { 
$("body").attr({ 
onselectstart: "event.returnValue=false" 
}); 
var th = $(this); 
var left = th.offset().left; 

if (th.prevAll().length if ((th.width() - (event.clientX -)左)) < 4) { 
th.css({ 
'cursor': 'col-resize' 
}); 
} 
else { 
th.css( { 
'cursor': 'default' 
}); 
} 

} else if (th.nextAll().length if (event. clientX - left < 4) { 
th.css({ 
'cursor': 'col-resize' 
}); 
} 
th.css( { 
'cursor': 'default' 
}); 
} 

} else { 
if (event.clientX - left th.css({ 
'cursor': 'col-resize' 
}); 
th.css({ 
'カーソル': 'デフォルト' 
}) 
} 
} 
}); 

$("#" tabid) " th").bind("mousedown", function (event) { 

var th = $(this); 
var pos = th.offset(); 
if (th.prevAll().length < 1) { 
if ((th.width() - (event.clientX - pos.left)) < 4) { 
var height = th.parent().parent().parent().height(); 
var top = pos.top; 
$("#markline").css({ 
"高さ": 高さ, 
"上": 最上部, 
"左":event.clientX, 
"表示": "" 
}); 
lineMove = true; 
if (event.clientX - pos.left < th.width() / 2) { 
currTh = th.prev(); 
} 
else { 
currTh = th; 
} 
} 
} else if (th.nextAll().length < 1) { 
if (event.clientX - pos.left < 4) { 
var height = th.parent().parent().parent().height(); 
var top = pos.top; 
$("#markline").css({ 
"高さ": 高さ, 
"上": 最上部, 
"左":event.clientX, 
"表示": "" 
}); 
lineMove = true; 
if (event.clientX - pos.left < th.width() / 2) { 
currTh = th.prev(); 
} 
else { 
currTh = th; 
} 
} 

} else { 
if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left) ) var height = th.parent().parent().parent().height(); 
var top = pos.top; 
$("#markline").css({ 
"高さ": 高さ, 
"上": 最上部, 
"左":event.clientX, 
"表示": "" 
}); 
lineMove = true; 
if (event.clientX - pos.left < th.width() / 2) { 
currTh = th.prev(); 
} 
else { 
currTh = th; 
} 
} 
} 
}); 
$("body").bind("mouseup", function (event) { 
$("body").removeAttr("onselectstart"); 
if (lineMove == true) { 
$("#markline").hide(); 
lineMove = false; 
var インデックス = currTh.prevAll().length; currTh.width(event.clientX - pos.left); 
$(this).find("tr").each(function () { 
$(this).children().eq(index) .width(event.clientX - pos.left); //.children().eq(index).width(event.clientX - pos.left); ; 
$("#" tabid " tr").bind(opts.RowsType, opts.RowsClick); 
$("#" tabid " input").bind("change", opts.ChangeAction); 
$("#" tabid " input").focus(function (e) { 
$(this).css({ 
"border": "none" 
}) 
 }); 
$("#" tabid " th").bind("mouseup", function (event) { 
$("body").removeAttr("onselectstart"); 
if (lineMove == true) { 
$("#markline").hide(); 
lineMove = false; 
var pos = currTh.offset(); ; 
currTh.width(event.clientX - pos.left); 
currTh.parent().parent().find("tr").each(function () { 
$(this) .children().eq(index).width(event.clientX - pos.left); 
} 
}); 
}; 
$.fn.ManualTable.defaults = { 
UpDataUrl: "Updata.do", 
//定义编辑更新データ据程请求地址（可不要） 
TableFontSize: "12px", 
//定义表格文字体大小 
ThBackColor: "#005AD2", 
//定义TH表头背景颜色 
ThColor: "#fff", 
//定义表头文字颜色 
ThHeight: "30px", 
//定义表高さ 
TdBackColor: "#FFF", 
//定义TD背景颜色 
TdColor: "red", 
//定义TD文字颜色 
TdHeight: "20px", 
//定义TD高さ 
BorderColor: "#555", 
//定义表格边框線条颜色 
IsODDChange: false, 
 //隔行色であるかどうか、ネズミの标滑動色は同時に使用できません 
ChangeColor1: "#ff0", 
//隔行色颜色 
IsMoveChange: true, 
// ネズミの标滑動色であるかどうか 
 ChangeColor2: "#00f", 
//ネズミ标滑動变色颜色 
CenterIndex: [3, 4, 5, 6], 
//定义居中列インデックス 0开開始 
EditIndex: [2, 3, 5], 
//定义可编辑列index 0開始 
//定义可编辑触発関数，自動更新保存データ 
ChangeAction: function () { 
varbasepath = $.fn. ManualTable.defaults.UpDataUrl; 
var tds = $(this).parent().parent().find("input"); 
var str = ""; 
$.each(tds, function (i) { 
str = str == "" ? "arg" i "=" $(this).val() : "&arg" i "=" $( this).val(); 
}); 
alert(basepath "?" str); 
//$.get($.fn.ManualTable.defaults.UpDataUrl "?" str,function(data){ 
// ; >//トリガーメソッド
//トリガー関数
RowsClick: function () { 
alert($.fn.ManualTable.defaults.UpDataUrl); 

}; 
})(jQuery);