简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

jQuery(HTML5가 아닌) 편집 가능한 테이블 구현 code_jquery

WBOY
풀어 주다： 2016-05-16 17:46:53
원래의
1087명이 탐색했습니다.
기능:
선택 과정에서 화살표 키를 사용하여 선택한 셀을 변경하거나 Enter 키를 누르거나 셀을 직접 두 번 클릭하여 선택하세요. 선택 과정에서 셀이 포커스를 잃습니다. 수정된 내용을 저장합니다.

주요 구현 아이디어:
선택 영역 선택, 이동 등은 모두 jQuery의 강력한 API를 사용하여 구현됩니다. 편집 가능한 셀은 실제로 셀이 선택될 때 셀에 입력 필드를 추가하고 데이터를 동적으로 업데이트합니다

소스 코드:
HTML 코드:
코드 복사 코드는 다음과 같습니다.

;tr>
항목1번째>
항목3













/table>


CSS 코드:



코드 복사

코드는 다음과 같습니다.

body{ text-shadow:#FFFFFF 1px 1px 1px } .editableTable { 폭: 220px; 여백: 10px; 경계: 1px #DDEEF6;-webkit-border-radius: 6px; -moz-border-radius: 6px;
}
.editableTable thead{
배경:#FFFFCC;
}
td{
배경:
커서: 포인터
}
.selectCell{
배경:#6699FF
}


JS 코드:



코드 복사


코드는 다음과 같습니다.

var EdTable = function(){
// 이벤트를 셀에 바인딩
function initBindGridEvent(){
$("td.editable").unbind()
/ / 셀 클릭 이벤트 추가
addGridClickEvent();
// 셀 더블 클릭 이벤트 추가
addGridDbClickEvent()
// 키보드 이벤트 추가
addGridKeyPressEvent()
🎜>// 셀에 클릭 이벤트 추가
function addGridClickEvent(){
$("td.simpleInput").bind("click",function(){
$('.simpleInput' ).each(function(){
$(this).removeClass("selectCell");
})
// 선택한 요소에 선택 스타일을 추가합니다
$(this) . addClass("selectCell");
});
}
//셀에 두 번 클릭 이벤트 추가
function addGridDbClickEvent(){
$("td.simpleInput") .bind ("dblclick",function(){
$('.simpleInput').each(function(){
$(this).removeClass("selectCell");
});
var val=$(this).html();
var width = $(this).css("width")
var height = $(this).css("height");
$(this).html("");
$(this).children("input").select();
});
}
// 셀 키보드 이벤트 추가
function addGridKeyPressEvent(){
$(document).keyup(function(event){
if(event.keyCode == 37){
// 왼쪽 화살표
var selectCell = $(".selectCell").prev()[0];
if(selectCell != 정의되지 않음){
$(".selectCell").removeClass("selectCell").prev( ).addClass("selectCell");
}
} else if(event.keyCode == 38){
// 위쪽 화살표
var col = $(".selectCell").prevAll () .length;
var topCell = $(".selectCell").parent("tr").prev().children()[col]
if(topCell != 정의되지 않음){
$ (".selectCell").removeClass("selectCell");
$(topCell).addClass("selectCell")
}
} else if(event.keyCode == 39)
// 오른쪽 화살표
var selectCell = $(".selectCell").next()[0]
if(selectCell != undefine){
$(".selectCell"). RemoveClass( "selectCell").next().addClass("selectCell");
}
} else if(event.keyCode == 40){
// 아래쪽 화살표
var col = $( ".selectCell").prevAll().length;
var topCell = $(".selectCell").parent("tr").next().children()[col]
if (topCell != 정의되지 않음){
$(".selectCell").removeClass("selectCell")
$(topCell).addClass("selectCell")
}
} else if (이벤트 .keyCode == 13){
//키 입력
var selectCell = $(".selectCell")[0]
if(selectCell != undefine){
$(selectCell ) .dblclick();
}
}
});
}
// 셀이 포커스를 잃은 후 테이블 정보 저장
function saveEdit(gridCell){
var pnt =$(gridCell).parent();
$(pnt).html($(gridCell).attr("value"))
$(gridCell).remove();
return{
initBindGridEvent : initBindGridEvent,
saveEdit : saveEdit
}
}()


소스 코드 다운로드
: EditableTable.rar
관련 라벨：
可编辑 表格
원천：php.cn
이전 기사：jquery를 사용하여 클릭의 배경색을 변경합니다. 다음 기사：JavaScript 하위 창에서 상위 창 개체 조작 ModalDialog_기본 지식
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
쿼리와 수식은 새 열로 전체 테이블을 형성합니다. 여기서 새 열은 다른 조건부 열 값을 포함하는 수식입니다. 편집: 수식은 "값" 열(카테고리를 기준으로 user_id가 가장 낮은 "값" 열)이어야 합니다. 따라서 카테고리 "...
에서 2024-04-06 21:23:40
0
2
530
스도쿠 검사기가 작동하지 않나요? 오류를 식별하는 데 도움을 줄 수 있는 사람이 있나요? 온라인 편집기에서 모든 것을 시도했지만 여전히 오류가 발생합니다. 하지만 내 컴퓨터의 VSCode에서 이 작업을 수행하면 제대로 작동합니다. 혼란스러워서 버그를 ...
에서 2024-04-06 21:21:07
0
1
474
SCSS를 사용하여 기본값 및 CSS 변수 생성 웹사이트 스타일링을 구현하고 있습니다. 레거시 지원상의 이유로 적어도 한동안은 IE11을 지원해야 합니다. 작업 흐름과 제정신의 이유로 가능할 때마다 CSS 변수...
에서 2024-04-06 17:46:54
0
1
355
부분 값 조건에서 쿼리 기록 - SQL 기술 공유 code라는 열이 있는 zipcode라는 테이블이 있습니다. Code 열에는 우편번호 접두사가 포함됩니다(예: 395453302120312). 제공된 우편번호가 ...
에서 2024-04-06 16:01:26
0
1
395
ASP 클래식 코드를 MYSQL 데이터베이스에 문자열로 저장할 가능성 ASP 클래식 코드를 MySQL 데이터베이스에 저장하고 끌어올 때 코드를 실행하도록 할 수 있습니까? 예를 들어 변수 이름을 문자열에 저장하고 표시하기 전에 AS...
에서 2024-04-06 13:38:43
0
1
358
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！
arthinking Jason itzhai
arthinking Jason itzhai
arthinking Jason ;
itzhai