jquery_jquery를 기반으로 테이블을 동적으로 생성하기 위한 플러그인

더 이상 고민하지 말고 바로
테이블 함수:
추가 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;
}


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

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：jquery 양식 작업 2_jquery다음 기사：jquery 양식 작업 2_jquery

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술

• 집

• 강의

• Q&A

• 나의

• 집
• 강의
• 기사
• Q&A
• 사전
• 수동
• 다운로드
• 주제

집

기사

Q&A

강의

주제

다운로드

게임

사전

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

序号

产상품명

产品代码

单位

单价

添加5行