jquery_jquery를 기반으로 테이블을 동적으로 생성하기 위한 플러그인-JS 튜토리얼-php.cn

더 이상 고민하지 말고 바로
테이블 함수:
추가 2. 삭제
값 가져오기
동적으로 설정 focus
6. 키보드의 왼쪽 및 오른쪽 키를 사용하여 셀 포커스 제어
7. 셀에 일반 유효성 검사 기능 추가
WebForm4.aspx

코드 복사코드는 다음과 같습니다.

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

<제목>

<본문>

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(deafult, options); 
rowtmplate = ops.rowTmplate; 
arrFocus = ops.arrFocus; 
$(this).addRow(ops.rowCount) 
}/* 행 템플릿을 통한 테이블의 마지막 행*/ 
/*count--행 개수 추가*/ 
$.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); ); 
}; 
/*Dynamic 이벤트를 열에 바인딩하고 이벤트가 트리거될 때 fn 함수를 실행합니다.*/ 
/*eventName--이벤트 이름(시작) 1); fn--트리거 함수*/ 
$.fn.BindEvent = function(options) { 
var deafult = { 
eventName: 'click', 
colIndex: 1, 
fn: function() { 경고('이 장치를 클릭했습니다!') } 
} 
var ops = $.extend(deafult, options) 
eventName = ops.eventName; >colIndex = ops.colIndex; 
fn = ops.fn; 
$("tr:gt(0) td:nth-child(" colIndex ")") 
}; 
/*특정 열에 순서 바인딩 삭제 이벤트 클릭*/ 
/*colIndex--열 인덱스(1부터 시작)*/ 
$.fn.deleteRow = function(options) { 
var deafult = { 
colIndex: 6 
}; 
var ops = $.extend(deafult, 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 
} 
var ops = $.extend(deafult , 옵션); 
var colIndex = ops.colIndex; 
var i = 1 
$("td:nth-child(" colIndex ")").find('input').each( function() { 
$(this).attr('value', i) 
i ; 
}) 
} 
/*초점 셀 좌표 가져오기*/ 
 $.fn .getFocus = function() { 
return arrFocus; 
}; 
/*포커스 셀 좌표 설정*/ 
/*rowIndex--행 인덱스(1부터 시작); -column Index(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[1 ] = colIndex; 
}; 
/*셀에 데이터를 입력할 때 Enter 키를 누르면 자동으로 백그라운드에서 데이터를 가져와 입력된 값에 따라 행의 해당 열에 채워집니다. */ 
/*colIndex-- 입력 데이터의 어느 열에서 Enter 키를 눌러 이벤트를 트리거할지 fn--매개변수가 있는 콜백 함수*/ 
$.fn.AutoFillData = function(options) { 
colIndex = options.colIndex; 
fn = 옵션 .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() 
arr = fn(vl) 
obj; .find("td").each(function() { 
$(this).find("input").each(function() { 
$(this).attr('value', arr [i]); 
} ); 
} 
}) 
}; 셀을 포커스로*/ 
/*rowIndex- -행 인덱스(1부터 시작);colIndex--열 인덱스(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); //포커스 배열 값 업데이트
}) ; 
}); 
}; 
/*특정 셀의 텍스트 값을 선택한 상태로 설정*/ 
/*rowIndex--행 인덱스(1부터 시작); 열 인덱스(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; (" rowIndex ") td:nth-child(" colIndex " )").each(function() { 
$(this).find('input').each(function() { 
$( this)[0].select(); 
} ); 
}); 
/*특정 셀에 유효성 검사 기능 추가*/ 
/*regular 표현식;colIndex--열 인덱스(1부터 시작); defaultValue-검증이 실패할 경우 셀에 할당되는 기본값*/ 
$.fn.validationText = function(options) { 
var deafult = { 
reg: /^((d .d{2})| d )$/, 
colIndex: 2, 
defaultValue: 0 
} 
var ops = $.extend(deafult , 옵션); 
var reg = ops.reg; 
var colIndex = ops.colIndex; 
var defaultValue = ops.defaultValue; child(" colIndex ")").each(function() { 
$(this).find('input').each(function() { 
//확인
$(this). 바인딩('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(deafult, options); 
rowIndex = ops.rowIndex; 
colIndex = ops.colIndex; 
if (rowIndex = = 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) "|" 
}) 
} 
if (colIndex == 0) { //데이터 행 가져오기
$('tr: nth-child(' rowIndex ')').each(function() { 
$(this).find("td"). Each(function() { 
$(this).find("input ").each(function() { 
val = $(this).attr('value') "&"; 
 }); 
}); 
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] = parsInt(cellTotal / colCount) 1; //어떤 행
arrFocus[1] = cellTotal % colCount 1; ); 
}); 
})(jQuery) 

