같은 테이블? 다양한 테이블(편집 가능한 상태 테이블)

집

웹 프론트엔드

JS 튜토리얼

같은 테이블? 다양한 테이블(편집 가능한 상태 테이블)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:49 PM

table 편집 가능

새로운 날이 시작되었고 삶은 계속됩니다. 오늘 여러분과 공유하고 싶은 것은 다른 테이블입니다. 일반적인 테이블을 사용하여 데이터를 표시합니다. 오늘 공유하고 싶은 테이블은 데이터를 표시할 수 있을 뿐만 아니라 데이터를 편집할 수도 있습니다. 데이터를 마우스로 클릭하면 해당 데이터 그리드가 편집 가능해집니다. 먼저 오늘의 주제를 살펴보겠습니다.

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

 
JQueryProject1<br> <meta name="author" content="Frank_Ren" /> <br><link type="text/css" rel="stylesheet" href="css/myCSS.css" /> ;스크립트 유형 ="text/javascript" src="js/jquery-1.8.1.min.js"></script> <br><script type="text/javascript" 언어="JavaScript" src ="js /myJSFile.js"></script> <br><!-- 날짜: 2012-09-17 --> <br></head> 🎜>< ;table> <br><thead> <br><tr> <br><th colspan="2">편집하려면 다음 내용을 클릭하세요. <br>< ;/tr> <br></thead> <br><tr><br>학생 ID<br>< 일>이름</tr> <br><tr> <br><td>000001</td> > <br><tr> <br><td>000002</td> <br><td></td>
<br><td>000003 <br>
</td>
<td></td> <br>
</tr> <br><td><br></td>
<td> ;조류</td> <br></tbody> <br></body> <br> <br>네, 여전히 스타일이 전혀 없는 평범한 테이블입니다. 이 테이블을 덜 추상적으로 만들기 위해 CSS 스타일을 도입하겠습니다. <br><br><br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다:<br><br> <br>table{ <br>width:400px  height: 150px; 테이블, 테이블 td, 테이블 th{ <br>테두리:1px 단색 검정; <br>테두리 축소: 축소 <div class="codetitle">} <span>테이블 td{ <a style="CURSOR: pointer" data="70841" class="copybut" id="copybut70841" onclick="doCopy('code70841')"> 너비: <u>높이: 25px ; </u>} </a>thead th{ </span> background-color:#87CEFA </div>} <div class="codebody" id="code70841">tbody th{ <br> background-color:# FFFACD; > <br>HTML 페이지에는 편집 가능한 페이지 요소가 몇 개밖에 없습니다. 아쉽게도 테이블을 편집 가능하게 만들려면 테이블에 편집 가능한 페이지 요소를 삽입한 다음 장식해야 합니다. CSS를 사용하여 일반 테이블처럼 보이도록 하지만 JS 코드는 다음과 같습니다. <br><br><br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다.<br><br> <br>$(function(){ <br>var content; <br>$( "#content tr:odd").css( "배경색","#D2B48C"); <br>$("#content tr:even").css("배경색","#C0C0C0") <br>$("#content td" ).click(function(){ <br>var clickObj = $(this); <br>content = clickObj.html(); </div>changeToEdit(clickObj); <br>}); 노드){ <br>node.html(""); <div class="codetitle">var inputObj = $("<input type='text'/>") <span>inputObj.css("border","0 ").css("배경색",node.css("배경색")) <a style="CURSOR: pointer" data="48814" class="copybut" id="copybut48814" onclick="doCopy('code48814')">.css("글꼴 크기",node.css(" 글꼴 크기")).css("높이 ","20px") <u>.css("width",node.css("width")).val(content).appendTo(node) </u>.get(0).select(); </a>inputObj.click(function(){ </span>return false; </div>}).keyup(function(event){ <div class="codebody" id="code48814">var keyvalue = event.which; <br>if(keyvalue==13){ <br>node.html(node.children("input").val()); <br>} <br>if(keyvalue==27){ <br>node .html(content) <br>} <br>}).blur(function(){ <br>if(node.children("input").val()!=content){ <br>if(confirm ("수정된 콘텐츠를 저장하시겠습니까? ","예","아니요")){ <br>node.html(node.children("input").val()); <br>}else{ <br>node.html(content); <br>} <br>}else{ <br>node.html(content) <br>} <br>}) <br>} <br>});<br> 다음으로 이 JS에 대한 간단한 분석을 해보겠습니다. 전역 변수 var content는 편집하기 전에 테이블의 내용을 저장하는 데 사용됩니다. 사용자가 테이블을 편집하지만 편집된 결과를 저장하고 싶지 않을 때가 있습니다. 테이블을 저장하려면 편집하기 전에 테이블의 내용이 복원되므로 마우스 클릭 시 테이블의 내용을 먼저 저장해야 합니다. <br><br>다음 두 문장 $("#content tr:odd").css("Background-color","#D2B48C") $("#content tr:even").css("배경 -color","#C0C0C0");은 테이블의 가시성을 높이기 위해 테이블에 대체 행 색상을 적용하는 것입니다. var inputObj = $("<input type='text'/>"); 이 문장은 편집 가능한 JQuery 객체를 생성하는데, 이는 편집 가능한 요소를 테이블에 삽입하는 것입니다. CSS를 추가하는 것입니다. .css() 메소드는 객체의 CSS 스타일을 설정할 수 있을 뿐만 아니라 객체의 CSS 스타일도 얻을 수 있습니다. JQuery 메소드가 실행된 후 JQuery 객체가 반환되는 경우가 많기 때문에 inputObj.css().css().css()....가 나타납니다. <br><br>appendTo() 메서드는 테이블의 편집 가능성을 실현하고(appendix()도 사용할 수 있음) 편집 가능한 요소를 테이블에 삽입합니다. .get(0).select() 두 가지 메소드는 편집 가능한 요소에 초점이 맞춰지도록 inputObj의 콘텐츠를 선택하는 데 사용됩니다. 이 두 메소드는 반드시appendTo(), inputObj.click( function(){}) 메서드도 중요합니다. 이 메서드를 삭제하면 흥미로운 버그가 발생합니다. <br><br>다음 keyup(function(event){})을 사용하면 event.which를 통해 키보드에서 누른 키에 해당하는 키 값을 얻을 수 있습니다. 일반적으로 사용되는 키 값에는 Enter 키: 13, Esc 키 :27. Enter 키를 누르면 편집된 내용이 저장되고 테이블은 일반 테이블로 복원됩니다. Esc 키를 누르면 테이블의 내용이 복원되고 테이블이 원래 테이블로 복원됩니다. 일반 테이블. <br><br>사용자 경험, Apple의 등장으로 이 단어가 더욱 유명해졌고, 우리도 그 즐거움에 동참하기 위해 왔습니다. 사용자 경험을 향상시키기 위해 여기에는 Blur(function(){}) 메서드가 추가되었습니다. 포커스가 편집 가능한 요소를 벗어나면 먼저 테이블의 내용이 변경되었는지 확인하고 변경 사항이 없으면 직접 복원합니다. 테이블과 테이블의 내용이 변경된 경우 사용자에게 저장할지 묻는 메시지를 표시합니다. <br><br>오늘의 예제는 기본적으로 완성되었습니다. 별도의 JS 파일에서 JS 코드를 참조하면 중국어로 왜곡된 버그가 나타날 수도 있습니다. 이 글을 읽어주셔서 감사드리며, 도움이 되셨으면 좋겠습니다.</div>
</td>

본 웹사이트의 성명

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

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7658

Cakephp 튜토리얼

1393

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 미니 크로스 워드 답변

112

Related knowledge

Vue를 사용하여 편집 가능한 데이터 테이블을 구현하는 방법은 무엇입니까? Jun 25, 2023 pm 06:20 PM

프런트 엔드 기술의 지속적인 개발로 인해 데이터 테이블은 기업 관리 및 데이터 표시를 위한 중요한 도구 중 하나가 되었습니다. 일상적인 개발에서는 데이터 테이블의 데이터를 수정하거나 추가해야 하는 경우가 있습니다. 이때 편집 가능한 데이터 테이블을 구현해야 합니다. 이 글에서는 Vue를 사용하여 편집 가능한 데이터 테이블을 구현하는 방법을 소개합니다. 1. 구현 아이디어 편집 가능한 데이터 테이블 기능을 구현할 때 다음 사항을 고려해야 합니다. 데이터 표현: 표시 및 편집을 위해 데이터를 테이블로 렌더링합니다. 테이블 편집: 테이블의 데이터를 편집합니다.

Layui를 사용하여 편집 가능한 개인 일정 관리 시스템을 개발하는 방법 Oct 25, 2023 am 11:42 AM

Layui를 사용하여 편집 가능한 개인 일정 관리 시스템을 개발하는 방법 최근 정보 기술의 급속한 발전과 사람들의 삶의 속도가 빨라짐에 따라 개인 일정 관리가 점점 더 중요해지고 있습니다. 사람들이 자신의 시간과 작업을 더 잘 관리할 수 있도록 JavaScript 기반의 프런트 엔드 UI 프레임워크인 Layui를 사용할 수 있습니다. 이는 풍부한 구성 요소와 간결한 스타일을 제공하며 개인 일정 관리 시스템 개발에 매우 적합합니다. 1. 환경 준비 먼저 개발 환경을 준비해야 합니다. 당신을 확인

Vue3 테이블 구성 요소를 사용하는 방법 May 12, 2023 pm 09:40 PM

기본 테이블 테이블 컴포넌트를 개발하기 전에 먼저 어떤 스타일의 API를 사용할지 생각해 보세요. 작성자가 제작 작업에서 요소를 사용하기 때문에 이전 컴포넌트의 스타일은 요소와 유사하지만 이번에는 요소 스타일을 사용할 계획이 없습니다. , 이를 변경하여 직접 표시할 계획입니다. 사용자는 다음과 같이 사용할 것으로 예상합니다. constdataList=[{id:1,name:'"JavaEE Enterprise Application Practice"',author:'dev1ce',price:'10.22 ',설명:&# 3

Vue 문서에서 편집 가능한 테이블 구현 방법 Jun 20, 2023 pm 06:43 PM

Vue.js는 현재 가장 인기 있는 프런트엔드 프레임워크 중 하나이며 데이터 기반 접근 방식을 사용하여 사용자 인터페이스를 구축하고 양방향 데이터 바인딩 및 구성 요소화의 특징을 가지고 있습니다. Vue.js 문서에는 편집 가능한 테이블을 구현하는 방법이 제공됩니다. 이 기사에서는 이 방법의 구체적인 구현 단계를 소개합니다. 데이터를 준비하려면 먼저 데이터 세트를 준비해야 합니다. 여기서는 학생 정보를 예로 들어보겠습니다. 데이터 형식은 배열일 수 있으며 각 요소에는 이름, 성별, 나이 등과 같은 속성이 포함됩니다. 학생:[{이름:'샤오밍

Layui를 사용하여 편집 가능한 테이블 기능을 구현하는 방법 Oct 25, 2023 am 11:27 AM

Layui를 사용하여 편집 가능한 테이블 기능을 구현하는 방법 Layui는 풍부한 구성 요소와 강력한 기능을 갖춘 클래식하고 간결한 프런트 엔드 UI 프레임워크입니다. Layui를 사용하여 개발하는 과정에서 편집 가능한 테이블 기능을 구현해야 하는 경우가 있습니다. 이 글에서는 Layui의 테이블 컴포넌트와 폼 컴포넌트를 사용하여 편집 가능한 테이블 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. Layui 라이브러리를 도입합니다. 먼저 Layui 라이브러리의 관련 파일을 프로젝트에 도입합니다. 선택 할수있다

Layui를 사용하여 편집성을 지원하는 전자책 리더를 개발하는 방법 Oct 24, 2023 am 08:08 AM

Layui를 사용하여 편집 가능한 전자책 리더를 개발하는 방법 개요: Layui는 풍부한 UI 구성 요소 및 개발 도구 세트를 제공하는 사용하기 쉽고 강력한 프런트 엔드 프레임워크로, 개발자가 아름답고 완벽한 기능을 갖춘 앱을 신속하게 구축할 수 있도록 해줍니다. 웹 애플리케이션. 이 기사에서는 Layui 프레임워크를 사용하여 사용자가 전자책에서 강조표시, 표시, 메모 작성과 같은 작업을 수행할 수 있도록 편집성을 지원하는 전자책 리더를 개발하는 방법을 소개합니다. 1단계: 프로젝트 준비 먼저 기본 프로젝트 구조를 준비해야 합니다. 만들기

Vue와 Canvas를 사용하여 편집 가능한 벡터 그래픽 애플리케이션을 개발하는 방법 Jul 19, 2023 pm 03:07 PM

Vue와 Canvas를 사용하여 편집 가능한 벡터 그래픽 애플리케이션을 개발하는 방법 소개: 최근 몇 년 동안 벡터 그래픽이 디자인 분야에서 점점 더 널리 사용되고 있으며 Adobe Illustrator와 같은 벡터 그래픽을 기반으로 하는 디자인 도구가 많이 있습니다. 웹 개발에서 우리는 또한 사용자의 맞춤형 디자인 요구 사항을 충족시키기 위해 편집 가능한 벡터 그래픽 응용 프로그램을 개발할 수 있기를 희망합니다. 이 기사에서는 Vue와 Canvas를 사용하여 편집 가능한 벡터 그래픽 애플리케이션을 개발하는 방법을 소개하고 자세한 코드 예제를 제공합니다. 준비사항 먼저, 나는

Layui를 사용하여 편집 가능한 순서도 디자이너를 개발하는 방법 Oct 27, 2023 pm 01:07 PM

Layui를 사용하여 편집 가능한 순서도 디자이너를 개발하는 방법 소개: 정보화의 급속한 발전으로 인해 순서도는 다양한 산업에서 점점 더 많이 사용되고 있습니다. 그러나 현재 시중에 나와 있는 순서도 편집기의 선택은 제한되어 있으며 대부분 비용을 지불해야 합니다. 이 기사에서는 Layui 프레임워크를 사용하여 편집 가능한 순서도 디자이너를 개발하고 특정 코드 예제를 제공하는 방법을 소개합니다. 1. Layui 소개: Layui는 간단하고 사용하기 쉬운 프런트엔드 프레임워크로, We를 빠르게 구축할 수 있도록 풍부한 구성요소와 인터페이스를 제공합니다.

See all articles

같은 테이블? 다양한 테이블(편집 가능한 상태 테이블)_jquery

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제