รหัสตัวอย่างเพื่อเปลี่ยนตารางเป็น exls

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-02-10 07:48:01

รหัสหน้าเว็บ

การคัดลอกรหัสมีดังนี้:

<! doctype html>

<html>

<head>

<tite> เอกสารชื่อ UNT </title>

$ (เอกสาร). พร้อม (ฟังก์ชั่น (e) {

$ ("#gridtable"). ManualTable ({

// การเปลี่ยนแปลง: function () {

// var inputs = $ (this) .parent (). parent (). find ("อินพุต");

//alert(inputs.length);

</script>

</head>

<body>

<head>

<th> หมายเลขพนักงาน </th>

<th> แผนกงาน </th>

<th> ตำแหน่ง </th>

<th> หมายเลขติดต่อ </th>

<th> โทรศัพท์มือถือ </th>

<th> หมายเหตุ </th>

</head>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

<pre code_snippet_id = "251084" snippet_file_name = "blog_20140322_1_1781185" name = "code"> // ฉันเปลี่ยนตามสคริปต์ของอาวุโสของฉันและเพิ่มฟังก์ชั่นบางอย่าง

// สคริปต์นี้เป็นฟังก์ชั่นการตกแต่งรองรับตารางพื้นเมือง แต่ไม่รองรับตารางที่มีองค์ประกอบอื่น ๆ

(ฟังก์ชั่น ($) {

$ .fn.ManualTable = function (ตัวเลือก) {

var tabid = $ (นี่) .attr ("id");

var linemove = false;

var currth = null;

var opts = $ .extend ({}, $ .fn.manualTable.defaults, ตัวเลือก);

$ (นี่) .css ({

"*การล่มสลายของชายแดน": "ล่มสลาย",

"ระยะห่างชายแดน": 0,

"ความกว้าง": "100%"

"Border": "Solid" + Opts.BorderColor + "1px"

"Font-Size": opts.tablefontsize

$ ("#" + tabid + "th"). css ({

"พื้นหลัง": opts.thbackcolor,

"Border-Left": "Solid" + Opts.BorderColor + "1px"

"ความสูง": opts.thheight,

"สี": opts.thcolor

$ ("#" + tabid + "td"). css ({

"Border-Left": "Solid" + Opts.BorderColor + "1px"

"ความสูง": opts.tdheight,

"Border-Top": "Solid" + Opts.BorderColor + "1px"

"ช่องว่าง": "0",

"สี": opts.tdcolor,

"พื้นหลัง": opts.tdbackcolor

$ ("#" + tabid + "th: ลูกคนแรก,#" + tabid + "td: ลูกคนแรก"). css ({

"ชายแดนซ้าย": "ไม่มี"

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

$ ("#" + tabid + "td"). html ("<อินพุต style = 'ความกว้าง: 100%; ชายแดน: ไม่มี; ความสูง: 100%; แนวตั้ง-แนวตั้ง: กลาง' value = '" str + "' อ่านอย่างเดียว/> ");

$ ("#" + tabid + "input"). css ({

"พื้นหลังสี": opts.tdbackcolor,

"สี": opts.tdcolor

if (opts.isoddchange) {

$ ("#" + tabid + "tr: even") ค้นหา ("อินพุต"). css ({

"พื้นหลังสี": opts.changeColor1

if (opts.ismoveChange == true) {

$ ("#" + tabid + "tr"). hover (function () {

$ (นี่) .find ("อินพุต"). CSS ("พื้นหลัง", opts.changeColor2);

}, การทำงาน () {

$ (นี่) .find ("อินพุต"). css ("พื้นหลัง", opts.tdbackcolor);

$ .Each ($ ("#" + tabid + "tr"), function () {

สำหรับ (var i = 0; i <opts.centerindex.length; i ++) {

$ (นี่) .find ("อินพุต"). eq (opts.centerindex [i]). css ({

"การจัดเรียงข้อความ": "center"

สำหรับ (var i = 0; i <opts.editIndex.length; i ++) {

$ (นี่) .find ("อินพุต"). eq (opts.editIndex [i]). Removeattr ("อ่านอย่างง่าย");

$ ("body"). ผนวก ("<div id =/" markline/"style =/" ความกว้าง: 1px; ความสูง: 200px; ชายแดนซ้าย: 1px solid #999; ตำแหน่ง: Absolute; แสดง: ไม่มี/"> </div> ");

$ ("body"). ผูก ("mousemove", ฟังก์ชั่น (เหตุการณ์) {

ถ้า (linemove == true) {

$ ("#markline"). css ({

"ซ้าย": event.clientx

}).แสดง();

$ ("#" + tabid + "th"). ผูก ("Mousemove", ฟังก์ชั่น (เหตุการณ์) {

$ ("body"). attr ({

onSelectStart: "Event.RetUrnValue = false"

var th = $ (นี่);

var left = th.offset (). ซ้าย;

if (th.prevall (). ความยาว <1) {

if ((th.width () - (event.clientx - ซ้าย)) <4) {

th.css ({

'เคอร์เซอร์': 'col-resize'

อื่น {

th.css ({

'เคอร์เซอร์': 'ค่าเริ่มต้น'

} อื่นถ้า (th.nextall (). ความยาว <1) {

if (event.clientx - ซ้าย <4) {

th.css ({

'เคอร์เซอร์': 'col-resize'

อื่น {

th.css ({

'เคอร์เซอร์': 'ค่าเริ่มต้น'

} อื่น {

if (event.clientx - ซ้าย <4 || (th.width () - (event.clientx - ซ้าย)) <4) {

th.css ({

'เคอร์เซอร์': 'col-resize'

อื่น {

th.css ({

'เคอร์เซอร์': 'ค่าเริ่มต้น'

$ ("#" + tabid + "th"). bind ("mousedown", ฟังก์ชั่น (เหตุการณ์) {

var th = $ (นี่);

var pos = th.offset ();

if (th.prevall (). ความยาว <1) {

if ((th.width () - (event.clientx - pos.left)) <4) {

ความสูง var = th.parent (). parent (). parent (). ความสูง ();

var top = pos.top;

$ ("#markline"). css ({

"ความสูง": ความสูง

"ด้านบน": ด้านบน

"ซ้าย": event.clientx,

"แสดง": ""

linemove = true;

if (event.clientx - pos.left <th.width () / 2) {

currth = th.prev ();

อื่น {

currth = th;

} อื่นถ้า (th.nextall (). ความยาว <1) {

if (event.clientx - pos.left <4) {

ความสูง var = th.parent (). parent (). parent (). ความสูง ();

var top = pos.top;

$ ("#markline"). css ({

"ความสูง": ความสูง

"ด้านบน": ด้านบน

"ซ้าย": event.clientx,

"แสดง": ""

linemove = true;

if (event.clientx - pos.left <th.width () / 2) {

currth = th.prev ();

อื่น {

currth = th;

} อื่น {

if (event.clientx - pos.left <4 || (th.width () - (event.clientx - pos.left)) <4) {

ความสูง var = th.parent (). parent (). parent (). ความสูง ();

var top = pos.top;

$ ("#markline"). css ({

"ความสูง": ความสูง

"ด้านบน": ด้านบน

"ซ้าย": event.clientx,

"แสดง": ""

linemove = true;

if (event.clientx - pos.left <th.width () / 2) {

currth = th.prev ();

อื่น {

currth = th;

$ ("body"). bind ("mouseup", ฟังก์ชั่น (เหตุการณ์) {

$ ("body"). Removeattr ("onSelectStart");

ถ้า (linemove == true) {

$ ("#markline"). ซ่อน ();

linemove = false;

var pos = currth.offset ();

ดัชนี var = currth.prevall (). ความยาว;

currth.width (event.clientx - pos.left);

$ (นี่) .find ("tr") แต่ละ (ฟังก์ชั่น () {

$ (นี่) .children (). eq (ดัชนี) .Width (Event.Clientx - pos.left);

}); //.children().eq(index)

$ ("#" + tabid + "tr"). bind (opts.rowstype, opts.rowsclick);

$ ("#" + tabid + "input"). bind ("เปลี่ยน", opts.changeAction);

$ ("#" + tabid + "อินพุต"). โฟกัส (ฟังก์ชั่น (e) {

$ (นี่) .css ({

"ชายแดน": "ไม่มี"

$ ("#" + tabid + "th"). bind ("mouseup", ฟังก์ชั่น (เหตุการณ์) {

$ ("body"). Removeattr ("onSelectStart");

ถ้า (linemove == true) {

$ ("#markline"). ซ่อน ();

linemove = false;

var pos = currth.offset ();

ดัชนี var = currth.prevall (). ความยาว;

currth.width (event.clientx - pos.left);

currth.parent (). parent (). ค้นหา ("tr"). แต่ละ (ฟังก์ชั่น () {

$ (นี่) .children (). eq (ดัชนี) .Width (Event.Clientx - pos.left);

$ .fn.manualTable.defaults = {

updataurl: "updata.do",

// กำหนดที่อยู่คำขอระยะไกลสำหรับการแก้ไขและอัปเดตข้อมูล (ไม่อนุญาต)

TableFontSize: "12px"

// กำหนดขนาดตัวอักษรตาราง

ThbackColor: "#005AD2"

// กำหนดสีพื้นหลังของส่วนหัวตาราง th

thcolor: "#ffff",

// กำหนดสีของข้อความส่วนหัว

thheight: "30px"

// กำหนดความสูงส่วนหัว

tdbackColor: "#FFF",

// กำหนดสีพื้นหลัง TD

tdcolor: "สีแดง",

// กำหนดสีข้อความ TD

tdheight: "20px",

// กำหนดความสูง TD

BorderColor: "#555"

// กำหนดสีของเส้นขอบตาราง

isoddchange: เท็จ

// ไม่ว่าจะเปลี่ยนสีอินเทอ

changecolor1: "#ff0"

// การเปลี่ยนแปลงสีอินเตอร์เลด

isMoveChange: จริง

// ไม่ว่าจะเป็นสไลด์เมาส์จะเปลี่ยนสี

changecolor2: "#00f"

// การเปลี่ยนสีของเมาส์เลื่อน

Centerindex: [3, 4, 5, 6]

// กำหนดดัชนีคอลัมน์กลาง 0 เริ่มต้น

editindex: [2, 3, 5],

// กำหนดดัชนีคอลัมน์ที่แก้ไขได้ 0 เริ่มต้น

// กำหนดฟังก์ชันแก้ไขทริกเกอร์อัปเดตและบันทึกข้อมูลโดยอัตโนมัติ

การเปลี่ยนแปลง: function () {

var basepath = $ .fn.manualtable.defaults.updataurl;

var tds = $ (this) .parent (). parent (). ค้นหา ("อินพุต");

var str = "";

$ .Each (tds, function (i) {

str + = str == ""? "arg" + i + "=" + $ (นี่) .val (): "& arg" + i + "=" + $ (นี่)

การแจ้งเตือน (basepath + "?" + str);

// $. get ($. fn.manualtable.defaults.updataurl+"?"+str, function (data) {

// Alert (ข้อมูล);

// กำหนดฟังก์ชันทริกเกอร์แก้ไขบรรทัด

isrowsclick: จริง

// ว่าจะทริกเกอร์

Rowstype: "dblclick",

// วิธีทริกเกอร์

// ฟังก์ชันทริกเกอร์

rowsclick: function () {

การแจ้งเตือน ($. fn.Manualtable.defaults.updataurl);

}) (jQuery); </pre> <br>

<br>