Cut the crap, go straight to the subject,
Table function:
1, add
2, delete
3, get the value
4. Dynamic Data Filling
5, Dynamic set focus
6, keyboard around the key to control cell focus
7, the cell Add regular verification function
Webform4.aspx
Copy Code code as follows:
<%@ Page language= "C #" autoeventwireup= true "codebehind=" WebForm4.aspx.cs "inherits=" table. WEBFORM4 "%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script src= "Jquery-1.3.2-vsdoc2.js" type= "Text/javascript" ></script>
<script src= "Jquery-1.3.2.js" type= "Text/javascript" ></script>
<script src= "jquery. Dynamictable.js "type=" Text/javascript "></script>
<link href= "Style2.css" type= "Text/css" rel= "Stylesheet"/>
<script type= "Text/javascript" >
var rowtmplate = "<tr><td class= ' tabledata ' ><input type= ' text ' style= ' border:0px; width:98%; ' /></td> ";
Rowtmplate + + <td class= ' tabledata ' ><input type= ' text ' style= ' border:0px; width:98%; ' /></td> ";
Rowtmplate + + <td class= ' tabledata ' ><input type= ' text ' style= ' border:0px; width:98%; ' /></td> ";
Rowtmplate + + <td class= ' tabledata ' ><input type= ' text ' style= ' border:0px; width:98%; ' /></td> ";
Rowtmplate + + <td class= ' tabledata ' ><input type= ' text ' style= ' border:0px; width:98%; ' /></td> ";
Rowtmplate + + <td class= ' tabledata ' ><a href= ' # ' > Delete </a></td></tr> ';
$ (document). Ready (function () {
$ (this). bind (' KeyUp ', function (e) {
Switch (e.keycode) {
Case 38://Up ↑
var arr = $.fn.getfocus ();
var rowIndex = arr[0]-1;
$.fn.setfocus ({rowindex:rowindex, colindex:arr[1]});
$.fn.setcellsfocus ();
Break
Case 40://Down ↓
var arr = $.fn.getfocus ();
var rowIndex = arr[0] + 1;
$.fn.setfocus ({rowindex:rowindex, colindex:arr[1]});
$.fn.setcellsfocus ();
Break
Default
Break
}
});
$ (' #mytbl '). DynamicTable ({
Rowcount:3,//Add number of rows
Identity:1,//1th column automatic numbering
Arrfocus: [2, 1],//first cell set to focus
Rowtmplate:rowtmplate//Row template
});
$ (' #mytbl '). Bindevent ({
EventName: "Click",
Colindex:1,
Fn:alertmsg
}); Default to first column binding click event
$ (' #mytbl '). Setcellsfocus (); Set first cell to focus
$ (' #mytbl '). DeleteRow (); Default to 6th column binding Delete Event
$ (' #mytbl '). Autofilldata ({colindex:2, fn:getdata}); Automatically populate the second column binding with data by default
$ (' #mytbl '). Identity ({colindex:1}); Automatically sort the first column by default
$ (' #mytbl '). ValidationText ({reg:/^ ((\d+\.\d{2}) |\d+) $/, Colindex:5, defalutvalue:0.00}); Add validation to the second column by default (only money format can be entered)
});
Add rows
function AddRow (count) {
$ (' #mytbl '). AddRow ({rowcount:count});
$ (' #mytbl '). Identity ();
$.fn.deleterow ();
}
Get Auto Populate data
function GetData (key) {
var arr = [];
Arrfoucs = $.fn.getfocus ();
$.ajax ({
Type: "Post",
Async:false,//control synchronization
URL: "Getdata.ashx",
DataType: "JSON",
Cache:false,
Success:function (data) {
var idx = arrfoucs[0]-2;
Arr.push (data[idx].id);
Arr.push (Data[idx]. Name);
Arr.push (Data[idx]. Code);
Arr.push (Data[idx]. Units);
Arr.push (Data[idx]. Price);
},
Error:function (Err) {
alert (ERR);
}
});
$.fn.setcellsfocus ({rowindex:arrfoucs[0], colindex:4});
return arr;
}
function Alertmsg () {
Arrfoucs = $.fn.getfocus ();
Alert (' You clicked the coordinates x: ' +arrfoucs[0]+ ' Y: ' +arrfoucs[1]+ ' cells ');
}
</script>
<body>
<form id= "Form1" runat= "Server" >
<div>
<table cellpadding= "0" cellspacing= "0" class= "tablestyle1" id= "Mytbl" >
<tr>
<TD class= "Tabledata" > Serial number </td>
<TD class= "Tabledata" > Product name </td>
<TD class= "Tabledata" > Product Code </td>
<TD class= "tabledata" > Unit </td>
<TD class= "Tabledata" > Price </td>
<TD class= "Tabledata" ><a href= "#" onclick= "AddRow (5);" > Add 5 lines </a></td>
</tr>
</table>
<input type= "button" value= "gets the value" onclick= "Javascript:alert ($.fn.getvalue ({}));"/>
</div>
</form>
</body>
Jquery. Dynamictable.js
Copy Code code as follows:
<reference path= "Jquery-1.3.2-vsdoc2.js"/>
2
3 (function ($) {
4 var rowtmplate = "";
5 var arrfocus = [];
6
7 $.fn. DynamicTable = function (options) {//define plug-in name, here for USERCP
8 var deafult = {
9//The following are the properties of the plug-in and their default values
Rowcount:5,//Add number of rows
Identity:1,//1th column automatic numbering
Arrfocus: [2, 1],//first cell set to focus
Rowtmplate: ""//Row template
};
var ops = $.extend (deafult, Options);
Rowtmplate = ops.rowtmplate;
Arrfocus = Ops.arrfocus;
$ (this). AddRow (Ops.rowcount);
};
/* Add multiple lines to the last line of the table by using the row template * *
/*count--add number of lines *
$.fn.addrow = function (options) {
var Deafult = {
Rowcount:5
};
var ops = $.extend (deafult, Options);
var rowdata = "";
var count = Ops.rowcount;
for (var i = 1; I <= count; i++) {
RowData + = Rowtmplate;
}
$ (this). Find (' Tr:last-child '). After (RowData);
Cellsfocus ();
};
/* Dynamically bind event to a column, execute FN function when event is triggered.
/*eventname--event name; colindex--column index (starting from 1); fn--Trigger Function * *
$.fn. bindevent = function (options) {
var Deafult = {
EventName: ' Click ',
Colindex:1,
Fn:function () {alert (' You clicked this cell! ')}
};
var ops = $.extend (deafult, Options);
EventName = Ops.eventname;
Colindex = Ops.colindex;
fn = Ops.fn;
$ ("tr:gt (0) td:nth-child (" + Colindex + ")"). Bind (EventName, FN);
};
/* Click to delete an event for a column binding order * *
/*colindex--column index (starting from 1) */
$.fn.deleterow = function (options) {
var Deafult = {
Colindex:6
};
var ops = $.extend (deafult, Options);
var colindex = Ops.colindex;
$ ("tr:gt (0) td:nth-child (" + Colindex + ")"). Bind ("click", Function () {
var obj = $ (this). parent (); Get TR Child Node object
if (Confirm (') are you sure you want to delete it? '))
Obj.remove ();
});
};
/* Automatically fills the specified column with the serial number * *
/*colindex--column index (starting from 1) */
$.fn. Identity = function (options) {
var Deafult = {
Colindex:1
};
var ops = $.extend (deafult, Options);
var colindex = Ops.colindex;
var i = 1;
$ ("Td:nth-child (" + Colindex + ")"). Find (' input '). each (function () {
$ (this). attr (' value ', i)
i++;
});
};
/* Get focus cell coordinates * *
$.fn.getfocus = function () {
return arrfocus;
};
/* Set Focus cell coordinates * *
/*rowindex--row index (starting from 1), colindex--column index (starting from 1) */
$.fn.setfocus = function (options) {
var Deafult = {
Rowindex:2,
Colindex:1
};
var ops = $.extend (deafult, Options);
var rowIndex = Ops.rowindex;
var colindex = Ops.colindex;
Arrfocus[0] = RowIndex;
ARRFOCUS[1] = Colindex;
};
/* When entering data in a cell, press ENTER to automatically retrieve data from the background to the row corresponding to the column as entered.
/*colindex--The first few columns enter data to trigger an event by pressing the ENTER key; fn--callback function with parameters/
$.fn. Autofilldata = function (options) {
Colindex = Options.colindex;
fn = Options.fn;
$ ("Td:nth-child (" + Colindex + ")"). Bind ("KeyUp", function () {
var obj = $ (this). parent (); Get TR Child Node object
$ (this). Find (' input '). each (function () {
if (Event.keycode = = 13) {
var VL = $ (this). Val ();
var arr = new Array ();
arr = fn (VL);
var i = 0;
Obj.find ("TD"). each (function () {
$ (this). Find ("input"). each (function () {
$ (this). attr (' value ', arr[i]);
i++;
});
});
}
});
});
};
/* Set a cell as focus * *
/*rowindex--row index (starting from 1), colindex--column index (starting from 1) */
$.fn.setcellsfocus = function (options) {
var Deafult = {
Rowindex:arrfocus[0],
COLINDEX:ARRFOCUS[1]
};
var ops = $.extend (deafult, Options);
var rowIndex = Ops.rowindex;
var colindex = Ops.colindex;
$ ("Tr:nth-child + RowIndex +") td:nth-child ("+ Colindex +")). each (function () {
$ (this). Find (' input '). each (function () {
$ (this) [0].focus ();
$ (this). attr (' Value ', $ (this). attr (' value '));
Arrfocus = [];
Arrfocus.push (RowIndex);
Arrfocus.push (Colindex); Update Focus Array Value
});
});
};
/* Set a cell text value to selected * *
/*rowindex--row index (starting from 1), colindex--column index (starting from 1) */
$.fn.setcellsselect = function (options) {
var Deafult = {
Rowindex:arrfocus[0],
COLINDEX:ARRFOCUS[1]
};
var ops = $.extend (deafult, Options);
var rowIndex = Ops.rowindex;
var colindex = Ops.colindex;
$ ("Tr:nth-child + RowIndex +") td:nth-child ("+ Colindex +")). each (function () {
$ (this). Find (' input '). each (function () {
$ (this) [0].select ();
});
});
};
/* A cell to add validation function/*
/*reg--regular expression; colindex--column index (starting from 1);d efaultvalue--validation failed default to cell assignment * *
$.fn.validationtext = function (options) {
var Deafult = {
Reg:/^ ((\d+\.\d{2}) |\d+) $/,
Colindex:2,
defaultvalue:0
};
var ops = $.extend (deafult, Options);
var reg = Ops.reg;
var colindex = Ops.colindex;
var defaultvalue = Ops.defaultvalue;
$ ("tr:gt (0) td:nth-child (" + Colindex + ")"). each (function () {
$ (this). Find (' input '). each (function () {
Verify
$ (this). bind (' blur ', function () {
var VL = $ (this). attr (' value ');
if (!reg.test (VL))
$ (this). attr (' value ', defaultvalue);
});
});
});
};
/* Get the value in the table * *
$.fn.getvalue = function (options) {
var Deafult = {
rowindex:0,//row coordinates (starting from 2)
colindex:0//column coordinates (starting from 1)
};
var ops = $.extend (deafult, Options);
RowIndex = Ops.rowindex;
Colindex = Ops.colindex;
var val = "";
if (RowIndex = = 0) {//Get data for all rows
$ (' tr:gt (0) '). each (function () {
$ (this). FIND ("TD"). each (function () {
$ (this). Find ("input"). each (function () {
Val + = $ (this). attr (' value ') + "&";
});
});
val = val.substring (0, val.length-1) + "|";
});
}
else {
if (Colindex = = 0) {//Get a row of data
$ (' tr:nth-child (' + rowIndex + ') '). each (function () {
$ (this). FIND ("TD"). each (function () {
$ (this). Find ("input"). each (function () {
Val + = $ (this). attr (' value ') + "&";
});
});
val = val.substring (0, val.length-1) + "|";
});
}
else {//Get the value of a cell
$ ("Tr:nth-child + RowIndex +") td:nth-child ("+ Colindex +")). each (function () {
$ (this). Find (' input '). each (function () {
Val + + $ (this). attr (' value ');
});
});
}
}
return Val;
};
/* The focus is updated after a cell gets the focus.
function Cellsfocus () {
var ColCount = $ ("Tr:nth-child (1) TD"). Size (); Get how many cells are in total per row
$ ("TR:GT (0) TD"). each (function () {
var obj = $ (this);
$ (this). Find (' input '). each (function () {
$ (this). Bind (' Focus ', function () {
var celltotal = $ (' TD '). index (obj); Get the index of a cell
Arrfocus[0] = parseint (celltotal/colcount) + 1; First few lines
ARRFOCUS[1] = celltotal% colcount + 1; First few columns
});
});
});
};
}) (JQuery);
Getdata.ashx
Copy Code code as follows:
Using System;
Using System.Collections.Generic;
Using System.Linq;
Using System.Web;
Using System.Web.Services;
Namespace table
{
<summary>
Summary description of $codebehindclassname $
</summary>
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = wsiprofiles.basicprofile1_1)]
public class Getdata:ihttphandler
{
public void ProcessRequest (HttpContext context)
{
Context. Response.Clear ();
String value = GetResult ();
Context. Response.Write (value);
Context. Response.End ();
}
private String GetResult ()
{
string result = String. Empty;
result = @ "
[{"" id "": "" 1 "", "" Name "": "" green Tea "", "" Code "": "" 1371 "", "" Units "" ":" Jin "", "" Price "": "" 200 ""},
{"" id "": "" 2 "", "" Name "": "" black tea "", "" Code "": "" 1372 "", "" Units "": "" Jin "", "" Price "": "" 300 ""},
{"" id "": "" 3 "," "Name": "" Tea Set "," "Code" ":" "1373" "," "Units" ":" "", "" Price "": "" 20000 ""},
{"" id "": "" 4 "", "" Name "": "" Tieguanyin "", "" Code "": "" 1374 "", "" Units "": "" "", "" Price "": "" 400 ""},
{"" id "": "" 5 "", "" Name "": "" tea Bag "", "" Code "": "" 1375 "", "" Units "": "" box "", "" Price "": "" 500 ""},
{"" id "": "" 6 "", "" Name "": "" Tea Food "", "" Code "": "" 1376 "", "" Units "": "" box "", "" Price "": "" 400 ""},
{"" id "": "" 7 "", "" Name "": "" "" "" "", "" "," "" "", "" "" "," "1377" "," "Units" "", "" "" "", "" Price "": "100" "}];
return result;
}
public bool IsReusable
{
Get
{
return false;
}
}
}
}
Style2.css
Copy Code code as follows:
/*----------page style definition----------* *
Body
{
Background-color: #ffffff;
margin:0px;
font-size:10pt; /* Font Size * *
Font-family:verdana; /* Font Name * *
}
/*----------Text link-the normal status of the link----------* *
a:link {
Color: #0000FF;
Text-decoration:none;}
/*----------text link-Access link----------* *
a:visited {
COLOR: #0000FF;
Text-decoration:none}
/*----------text link-Active link----------* *
a:active {
COLOR: #3333ff;
Text-decoration:none}
/*----------Text link-the pointer----------on the link * *
a:hover {
COLOR: #ff0000;
Text-decoration:underline;}
/*----------Table Style 1 (normal form)----------* *
. tablestyle1{
font-size:9pt; /* The font size in the table * *
width:100%; /* Table Width * *
border:0px none; /* Table Border Width * *
Background-color: #0077B2; /* Form Line Color *
Cellspacing:expression (this.cellspacing=1); /* The distance between two cells * *
Cellpadding:expression (this.cellpadding=3); }
. Tabledata {
BACKGROUND: #FFFFFF;
font-size:10pt;
}
Because I do not know how to upload the file so I have to post the code please forgive me!!!
