Home > Others

Jquery-based plug-in for dynamic table Creation

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Go straight to the topic,
Table function:
1. Add
2. Delete
3. Get the value
4. Dynamic Data Filling
5. dynamically set the focus
6. The upper and lower buttons on the keyboard control the cell focus.
7. Add Regular Expression verification for cells
WebForm4.aspx Copy codeThe Code is 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">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<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: // upload
Var arr = $. fn. getFocus ();
Var rowIndex = arr [0]-1;
$. Fn. setFocus ({rowIndex: rowIndex, colIndex: arr [1]});
$. Fn. setCellsFocus ();
Break;
Case 40: // lower limit
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 the number of rows
Identity: 1, // 1st column automatic number
ArrFocus: [2, 1], // set the first cell to focus
RowTmplate: rowtmplate // row Template
});
$ ('# Mytbl'). BindEvent ({
EventName: "click ",
ColIndex: 1,
Fn: alertMsg
}); // The click event is bound to the first column by default.
$ ('# Mytbl'). setCellsFocus (); // you can specify the focus of the first cell.
$ ('# Mytbl'). deleteRow (); // The deletion event is bound to column 6th by default.
$ ('# Mytbl'). AutoFillData ({colIndex: 2, fn: getData}); // by default, the second column is bound with auto-filled data.
$ ('# Mytbl'). Identity ({colIndex: 1}); // Automatically sorts the first column by default.
$ ('# Mytbl '). validationText ({reg:/^ (\ d + \. \ d {2}) | \ d +) $/, colIndex: 5, defalutValue: 0.00}); // Add verification to the second column by default (only the money format can be entered)
});
// Add rows
Function addRow (count ){
$ ('# Mytbl'). addRow ({rowCount: count });
$ ('# Mytbl'). Identity ();
$. Fn. deleteRow ();
}
// Obtain auto-filled 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 have clicked the coordinate X: '+ arrFoucs [0] + 'y:' + arrFoucs [1] + 'cell ');
}
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Table cellpadding = "0" cellspacing = "0" class = "tablestyle1" id = "mytbl">
<Tr>
<Td class = "TableData"> NO. </td>
<Td class = "TableData"> product name </td>
<Td class = "TableData"> product code </td>
<Td class = "TableData"> Unit </td>
<Td class = "TableData"> unit price </td>
<Td class = "TableData"> <a href = "#" onclick = "addRow (5);"> Add 5 rows </a> </td>
</Tr>
</Table>
<Input type = "button" value = "get value" onclick = "javascript: alert ($. fn. getValue ({});"/>
</Div>
</Form>
</Body>
</Html>

Jquery. DynamicTable. jsCopy codeThe Code is 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 the plug-in name. Here userCp
8 var deafult = {
9 // the attributes and default values of the plug-in are as follows:
RowCount: 5, // Add the number of rows
Identity: 1, // 1st column automatic number
ArrFocus: [2, 1], // set the first cell to focus
RowTmplate: "// row Template
};
Var ops = $. extend (deafult, options );
Rowtmplate = ops. rowTmplate;
ArrFocus = ops. arrFocus;
$ (This). addRow (ops. rowCount );
};
/* Add multiple rows to the end of the last row of the table using the row template */
/* Count -- Add rows */
$. 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 events to a column, and execute the fn function when the 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 );
};
/* Bind a column and click Delete event */
/* 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 the tr subnode object
If (confirm ('Are you sure you want to delete it? '))
Obj. remove ();
});
};
/* Automatically fill in the sequence number for the specified column */
/* 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 ++;
});
};
/* Obtain the coordinates of the Focus cell */
$. Fn. getFocus = function (){
Return arrFocus;
};
/* Set the focal 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 data is input in a cell, press Enter to automatically retrieve data from the background based on the input value and fill in the corresponding column of the row */
/* ColIndex -- specifies the columns of input data and press Enter to trigger the event. 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 the tr subnode 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 to 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 the focus array value
});
});
};
/* Set the text value of a cell to the selected status */
/* 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 ();
});
});
};
/* Add a verification function for a cell */
/* Reg -- Regular Expression; colIndex -- column index (starting from 1); defaultValue -- A value is assigned to the cell by default when verification fails */
$. 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 );
});
});
});
};
/* Obtain the value in the table */
$. Fn. getValue = function (options ){
Var deafult = {
RowIndex: 0, // line coordinate (starting from 2)
ColIndex: 0 // column coordinate (starting from 1)
};
Var ops = $. extend (deafult, options );
RowIndex = ops. rowIndex;
ColIndex = ops. colIndex;
Var val = "";
If (rowIndex = 0) {// obtain data of 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) {// obtain 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;
};
/* Update the focal coordinate after a cell obtains the Focal Point */
Function CellsFocus (){
Var colCount = $ ("tr: nth-child (1) td"). size (); // obtain the total number of cells in each row
$ ("Tr: gt (0) td"). each (function (){
Var obj = $ (this );
$ (This). find ('input'). each (function (){
$ (This). bind ('focal ', function (){
Var cellTotal = $ ('td '). index (obj); // gets the index of a cell.
ArrFocus [0] = parseInt (cellTotal/colCount) + 1; // number of rows
ArrFocus [1] = cellTotal % colCount + 1; // column number
});
});
});
};
}) (JQuery );

GetData. ashxCopy codeThe Code is as follows: using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Web. Services;
Namespace table
{
/// <Summary>
/// $ Codebehindclassname $ abstract description
/// </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 "": "" Bottle "", "" Price "": "400 ""},
{"" Id "": "5" "," "Name": "tea bags" "," "Code": "1375 "", "" Units "": "" box "", "" Price "": "500 ""},
{"" Id "": "6" "," "Name": "" tea "", "" Code ":" 1376 "", "" Units "": "" box "", "" Price "": "400 ""},
{"" Id "": "7" "," "Name": "" bags "", "" Code ":" 1377 "", "" Units "": "" box "", "" Price "": "100" "}]";
Return result;
}
Public bool IsReusable
{
Get
{
Return false;
}
}
}
}

Style2.cssCopy codeThe Code is as follows:/* ---------- page style definition ----------*/
Body
{
Background-color: # ffffff;
MARGIN: 0px;
Font-size: 10pt;/* font size */
Font-family: Verdana;/* font name */
}
/* ---------- Text link-normal state of the link ----------*/
A: link {
Color: # 0000FF;
TEXT-DECORATION: none ;}
/* ---------- Text link-accessed link ----------*/
A: visited {
COLOR: # 0000FF;
TEXT-DECORATION: none}
/* ---------- Text link-active link ----------*/
A: active {
COLOR: # 3333ff;
TEXT-DECORATION: none}
/* ---------- Text link-pointer on link ----------*/
A: hover {
COLOR: # ff0000;
Text-decoration: underline ;}
/* ---------- Table style 1 (common table )----------*/
. Tablestyle1 {
Font-size: 9pt;/* font size in the table */
Width: 100%;/* Table width */
Border: 0px none;/* border width of the table */
Background-color: #0077B2;/* Table Line color */
CellSpacing: expression (this. cellSpacing = 1);/* distance between two cells */
CellPadding: expression (this. cellPadding = 3 );}
. TableData {
BACKGROUND: # FFFFFF;
FONT-SIZE: 10pt;
}

I don't know how to upload files, so I have to post the code. Sorry !!!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
dynamic html page creation php dynamic page creation create dynamic table in jasper report dynamic table php angularjs dynamic table example form creation in wordpress plug in microphone for laptop

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More