基于jquery的動(dòng)態(tài)創(chuàng)建表格的插件
更新時(shí)間：2011年04月05日 20:40:55 作者：
工作快一年了,最近學(xué)習(xí)jquery，對(duì)jquery很感興趣。第一次寫(xiě)博客，有不足之處還請(qǐng)各位拍磚。
廢話少說(shuō)直接進(jìn)入主題，
表格功能:
1、添加
2、刪除
3、獲取值
4、動(dòng)態(tài)填充數(shù)據(jù)
5、動(dòng)態(tài)設(shè)置焦點(diǎn)
6、鍵盤(pán)左右上下鍵控制單元格焦點(diǎn)
7、單元格添加正則驗(yàn)證功能
WebForm4.aspx
<%@ 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='#' >刪除</a></td></tr>";
$(document).ready(function() {
$(this).bind('keyup', function(e) {
switch (e.keyCode) {
case 38: //上 ↑
var arr = $.fn.getFocus();
var rowIndex = arr[0] - 1;
$.fn.setFocus({ rowIndex: rowIndex, colIndex: arr[1] });
$.fn.setCellsFocus();
break;
case 40: //下 ↓
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, //添加行數(shù)
identity: 1, //第1列自動(dòng)編號(hào)
arrFocus: [2, 1], //第一個(gè)單元格設(shè)置為焦點(diǎn)
rowTmplate: rowtmplate //行模版
});
$('#mytbl').BindEvent({
eventName: "click",
colIndex: 1,
fn: alertMsg
}); //默認(rèn)給第一列綁定click事件
$('#mytbl').setCellsFocus(); //設(shè)置第一個(gè)單元格為焦點(diǎn)
$('#mytbl').deleteRow(); //默認(rèn)給第6列綁定刪除事件
$('#mytbl').AutoFillData({ colIndex: 2, fn: getData }); //默認(rèn)給第二列綁定自動(dòng)填充數(shù)據(jù)
$('#mytbl').Identity({ colIndex: 1 }); //默認(rèn)給第一列自動(dòng)排序
$('#mytbl').validationText({ reg: /^((\d+\.\d{2})|\d+)$/, colIndex: 5, defalutValue: 0.00 }); //默認(rèn)給第二列添加驗(yàn)證(只能輸入money格式)
});
//添加行
function addRow(count) {
$('#mytbl').addRow({ rowCount: count });
$('#mytbl').Identity();
$.fn.deleteRow();
}
//獲取自動(dòng)填充數(shù)據(jù)
function getData(key) {
var arr = [];
arrFoucs = $.fn.getFocus();
$.ajax({
type: "post",
async: false, //控制同步
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('你單擊了坐標(biāo)X：'+arrFoucs[0]+' Y：'+arrFoucs[1]+'的單元格');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table cellpadding="0" cellspacing="0" class="tablestyle1" id="mytbl">
<tr>
<td class="TableData">序號(hào)</td>
<td class="TableData">產(chǎn)品名稱(chēng)</td>
<td class="TableData">產(chǎn)品代碼</td>
<td class="TableData">單位</td>
<td class="TableData">單價(jià)</td>
<td class="TableData"><a href="#" onclick="addRow(5);">添加5行</a></td>
</tr>
</table>
<input type="button" value="獲取值" onclick="javascript:alert($.fn.getValue({}));" />
</div>
</form>
</body>
</html>
jquery.DynamicTable.js
///<reference path="jquery-1.3.2-vsdoc2.js" />
2
3 (function($) {
4 var rowtmplate = "";
5 var arrFocus = [];
6
7 $.fn.DynamicTable = function(options) { //定義插件的名稱(chēng)，這里為userCp
8 var deafult = {
9 //以下為該插件的屬性及其默認(rèn)值
rowCount: 5, //添加行數(shù)
identity: 1, //第1列自動(dòng)編號(hào)
arrFocus: [2, 1], //第一個(gè)單元格設(shè)置為焦點(diǎn)
rowTmplate: "" //行模版
};
var ops = $.extend(deafult, options);
rowtmplate = ops.rowTmplate;
arrFocus = ops.arrFocus;
$(this).addRow(ops.rowCount);
};
/*通過(guò)行模版添加多行至表格最后一行后面*/
/*count--添加行數(shù)*/
$.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();
};
/*動(dòng)態(tài)給某列綁定事件,事件被觸發(fā)時(shí)執(zhí)行fn函數(shù)*/
/*eventName--事件名稱(chēng);colIndex--列索引(從1開(kāi)始);fn--觸發(fā)函數(shù)*/
$.fn.BindEvent = function(options) {
var deafult = {
eventName: 'click',
colIndex: 1,
fn: function() { alert('你單擊了此單元格!') }
};
var ops = $.extend(deafult, options);
eventName = ops.eventName;
colIndex = ops.colIndex;
fn = ops.fn;
$("tr:gt(0) td:nth-child(" + colIndex + ")").bind(eventName, fn);
};
/*給某列綁定單擊刪除事件*/
/*colIndex--列索引(從1開(kāi)始)*/
$.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(); //獲取tr子節(jié)點(diǎn)對(duì)象
if (confirm('您確定要?jiǎng)h除嗎？'))
obj.remove();
});
};
/*自動(dòng)給指定列填充序號(hào)*/
/*colIndex--列索引(從1開(kāi)始)*/
$.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++;
});
};
/*獲取焦點(diǎn)單元格坐標(biāo)*/
$.fn.getFocus = function() {
return arrFocus;
};
/*設(shè)置焦點(diǎn)單元格坐標(biāo)*/
/*rowIndex--行索引(從1開(kāi)始);colIndex--列索引(從1開(kāi)始)*/
$.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;
};
/*當(dāng)某個(gè)單元格中輸入數(shù)據(jù),按Enter鍵后自動(dòng)根據(jù)輸入的值從后臺(tái)檢索數(shù)據(jù)填充到該行對(duì)應(yīng)列*/
/*colIndex--第幾列輸入數(shù)據(jù)按Enter鍵觸發(fā)事件;fn--帶參的回調(diào)函數(shù)*/
$.fn.AutoFillData = function(options) {
colIndex = options.colIndex;
fn = options.fn;
$("td:nth-child(" + colIndex + ")").bind("keyup", function() {
var obj = $(this).parent(); //獲取tr子節(jié)點(diǎn)對(duì)象
$(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++;
});
});
}
});
});
};
/*設(shè)置某個(gè)單元格為焦點(diǎn)*/
/*rowIndex--行索引(從1開(kāi)始);colIndex--列索引(從1開(kāi)始)*/
$.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); //更新焦點(diǎn)數(shù)組值
});
});
};
/*設(shè)置某個(gè)單元格文本值為選中狀態(tài)*/
/*rowIndex--行索引(從1開(kāi)始);colIndex--列索引(從1開(kāi)始)*/
$.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();
});
});
};
/*某個(gè)單元格添加驗(yàn)證功能*/
/*reg--正則表達(dá)式;colIndex--列索引(從1開(kāi)始);defaultValue--驗(yàn)證失敗默認(rèn)給單元格賦值*/
$.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() {
//驗(yàn)證
$(this).bind('blur', function() {
var vl = $(this).attr('value');
if (!reg.test(vl))
$(this).attr('value', defaultValue);
});
});
});
};
/*獲取表格中的值*/
$.fn.getValue = function(options) {
var deafult = {
rowIndex: 0, //行坐標(biāo)(從2開(kāi)始)
colIndex: 0 //列坐標(biāo)(從1開(kāi)始)
};
var ops = $.extend(deafult, options);
rowIndex = ops.rowIndex;
colIndex = ops.colIndex;
var val = "";
if (rowIndex == 0) { //獲取所有行的數(shù)據(jù)
$('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) { //獲取某行數(shù)據(jù)
$('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 { //獲取某個(gè)單元格的值
$("tr:nth-child(" + rowIndex + ") td:nth-child(" + colIndex + ")").each(function() {
$(this).find('input').each(function() {
val += $(this).attr('value');
});
});
}
}
return val;
};
/*某個(gè)單元格獲取焦點(diǎn)后更新焦點(diǎn)坐標(biāo)*/
function CellsFocus() {
var colCount = $("tr:nth-child(1) td").size(); //獲取每行共有多少個(gè)單元格
$("tr:gt(0) td").each(function() {
var obj = $(this);
$(this).find('input').each(function() {
$(this).bind('focus', function() {
var cellTotal = $('td').index(obj); //獲取某單元格的索引
arrFocus[0] = parseInt(cellTotal / colCount) + 1; //第幾行
arrFocus[1] = cellTotal % colCount + 1; //第幾列
});
});
});
};
})(jQuery);
getData.ashx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace table
{
/// <summary>
/// $codebehindclassname$ 的摘要說(shuō)明
/// </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"":""綠茶"",""Code"":""1371"",""Units"":""斤"",""Price"":""200""},
{""id"":""2"",""Name"":""紅茶"",""Code"":""1372"",""Units"":""斤"",""Price"":""300""},
{""id"":""3"",""Name"":""茶具"",""Code"":""1373"",""Units"":""臺(tái)"",""Price"":""20000""},
{""id"":""4"",""Name"":""鐵觀音"",""Code"":""1374"",""Units"":""瓶"",""Price"":""400""},
{""id"":""5"",""Name"":""袋泡茶"",""Code"":""1375"",""Units"":""盒"",""Price"":""500""},
{""id"":""6"",""Name"":""茶食品"",""Code"":""1376"",""Units"":""盒"",""Price"":""400""},
{""id"":""7"",""Name"":""包裝袋"",""Code"":""1377"",""Units"":""盒"",""Price"":""100""}]";
return result;
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
style2.css
/* ---------- 頁(yè)面樣式定義 ---------- */
body
{
background-color:#ffffff;
MARGIN:0px;
font-size: 10pt; /* 字體大小 */
font-family:Verdana; /* 字體名稱(chēng) */
}
/* ---------- 文字鏈接 － 鏈接的普通狀態(tài) ---------- */
A:link {
color: #0000FF;
TEXT-DECORATION: none;}
/* ---------- 文字鏈接 － 已被訪問(wèn)鏈接 ---------- */
A:visited {
COLOR: #0000FF;
TEXT-DECORATION: none}
/* ---------- 文字鏈接 － 處于活動(dòng)狀態(tài)鏈接 ---------- */
A:active {
COLOR: #3333ff;
TEXT-DECORATION: none}
/* ---------- 文字鏈接 － 指針在鏈接上 ---------- */
A:hover {
COLOR: #ff0000;
text-decoration: underline;}
/* ---------- 表格樣式1（普通表格） ---------- */
.tablestyle1{
font-size: 9pt; /* 表格內(nèi)字體大小 */
width: 100%; /* 表格寬度 */
border: 0px none; /* 表格邊框?qū)挾?*/
background-color: #0077B2; /* 表格線顏色 */
cellSpacing:expression(this.cellSpacing=1); /* 兩個(gè)單元格之間的距離 */
cellPadding:expression(this.cellPadding=3); }
.TableData {
BACKGROUND: #FFFFFF;
FONT-SIZE: 10pt;
}
由于不知道怎么上傳文件 所以只好把代碼貼出來(lái) 請(qǐng)各位見(jiàn)諒?。?！
表格功能:
1、添加
2、刪除
3、獲取值
4、動(dòng)態(tài)填充數(shù)據(jù)
5、動(dòng)態(tài)設(shè)置焦點(diǎn)
6、鍵盤(pán)左右上下鍵控制單元格焦點(diǎn)
7、單元格添加正則驗(yàn)證功能
WebForm4.aspx
復(fù)制代碼 代碼如下:
<%@ 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='#' >刪除</a></td></tr>";
$(document).ready(function() {
$(this).bind('keyup', function(e) {
switch (e.keyCode) {
case 38: //上 ↑
var arr = $.fn.getFocus();
var rowIndex = arr[0] - 1;
$.fn.setFocus({ rowIndex: rowIndex, colIndex: arr[1] });
$.fn.setCellsFocus();
break;
case 40: //下 ↓
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, //添加行數(shù)
identity: 1, //第1列自動(dòng)編號(hào)
arrFocus: [2, 1], //第一個(gè)單元格設(shè)置為焦點(diǎn)
rowTmplate: rowtmplate //行模版
});
$('#mytbl').BindEvent({
eventName: "click",
colIndex: 1,
fn: alertMsg
}); //默認(rèn)給第一列綁定click事件
$('#mytbl').setCellsFocus(); //設(shè)置第一個(gè)單元格為焦點(diǎn)
$('#mytbl').deleteRow(); //默認(rèn)給第6列綁定刪除事件
$('#mytbl').AutoFillData({ colIndex: 2, fn: getData }); //默認(rèn)給第二列綁定自動(dòng)填充數(shù)據(jù)
$('#mytbl').Identity({ colIndex: 1 }); //默認(rèn)給第一列自動(dòng)排序
$('#mytbl').validationText({ reg: /^((\d+\.\d{2})|\d+)$/, colIndex: 5, defalutValue: 0.00 }); //默認(rèn)給第二列添加驗(yàn)證(只能輸入money格式)
});
//添加行
function addRow(count) {
$('#mytbl').addRow({ rowCount: count });
$('#mytbl').Identity();
$.fn.deleteRow();
}
//獲取自動(dòng)填充數(shù)據(jù)
function getData(key) {
var arr = [];
arrFoucs = $.fn.getFocus();
$.ajax({
type: "post",
async: false, //控制同步
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('你單擊了坐標(biāo)X：'+arrFoucs[0]+' Y：'+arrFoucs[1]+'的單元格');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table cellpadding="0" cellspacing="0" class="tablestyle1" id="mytbl">
<tr>
<td class="TableData">序號(hào)</td>
<td class="TableData">產(chǎn)品名稱(chēng)</td>
<td class="TableData">產(chǎn)品代碼</td>
<td class="TableData">單位</td>
<td class="TableData">單價(jià)</td>
<td class="TableData"><a href="#" onclick="addRow(5);">添加5行</a></td>
</tr>
</table>
<input type="button" value="獲取值" onclick="javascript:alert($.fn.getValue({}));" />
</div>
</form>
</body>
</html>
jquery.DynamicTable.js
復(fù)制代碼 代碼如下:
///<reference path="jquery-1.3.2-vsdoc2.js" />
2
3 (function($) {
4 var rowtmplate = "";
5 var arrFocus = [];
6
7 $.fn.DynamicTable = function(options) { //定義插件的名稱(chēng)，這里為userCp
8 var deafult = {
9 //以下為該插件的屬性及其默認(rèn)值
rowCount: 5, //添加行數(shù)
identity: 1, //第1列自動(dòng)編號(hào)
arrFocus: [2, 1], //第一個(gè)單元格設(shè)置為焦點(diǎn)
rowTmplate: "" //行模版
};
var ops = $.extend(deafult, options);
rowtmplate = ops.rowTmplate;
arrFocus = ops.arrFocus;
$(this).addRow(ops.rowCount);
};
/*通過(guò)行模版添加多行至表格最后一行后面*/
/*count--添加行數(shù)*/
$.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();
};
/*動(dòng)態(tài)給某列綁定事件,事件被觸發(fā)時(shí)執(zhí)行fn函數(shù)*/
/*eventName--事件名稱(chēng);colIndex--列索引(從1開(kāi)始);fn--觸發(fā)函數(shù)*/
$.fn.BindEvent = function(options) {
var deafult = {
eventName: 'click',
colIndex: 1,
fn: function() { alert('你單擊了此單元格!') }
};
var ops = $.extend(deafult, options);
eventName = ops.eventName;
colIndex = ops.colIndex;
fn = ops.fn;
$("tr:gt(0) td:nth-child(" + colIndex + ")").bind(eventName, fn);
};
/*給某列綁定單擊刪除事件*/
/*colIndex--列索引(從1開(kāi)始)*/
$.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(); //獲取tr子節(jié)點(diǎn)對(duì)象
if (confirm('您確定要?jiǎng)h除嗎？'))
obj.remove();
});
};
/*自動(dòng)給指定列填充序號(hào)*/
/*colIndex--列索引(從1開(kāi)始)*/
$.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++;
});
};
/*獲取焦點(diǎn)單元格坐標(biāo)*/
$.fn.getFocus = function() {
return arrFocus;
};
/*設(shè)置焦點(diǎn)單元格坐標(biāo)*/
/*rowIndex--行索引(從1開(kāi)始);colIndex--列索引(從1開(kāi)始)*/
$.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;
};
/*當(dāng)某個(gè)單元格中輸入數(shù)據(jù),按Enter鍵后自動(dòng)根據(jù)輸入的值從后臺(tái)檢索數(shù)據(jù)填充到該行對(duì)應(yīng)列*/
/*colIndex--第幾列輸入數(shù)據(jù)按Enter鍵觸發(fā)事件;fn--帶參的回調(diào)函數(shù)*/
$.fn.AutoFillData = function(options) {
colIndex = options.colIndex;
fn = options.fn;
$("td:nth-child(" + colIndex + ")").bind("keyup", function() {
var obj = $(this).parent(); //獲取tr子節(jié)點(diǎn)對(duì)象
$(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++;
});
});
}
});
});
};
/*設(shè)置某個(gè)單元格為焦點(diǎn)*/
/*rowIndex--行索引(從1開(kāi)始);colIndex--列索引(從1開(kāi)始)*/
$.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); //更新焦點(diǎn)數(shù)組值
});
});
};
/*設(shè)置某個(gè)單元格文本值為選中狀態(tài)*/
/*rowIndex--行索引(從1開(kāi)始);colIndex--列索引(從1開(kāi)始)*/
$.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();
});
});
};
/*某個(gè)單元格添加驗(yàn)證功能*/
/*reg--正則表達(dá)式;colIndex--列索引(從1開(kāi)始);defaultValue--驗(yàn)證失敗默認(rèn)給單元格賦值*/
$.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() {
//驗(yàn)證
$(this).bind('blur', function() {
var vl = $(this).attr('value');
if (!reg.test(vl))
$(this).attr('value', defaultValue);
});
});
});
};
/*獲取表格中的值*/
$.fn.getValue = function(options) {
var deafult = {
rowIndex: 0, //行坐標(biāo)(從2開(kāi)始)
colIndex: 0 //列坐標(biāo)(從1開(kāi)始)
};
var ops = $.extend(deafult, options);
rowIndex = ops.rowIndex;
colIndex = ops.colIndex;
var val = "";
if (rowIndex == 0) { //獲取所有行的數(shù)據(jù)
$('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) { //獲取某行數(shù)據(jù)
$('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 { //獲取某個(gè)單元格的值
$("tr:nth-child(" + rowIndex + ") td:nth-child(" + colIndex + ")").each(function() {
$(this).find('input').each(function() {
val += $(this).attr('value');
});
});
}
}
return val;
};
/*某個(gè)單元格獲取焦點(diǎn)后更新焦點(diǎn)坐標(biāo)*/
function CellsFocus() {
var colCount = $("tr:nth-child(1) td").size(); //獲取每行共有多少個(gè)單元格
$("tr:gt(0) td").each(function() {
var obj = $(this);
$(this).find('input').each(function() {
$(this).bind('focus', function() {
var cellTotal = $('td').index(obj); //獲取某單元格的索引
arrFocus[0] = parseInt(cellTotal / colCount) + 1; //第幾行
arrFocus[1] = cellTotal % colCount + 1; //第幾列
});
});
});
};
})(jQuery);
getData.ashx
復(fù)制代碼 代碼如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace table
{
/// <summary>
/// $codebehindclassname$ 的摘要說(shuō)明
/// </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"":""綠茶"",""Code"":""1371"",""Units"":""斤"",""Price"":""200""},
{""id"":""2"",""Name"":""紅茶"",""Code"":""1372"",""Units"":""斤"",""Price"":""300""},
{""id"":""3"",""Name"":""茶具"",""Code"":""1373"",""Units"":""臺(tái)"",""Price"":""20000""},
{""id"":""4"",""Name"":""鐵觀音"",""Code"":""1374"",""Units"":""瓶"",""Price"":""400""},
{""id"":""5"",""Name"":""袋泡茶"",""Code"":""1375"",""Units"":""盒"",""Price"":""500""},
{""id"":""6"",""Name"":""茶食品"",""Code"":""1376"",""Units"":""盒"",""Price"":""400""},
{""id"":""7"",""Name"":""包裝袋"",""Code"":""1377"",""Units"":""盒"",""Price"":""100""}]";
return result;
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
style2.css
復(fù)制代碼 代碼如下:
/* ---------- 頁(yè)面樣式定義 ---------- */
body
{
background-color:#ffffff;
MARGIN:0px;
font-size: 10pt; /* 字體大小 */
font-family:Verdana; /* 字體名稱(chēng) */
}
/* ---------- 文字鏈接 － 鏈接的普通狀態(tài) ---------- */
A:link {
color: #0000FF;
TEXT-DECORATION: none;}
/* ---------- 文字鏈接 － 已被訪問(wèn)鏈接 ---------- */
A:visited {
COLOR: #0000FF;
TEXT-DECORATION: none}
/* ---------- 文字鏈接 － 處于活動(dòng)狀態(tài)鏈接 ---------- */
A:active {
COLOR: #3333ff;
TEXT-DECORATION: none}
/* ---------- 文字鏈接 － 指針在鏈接上 ---------- */
A:hover {
COLOR: #ff0000;
text-decoration: underline;}
/* ---------- 表格樣式1（普通表格） ---------- */
.tablestyle1{
font-size: 9pt; /* 表格內(nèi)字體大小 */
width: 100%; /* 表格寬度 */
border: 0px none; /* 表格邊框?qū)挾?*/
background-color: #0077B2; /* 表格線顏色 */
cellSpacing:expression(this.cellSpacing=1); /* 兩個(gè)單元格之間的距離 */
cellPadding:expression(this.cellPadding=3); }
.TableData {
BACKGROUND: #FFFFFF;
FONT-SIZE: 10pt;
}
由于不知道怎么上傳文件 所以只好把代碼貼出來(lái) 請(qǐng)各位見(jiàn)諒?。?！
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法【測(cè)試可用】
- 原生JS和JQuery動(dòng)態(tài)添加、刪除表格行的方法
- JQuery動(dòng)態(tài)添加和刪除表格行的方法
- JQuery實(shí)現(xiàn)表格動(dòng)態(tài)增加行并對(duì)新行添加事件
- 基于jQuery的動(dòng)態(tài)表格插件
- JQuery Ajax動(dòng)態(tài)生成Table表格
- Jquery 動(dòng)態(tài)循環(huán)輸出表格具體方法
- jquery動(dòng)態(tài)增加刪除表格行的小例子
- jQuery實(shí)現(xiàn)html表格動(dòng)態(tài)添加新行的方法
- Jquery 動(dòng)態(tài)生成表格示例代碼
- jQuery實(shí)現(xiàn)的簡(jiǎn)單動(dòng)態(tài)添加、刪除表格功能示例
相關(guān)文章
jQuery實(shí)現(xiàn)Table分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)Table分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
jQuery實(shí)現(xiàn) 上升、下降、刪除、添加一行代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn) 上升、下降、刪除、添加一行代碼的實(shí)現(xiàn)方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
jQuery插件select2利用ajax高效查詢(xún)大數(shù)據(jù)列表（可搜索、可分頁(yè)）
select2是一款jQuery插件，是普通form表單select組件的升級(jí)版。 接下來(lái)通過(guò)本文給大家介紹jQuery插件select2利用ajax高效查詢(xún)大數(shù)據(jù)列表（可搜索、可分頁(yè)），需要的的朋友參考下吧2017-05-05
基于jQuery實(shí)現(xiàn)的單行公告活動(dòng)輪播效果
本文通過(guò)實(shí)例代碼給大家介紹了基于jQuery實(shí)現(xiàn)的單行公告活動(dòng)輪播效果，非常不錯(cuò)，代碼簡(jiǎn)單易懂，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08
jquery 判斷div show的狀態(tài)實(shí)例
下面小編就為大家?guī)?lái)一篇jquery 判斷div show的狀態(tài)實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-12-12
這篇文章主要介紹了jQuery語(yǔ)法小結(jié)(超實(shí)用)，涉及到j(luò)query語(yǔ)法相關(guān)知識(shí)，對(duì)jquery語(yǔ)法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序(圖文詳解)
DOM事件標(biāo)準(zhǔn)定義了兩種事件流，這兩種事件流有著顯著的不同并且可能對(duì)你的應(yīng)用有著相當(dāng)大的影響。這兩種事件流分別是捕獲和冒泡。和許多Web技術(shù)一樣，在它們成為標(biāo)準(zhǔn)之前，Netscape和微軟各自不同地實(shí)現(xiàn)了它們，下面介紹DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序2015-08-08
最近有一個(gè)活動(dòng)，其中的數(shù)據(jù)需要和純靜態(tài)html網(wǎng)站進(jìn)行交互。但是由于兩個(gè)網(wǎng)站處于不同的域名下，而Ajax的應(yīng)用中，由于安全的問(wèn)題，瀏覽器默認(rèn)是不支持跨域調(diào)用的，最后選用了JQuery中的getJSON方法2010-12-12
超級(jí)有用的13個(gè)基于jQuery的內(nèi)容滾動(dòng)插件和教程
這篇文章與大家分享13個(gè)超級(jí)有用的 jQuery 內(nèi)容滾動(dòng)插件和教程。您可能經(jīng)常能看到一些網(wǎng)站上特色區(qū)域的內(nèi)容以滾動(dòng)方式變化，這是一種在有限的網(wǎng)頁(yè)空間內(nèi)展示更多內(nèi)容的良好方式，而且能吸引用戶(hù)注意力。2011-07-07
jQuery實(shí)現(xiàn)動(dòng)態(tài)加載(按需加載)javascript文件的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)加載(按需加載)javascript文件的方法,結(jié)合實(shí)例形式分析了jQuery根據(jù)調(diào)用函數(shù)按需動(dòng)態(tài)加載javascript文件相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05