jquery_jquery に基づいてテーブルを動的に作成するためのプラグイン

早速、トピックの
テーブル関数に進みます。
1. 追加
3. 値の動的入力
5. focus
6. キーボードの左右のキーを使用してセルのフォーカスを制御します
7. セルに通常の検証関数を追加します

コードをコピーしますコードは次のとおりです:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="table.WebForm4" %>

序号

製品名

製品代価

单位

单价

追加 5 行

jquery.DynamicTable.js

コードをコピー コードは次のとおりです:

///
2
3 (function($) {
4 var rowtmplate = " ";
5 var arrFocus = [];
6
7 $.fn.DynamicTable = function(options) { //プラグインの名前を定義します。ここでは userCp
8 var deafult = {
9 //以下はプラグインのプロパティとそのデフォルト値です
rowCount: 5, //行数を追加します
identity: 1, //最初の列は自動的に番号が付けられます
arrFocus: [2, 1 ], //最初のセルはフォーカスとして設定されます
rowTmplate: "" //行テンプレート
};
var ops = $.extend(default,
rowtmplate = ops.rowTmplate;
$(this).addRow(ops.rowCount);行テンプレートを使用したテーブルの最後の行*/
/*count--行数の追加*/
$.fn.addRow = function(options) {
var deafult = {
rowCount : 5
};
var ops = $.extend(default, options);
var count = ops.rowCount; ; i rowData = rowtmplate;
$(this).find('tr:last-child').after(rowData); );
};
/*イベントを列にバインドし、イベントがトリガーされたときに fn 関数を実行します*/
/*eventName -- イベント名 (開始) 1); fn--trigger function*/
$. fn.BindEvent = function(options) {
var deafult = {
eventName: 'click',
colIndex: 1,
fn: function() { alter('このユニット グリッドをクリックしました!') }
};
var ops = $.extend(default, options);
eventName = ops.eventName; >colIndex = ops.colIndex;
fn = ops.fn; >};
/*特定の列に順序をバインド 削除イベントをクリック*/
/*colIndex--列インデックス (1 から開始)*/
$.fn.deleteRow = function(options) {
var deafult = {
colIndex: 6
};
var ops = $.extend(default, options);
var ColIndex = ops.colIndex; :gt(0) td:nth-child("colIndex " )").bind("click", function() {
var obj = $(this).parent(); //tr 子ノードを取得object
if (confirm('削除してもよろしいですか?'))
obj.remove();
});
}/*指定された列のシリアル番号を自動的に入力します*/
/*colIndex--列インデックス(1 から開始)*/
$.fn.Identity = function(options) {
var deafult = {
colIndex: 1
}; , オプション);
varcolIndex = ops.colIndex;
$("td:nth-child("colIndex")").find('input') function() {
$(this).attr('value', i)
i ;
});
/*フォーカスセルの座標を取得します*/
$.fn .getFocus = function() {
return arrFocus;
/*フォーカス セルの座標を設定します*/
/*rowIndex (1 から始まります); -column インデックス (1 から開始)*/
$.fn.setFocus = function(options) {
var deafult = {
rowIndex: 2,
colIndex: 1
}; 🎜> var ops = $.extend(default, options);
var rowIndex = ops.colIndex;
arrFocus[0] = rowIndex; ] =colIndex;
};
/*データがセルに入力されると、Enter キーを押すと、データが背景から自動的に取得され、入力された値に従って行の対応する列に入力されます。 */
/*colIndex-- 入力データのどの列で ​​Enter キーを押してイベントをトリガーします; fn-- パラメーター付きのコールバック関数*/
$.fn.AutoFillData = function(options) {
colIndex = options.colIndex;
fn = options .fn;
$("td:nth-child("colIndex ")").bind("keyup", function() {
var obj = $(this).parent(); // tr 子ノード オブジェクトを取得します
$(this).find('input').each(function() {
if (event.keyCode == 13) ) {
var vl = $(this).val ();
var arr = new Array();
var i = 0; .find("td").each(function() {
$(this).find("input").each(function() {
$(this).attr('value', arr [i]);
} )
}); cell as focus*/
/*rowIndex- - 行インデックス (1 から開始);colIndex--列インデックス (1 から開始)*/
$.fn.setCellsFocus = function(options) {
var deafult = {
rowIndex: arrFocus[0 ],
colIndex: arrFocus[1]
};
var ops = $.extend(default, options); .rowIndex;
varcolIndex = 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(colIndex); ;
});
/*特定のセルのテキスト値を選択された状態に設定します*/
/*rowIndex (1 から開始);列インデックス (1 から開始)*/
$. fn.setCellsSelect = function(options) {
var deafult = {
rowIndex: arrFocus[0],
colIndex: arrFocus[1]
};
var ops = $.extend(default, options);
var rowIndex = ops.colIndex; (" rowIndex ") td:nth-child("colIndex " )").each(function() {
$(this).find('input').each(function() {
$( this)[0].select();
} );
}/*特定のセルに検証関数を追加します*/
/*reg式;colIndex--列インデックス (1 から始まります);defaultValue--検証が失敗した場合にセルに割り当てられるデフォルト値*/
$.fn.validationText = function(options) {
var deafult = {
reg: /^((d .d{2})| d )$/,
colIndex: 2,
defaultValue: 0
};
var ops = $.extend(default) , オプション);
var reg = ops.colIndex;
var defaultValue = ops.defaultValue; child(" colIndex ")").each(function() {
$(this).find('input').each(function() {
//検証
$(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, //行座標 (2 から開始)
colIndex: 0 // 列座標 (1 から開始)
} ;
var ops = $.extend(default, options);
rowIndex = ops.colIndex;
var = ""; = 0) { //全行のデータを取得
$(' 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) { //データ行を取得します
$('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 { //値を取得するセルの
$("tr:nth-child(" rowIndex ") td:nth-child("colIndex ")").each(function() {
$(this).find('input ').each(function() {
val = $(this ).attr('value');
})
});
}
}
returnヴァル;
};
/*セルがフォーカスを取得した後にフォーカス座標を更新します*/
function CellsFocus() {
var colCount = $("tr:nth-child(1) td").size() / /各行にあるセルの数を取得します
$("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); 🎜>
コードをコピーします

コードは次のとおりです:

using System.Collections.Generic; using System。 Linq ; using System.Web; using System.Web.Services; { /// /// $codebehindclassname の概要$

///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
パブリック クラスgetData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.Clear();
string value = GetResult(); (値);
context.Response.End();
}
プライベート文字列 GetResult()
{
文字列結果 = string.Empty;
> [{""id"":""1"",""名前"":""緑茶"",""コード"":""1371"",""単位"":""jin" ", ""価格"":""200""},
{""id"":""2"",""名前"":""紅茶"",""コード"": ""1372 "",""単位"":""jin"",""価格"":""300""},
{""id"":""3"",""名前"": ""ティーセット"",""コード"":""1373"",""単位"":""台"",""価格"":""20000""},
{""id "":""4"",""名前"":""鉄観音"",""コード"":""1374"",""単位"":""ボトル""," "価格" ":""400""},
{""id"":""5"",""名前"":""ティーバッグ"",""コード"":""1375 "" ,""単位"":""ボックス"","価格"":""500""},
{""id"":""6"",""名前"": "" ティーフード""、""コード"":""1376""、""単位"":""ボックス""、"価格"":""400""}、
{"" id" ":""7"",""名前"":""包装袋"",""コード"":""1377"",""単位"":""箱"",""価格"" :""100""}]";
return result;
}
public bool IsReusable
{
get
{
return false;
}
}
}
}


style2.css




コードをコピー


コードは次のとおりです:


/* ---------- ページ スタイル定義---------- */

body
{
背景色:#ffffff;

MARGIN:0px; フォントサイズ: 10pt; フォントファミリー:Verdana; } / * ---------- テキストリンク - リンクの通常の状態 ---------- */ A:link { color: # 0000FF; テキスト装飾: なし;}

/* ---------- テキストリンク - 訪問済みリンク ---------- */

A:訪問済み{
COLOR : #0000FF;
TEXT-DECORATION: none}
/* ---------- テキストリンク - アクティブリンク ---------- */
A:active {
COLOR: #3333ff;
TEXT-DECORATION: none}
/* ---------- テキストリンク - ポインタはリンク上にあります -- ----- --- */
A:hover {
COLOR: #ff0000;
text-decoration: 下線;}
/* ----------表スタイル 1 (通常の表) ---------- */
.tablestyle1{
font-size: 9pt; /* 表内のフォント サイズ */
width: 100%; ; /* テーブルの幅* /
border: 0px none; /* テーブルの境界線の幅*/
background-color: #0077B2; /* テーブルの線の色*/
cellSpacing:expression(this.cellSpacing=) 1); /* 2 セル間の距離*/
cellPadding:expression(this.cellPadding=3); }
BACKGROUND: #FFFFFF;
}


ファイルのアップロード方法がわからないので、コードを投稿する必要があります。お許しください。 ！ ！