jQuery는 편집 가능한 테이블을 생성합니다(코드 포함).-JS 튜토리얼-php.cn

jQuery는 편집 가능한 테이블을 생성합니다(코드 포함).

php中世界最好的语言

풀어 주다： 2018-04-25 10:20:03

원래의

1333명이 탐색했습니다.

이번에는 편집 가능한 테이블을 생성하기 위한 jQuery를 가져왔습니다. jQuery에서 편집 가능한 테이블을 생성할 때의 주의사항은 무엇인가요?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> 
<!DOCTYPE html 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>jq2—可以编辑的表格</title> 
<link href="css/editTable.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/editTable.js"></script> 
<%--<script type="text/javascript" src="js/jquery-1.9.1.js"></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>000001</td> 
<td>张三</td> 
</tr> 
<tr> 
<td>000002</td> 
<td>李四</td> 
</tr> 
<tr> 
<td>000003</td> 
<td>王五</td> 
</tr> 
<tr> 
<td>000004</td> 
<td>赵六</td> 
</tr> 
</tbody> 
</table> 
</p> 
</form> 
</body> 
</html>

로그인 후 복사

css 코드:

body { 
} 
table { 
border:1px solid #000000; 
border-collapse:collapse;/*单元格边框合并*/ 
width:400px; 
} 
table td { 
border:1px solid #000000; 
width:50%; 
} 
table th { 
border:1px solid #000000; 
width:50%; 
} 
tbody th { 
background-color:#426fae; 
}

로그인 후 복사

jquery code

$(function () { 
//找到表格中除了第一个tr以外的所有偶数行 
//使用even为了通过tbody tr返回所有tr元素 
$("tbody tr:even").css("background-color", "#ece9d8"); 
//找到所有的学号单元格 
var numId = $("tbody td:even"); 
//给单元格注册鼠标点击事件 
numId.click(function () { 
//找到对应当前鼠标点击的td，this对应的就是响应了click的那个td 
var tdObj = $(this); 
//判断td中是否有文本框 
if (tdObj.children("input").length>0) { 
return false; 
} 
//获取表格中的内容 
var text = tdObj.html(); 
//清空td中的内容 
tdObj.html(""); 
//创建文本框 
//去掉文本框的边框 
//设置文本框中字体与表格中的文字大小相同。 
//设置文本框的背景颜色与表格的背景颜色一样 
//是文本框的宽度和td的宽度相同 
//并将td中值放入文本框中 
//将文本框插入到td中 
var inputObj = $("<input type=&#39;text&#39;>").css("border-width", "0").css("font-size", tdObj.css("font-size")).css("background-color", tdObj.css("background-color")).width(tdObj.width()).val(text).appendTo(tdObj); 
//文本框插入后先获得焦点、后选中 
inputObj.trigger("focus").trigger("select") 
//文本框插入后不能被触发单击事件 
inputObj.click(function () { 
return false; 
}); 
//处理文本框上回车和esc按键的操作 
inputObj.keyup(function (event) { 
//获取当前按下键盘的键值 
var keycode = event.which; 
//处理回车的情况 
if (keycode==13) { 
//获取当前文本框中的内容 
var inputtext = $(this).val(); 
//将td中的内容修改为文本框的内容 
tdObj.html(inputtext); 
} 
//处理esc的内容 
if (keycode==27) { 
//将td中的内容还原成原来的内容 
tdObj.html(text); 
} 
}); 
}); 
});

로그인 후 복사

요약: 이 예제를 학습하여 얻을 수 있는 지식 포인트:
1. HTML 양상
1.table에는 thead와 tbody가 포함될 수 있습니다.
2.
3.table{}을 th에 넣습니다. 이 작성 방법을 tag selector라고 하며, 이는 전체 테이블에 영향을 미칠 수 있습니다.
4.table td{}는 테이블에 포함된 모든 td를 나타냅니다.
2. jquery
$()의 경우 괄호 안에 4개의 다른 매개변수를 넣을 수 있습니다.
1. 매개변수를 함수에 직접 넣어 페이지가 로드되었음을 나타냅니다. 예를 들어 jquery 코드의 첫 번째 줄은 위의 예 $(function(){} )
2. 매개변수는 css 클래스 선택기일 수 있으며 jquery 객체로 패키징될 수 있습니다. 예: 위 예제에서 jquery 코드의 4번째 줄 $("tbody tr:even")
3 매개변수가 HTML 텍스트인 경우 dom 노드를 생성하고 이를 jquery 객체로 패키징할 수 있습니다. 예: 위 예제에서 jquery 코드의 27번째 줄 $("")
4. 매개변수는 dom 객체일 수 있습니다. 이 방법은 dom 객체를 dom 객체로 바꾸는 것과 같습니다. 제이쿼리 객체. 위 예제의 jquery 코드 11번째 줄 var tdObj = $(this)
이 예제의 jquery 객체
1. jquery 객체 뒤에 CSS 속성을 추가하여 노드의 CSS 속성을 설정합니다. 예를 들어 위 예제의 jquery 코드에서 4번째 줄은 $("tbody tr:even").css("Background-color", "#ece9d8")
2입니다. jquery 객체의 콘텐츠에는 dom 노드가 포함되어 있습니다. 선택기에 해당하며 배열로 저장됩니다.
3. jquery 객체 뒤에 html 메서드를 추가하면 노드의 html 콘텐츠를 설정하거나 가져올 수 있습니다. 예를 들어 위 예제에서 jquery 코드의 17번째 줄은 var text = tdObj.html()
4입니다. jquery 객체 뒤에 val 메서드를 추가하면 노드의 값을 가져오거나 설정할 수 있습니다. 예를 들어 위 예에서 jquery 코드의 41번째 줄은 var inputtext = $(this).val()
5입니다. jquery 객체 뒤에 width 메서드를 추가하면 노드의 너비를 설정하거나 가져올 수 있습니다. 예를 들어 위 예제
6의 jquery 코드에서 27번째 줄 tdObj.width()는 jquery 객체 뒤에appendTo 메서드를 추가하면 다른 노드의 모든 하위 노드에 노드를 추가할 수 있습니다. 예를 들어, 위의 예에서 jquery 코드
7의 27행 appendTo(tdObj)에서 jquery 객체 뒤에 트리거 메서드를 추가하면 js 이벤트가 발생할 수 있습니다. 예를 들어 위의 예에서 jquery 코드 inputObj.trigger("focus").trigger("select")
8의 29번째 줄은 jquery 객체 뒤에 자식 메서드를 추가하면 특정 노드의 자식 노드를 얻을 수 있습니다. 하위 노드 콘텐츠를 제한하도록 매개변수를 설정할 수 있습니다. 예를 들어 위 예제에서 jquery 코드의 13번째 줄은 tdObj.children("input").length
9입니다. 선택기에서 반환된 jquery 개체에 여러 dom 노드가 포함되어 있으면 이 개체에 유사한 클릭 이벤트를 등록하고 모든 DOM 노드가 이 이벤트에 참여합니다. 예를 들어, 위의 예에서 jquery 코드의 9행 numId.click은 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP의 다른 관련 기사에 주목하세요. 중국사이트!