코드 복사

코드는 다음과 같습니다. using System; using System.Collections.Generic using System. Linq ; 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.Write (값); 
context.Response.End(); 
} 
비공개 문자열 GetResult() 
{ 
string result = string.Empty; 
 > [{""id"":""1"",""이름"":""녹차"",""코드"":""1371"",""단위"":""jin" ", ""가격"":""200""}, 
{""id"":""2"",""이름"":""홍차"",""코드"": ""1372 "",""단위"":""jin"",""가격"":""300""}, 
{""id"":""3"",""이름 "": ""차 세트"",""코드"":""1373"",""단위"":""台"",""가격"":""20000""}, 
 {""id "":""4"",""이름"":""철관음"",""코드"":""1374"",""단위"":""병""," "가격" ":""400""}, 
{""id"":""5"",""이름"":""티백"",""코드"":""1375 "" ,""Units"":""Box"",""Price"":""500""}, 
{""id"":""6"",""이름"": "" 차 음식"",""코드"":""1376"",""단위"":""상자"",""가격"":""400""}, 
{"" id" ":""7"",""이름"":""포장 봉투"",""코드"":""1377"",""단위"":""상자"",""가격 "" :""100""}]"; 
결과 반환; 
} 
public bool IsReusable 
{ 
get 
{ 
 false 반환; 
} 
} 
} 
} 

 
style2.css 




코드 복사

코드는 다음과 같습니다.

/* ---------- 페이지 스타일 정의--------- */ body { 배경 색상:#ffffff; MARGIN:0px; 글꼴 크기: 10pt; /* 글꼴 크기*/

글꼴 이름*/

 } 
/ * ---------- 텍스트 링크 - 링크의 정상 상태 ---------- */ 
A:link { 
color: # 0000FF 
TEXT- DECORATION: 없음;} 
/* ---------- 텍스트 링크 - 방문한 링크 ---------- */ 
A:visited { 
COLOR : #0000FF; 
TEXT-DECORATION: 없음} 
/* ---------- 텍스트 링크 - 활성 링크 ---------- */ 
 A:active { 
COLOR: #3333ff; 
TEXT-DECORATION: none} 
/* ---------- 텍스트 링크 - 포인터가 링크에 있습니다. ----- --- */ 
A:hover { 
COLOR: #ff0000 
텍스트 장식: 밑줄;} 
/* ---------- 표 스타일 1 (일반 표) ---------- */ 
.tablestyle1{ 
font-size: 9pt /* 표의 글꼴 크기*/ 
width: 100% ; /* 테이블 너비* / 
border: 0px none; /* 테이블 테두리 너비*/ 
 background-color: #0077B2 /* 테이블 선 색상*/ 
cellSpacing:expression(this.cellSpacing= 1); /* 두 셀 사이의 거리*/ 
cellPadding:expression(this.cellPadding=3) } 
.TableData { 
BACKGROUND: #FFFFFF 
FONT-SIZE: 10pt; 
 } 

 
파일 올리는 방법을 몰라서 코드를 올려야 하는 점 양해 부탁드립니다! ! ! 