This article mainly introduces the way to make table into Exls, the need for friends can refer to the following
Page code Code as follows: <!doctype html> <html> <head> <meta charset= "Utf-8" > <script type= "Text/javascript" src= "jquery-2.0.3.min.js" ></script> <script type= "text/" JavaScript "src=" manualtable2.js ></script> <title> Untitled document </title> <script> $ (document). Ready (function (e) { $ ("#GridTable"). Manualtable ({ //changeaction:function () { //var inputs=$ (this). Parent ()-parent (). Find ("input"); / /alert (inputs.length); } }); }); </script> </head> <body > <table id= "gridtable" > <thead> <th> Employee number </th> <th > name </ th> <th > Department </th> <th> Job </th> <th> Home address </th> <th > Tel </th> <th > Mobile </th> <th> memo </th> </thead> <tr > <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td > <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> </tr> <tr> <td>456456</td> <td> 456456</td> <td>456456</td> <td>456456</td> <td>456456</ td> <td>456456</td> <td>456456</td> <td>456456</td> </tr> <tr> <td>456456</td> <td>456456</td> < td>456456</td> <td>456456</td> <td>456456</td> <td> 456456</td> <td>456456</td> <td>456456</td> </tr> < tr> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> < td>456456</td> <td>456456</td> </tr> </table> </body> </html> <pre code_snippet_id= "251084" Snippet_file_name = "blog_20140322_1_1781185" name= "code" class= "JavaScript" >//based on the script of the ancestors of the Internet, added some features, perhaps some help for beginners // This script is a decorative function for native table support, but does not support table with other elements (function ($) { $.fn. manualtable = function (options) { var tabid = $ (this). attr ("id"); var linemove = false; var Currth = nu ll; 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", "height": OPTs. thheight, "COLOR": OPTs. thcolor }); $ ("#" + tabid + "TD"). CSS ({ "border-left": "Solid" + opts. BorderColor + "1px", "height": OPTs. tdheight, "Border-top": "Solid" + opts. BorderColor + "1px", "padding": "0", "color": OPTs. tdcolor, "Background": OPTs. tdbackcolor }); $ ("#" + tabid + "th:first-child,#" + tabid + "Td:first-child"). CSS ({ "border-left": "N One " }"; /* */ var str = $ ("#" + tabid + "TD"). HTML (); $ ("#" + tabid + "TD") . html ("<input style= ' width:100%; Border:none; Height:100%;vertical-align:middle ' value= ' + str + "' readonly/>"); $ ("#" + tabid + "input"). CSS ( { "Background-color": OPTs. tdbackcolor, "COLOR": OPTs. tdcolor }); if (opts. Isoddchange) { $ ("#" + tabid + "Tr:even"). Find ("input"). CSS ({ "backgrOund-color ": OPTs. changecolor1 }); } if (opts. Ismovechange = = True) { $ ("#" + TabID + "tr"). Hover (function () { $ (this). Find ("input"). CSS ("background", opt S.CHANGECOLOR2); }, function () { $ (this). Find ("input"). CSS ("Background", opts. Tdbackcolor); }); } $.each ($ ("#" + TabID + "tr"), function () { for (var i = 0; i < opt S.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 ("<div id=" Markline "style=" width:1px;height:200px;border-left:1px solid #999; Position:absolute;display:none "></div>"); $ ("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 < 1) { if (Th.width ()-(Event.clientx-left)) < 4) { th.css ({ ' cursor ': ' Col-resize ' }); } else { th.css ({ ' cursor ': ' Default ' }); } } els E if (Th.nextall (). length < 1) { if (Event.clientx-left < 4) { th.css ({ ' cursor ': ' Col-resize ' &N Bsp }); } else { th.css ({ ' cursor ': ' Default ' }); } } else { if (event. Clientx-left < 4 | | (Th.width ()-(Event.clientx-left)) < 4) { th.css ({ ' cursor ': ' Col-resize ' }); } else { TH.CSS ({ ' cursor ': ' Default ' }); } } }); $ ("#" + tabid + "th").Bind ("MouseDown", Function (event) { var th = $ (this); var pos = th.offset (); if (Th.prevall (). Le Ngth < 1) { if ((Th.width ()-(Event.clientx-pos.left)) < 4) { var height = th.parent (). Parent () Paren T (). Height (); var top = pos.top; $ ("#markline"). CSS ({ "height": height, ' top ': top, "left" : event.clientx, "display": "" }); Linemove = true; if (Event.clientx-pos.left < Th.width ()/ 2) { Currth = Th.prev (); } else { Currth = th; } } } else if (Th.nextall (). Leng Th < 1) { if (Event.clientx-pos.left < 4) { var height = th.parent (). Parent (). Parent (). Height (); var top = pos.top; $ ("#markline"). CSS ({ "height": height, ' top ': top, "left": Event.clientx,&nbs P "Display": " }"; 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)) < 4) { var height = th.parent (). Parent (). Parent (). Height (); var t OP = pos.top; $ ("#markline"). CSS ({ "height": height, "Top": top, "Left": event.clientx, " Display ":" " }"; 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 pos = currth.offset (); var index = Currth.prevall () .length; currth.width (event.cl Ientx-pos.left); $ (this). Find (' tr '). each (the 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" }) &NB Sp }); $ ("#" + tabid + "th"). Bind ("MouseUp", Function (event) { $ ("body"). Removeattr ("onselectstart"); if (Linemove = = True) { $ ("#markline"). Hide (); linemove = false; var pos = currth.offset (); var index = Currth.prevall () .length; currth.width (event.clientx-pos.left); currth.parent (). Parent (). Find ("tr"). each (function () { $ (this). Children ()-EQ (index). Width (event.clientx-pos.left); }); } }); }; . Manualtable.defaults = { updataurl: "updata.do", //Definition Edit Update data remote request address (can not) tablefontsize: "12px", //define table font size Thbackcolor: "#005AD2", //define TH header background color thcolor: "#fff", //Define table Header text color thheight: "30px", //define Header height tdbackcolor: "#FFF", //definition TD background Color TDCOLOR: "Red", //definition TD text color Tdheight: "20px", //definition TD height bordercolor: "#555", //define table border line color isoddchange:false, //Whether it is interlaced with the mouse sliding discoloration can not be used at the same time ChangeColor1: "#ff0", //interlacing color ismovechange:true , //Whether mouse sliding discoloration ChangeColor2: "#00f", //mouse sliding color Centerindex: [3, 4, 5, 6], //Define Center column index 0 start &N Bsp Editindex: [2, 3, 5], //Definition Editable column index 0 start //define edit trigger function, Automatic Update save data changeaction:function () { var Basepa th = $.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) { /alert (data); //}); },&NBsp Defines whether the row trigger function isrowsclick:true, //is triggered Rowstype: "DblClick", //Trigger mode //trigger function Rowsclick : function () { alert ($.fn. MANUALTABLE.DEFAULTS.UPDATAURL); } }; }) (JQuery);</pre><br> < pre></pre> <br> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
