집 > 기사 > 웹 프론트엔드 > JQuery는 실시간으로 편집할 수 있는 테이블 기능을 구현합니다.

JQuery는 실시간으로 편집할 수 있는 테이블 기능을 구현합니다.

php中世界最好的语言원래의: 2018-04-24 14:20:202139검색

이번에는 실시간으로 편집이 가능한 테이블 기능을 구현하기 위한 JQuery를 가져오겠습니다. 사례를 살펴보겠습니다. 우리가 달성하고자 하는 최종 효과는 다음과 같습니다.

학번 열을 클릭하면 편집이 가능합니다.

ESC를 클릭하면 작업이 취소되고, Enter를 클릭하면 수정 가능 효과가 적용됩니다(배경과 상호 작용 없음)

페이지 코드는 다음과 같습니다(asp.net):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditTable.aspx.cs" Inherits="EditTable" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
 <title></title> 
 <link href="css/eidtTable.css" rel="stylesheet" type="text/css" /> 
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 
 <script src="js/eidtTable.js" type="text/javascript"></script> 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <p> 
 <table> 
 <thead> 
 <tr> 
  <th colspan="2">可编辑的表格</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
  <th>学号</th> 
  <th>姓名</th> 
 </tr> 
 <tr> 
  <td class="editTd">00001</td> 
  <td>小明</td> 
 </tr> 
 <tr> 
  <td class="editTd">00001</td> 
  <td>小明</td> 
 </tr> 
 <tr> 
  <td class="editTd">00001</td> 
  <td>小明</td> 
 </tr> 
 <tr> 
  <td class="editTd">00001</td> 
  <td>小明</td> 
 </tr> 
 </tbody> 
 </table> 
 </p> 
 </form> 
</body> 
</html>

CSS(eidtTable.css)

table 
{ 
 border:1px solid black; 
 border-collapse:collapse; 
 width:500px; 
 } 
table th 
{ 
 border:1px solid black; 
 width:50%; 
 } 
table td 
{ 
 border:1px solid black; 
 width:50px; 
 } 
tbody th 
{ 
 background-color:#A3BAE9 
 }

JS(eidtTable.js):

/// <reference path="jquery-1.9.1.min.js" /> 
 
//$(document).ready(function () { 
// alert('test'); 
//}); 
 
//简便的写法 
$(function () { 
 $("tr:odd").css("background-color", "#ECE9D8"); 
 var objTd = $(".editTd"); 
 
 objTd.click(function () { 
 var text = $(this).html(); 
 var objThisTd = $(this); 
 
 //解决点击文本框和td中间的空隙还是会出问题 这个问题 
 if (objThisTd.children("input").length > 0) { 
 return false; 
 } 
 
 var inputText = $("<input value=&#39;test&#39; type=&#39;text&#39;/>"); 
 
 inputText.width(objTd.width()).css("font-size", "16px").css("background-color", objTd.css("background-color")).css("border-width", "0").val(text); 
 
 objThisTd.html(""); 
 inputText.appendTo(objThisTd); 
 
 inputText.trigger("focus").trigger("select"); 
 
 inputText.click(function () { 
 return false; 
 }); 
 
 //这里采用的keydown事件，我试过用keyup事件无法屏蔽浏览器的回车页面提交事件 
 inputText.keydown(function (event) { 
 //alert(event.keyCode); 
 var keycode = event.which; 
 if (keycode == 13) { 
 objThisTd.html($(this).val()); 
 //return false; 
 } 
 if (keycode == 27) { 
 objThisTd.html(text); 
 } 
 }); 
 }); 
});

이 기사의 사례를 읽으셨을 것입니다. 방법을 익힌 후 PHP 중국어 웹사이트의 다른 관련 기사를 주목하여 더 흥미로운 내용을 확인하세요!