Rumah > hujung hadapan web > tutorial js > jQuery做出可编辑表格(附代码)

jQuery做出可编辑表格(附代码)

php中世界最好的语言
Lepaskan: 2018-04-25 10:20:03
asal
1511 orang telah melayarinya

这次给大家带来jQuery做出可编辑表格(附代码),jQuery做出可编辑表格的注意事项有哪些,下面就是实战案例,一起来看一下。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<%@ 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>

Salin selepas log masuk

css代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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; 

}

Salin selepas log masuk

jquery代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

$(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); 

}); 

}); 

});

Salin selepas log masuk

总结:通过这一实例的学习能获得的知识点:
一、html方面
1.table中可以包含thead和tbody
2.表头的内容中可以放th中
3.table{}这种写法称作标签选择器,可以对整个table产生影响。
4.table td{}这种写法表示table中包含的所有td。
二、jquery方面
$()的括号中可以放4种不同的参数
1.参数直接放function,表示页面加载完毕:例如上述例子中jquery代码中的第1行$(function(){})
2.参数可以是css类选择器,并被包装成一个jquery对象。例如:上述例子中jquery代码的第4行$(“tbody tr:even”)
3.参数如果是html文本,可以创建dom节点,并包装成jquery对象。例如:上述例子中jquery代码的第27行$("")
4.参数可以是一个dom对象,这个方法相当于吧dom对象装换成jquery对象。上述例子中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方法,可以获取或设置节点的value值。例如上述例子中jquery代码中第41行var inputtext = $(this).val()
5.jquery对象后面加width方法,可以设置或获取某个节点的宽度。例如上述例子中jquery代码中第27行tdObj.width()
6.jquery对象后面加apppendTo方法可以将一个节点追加到另一个节点所有子节点后面。例如上述例子中jquery代码中第27行appendTo(tdObj)
7.jquery对象后面加trigger方法可以出发某个js事件发生。例如上述例子中jquery代码中第29行inputObj.trigger("focus").trigger("select")
8.jquery对象后面加children方法可以获得某个节点的子节点,可以制定参数来限制子节点的内容。例如上述例子中jquery代码中第13行tdObj.children("input").length
9.如果选择器返回的jquery对象中包含多个dom节点,在这个对象上注册类似click事件,所有dom节点都会用于此事件。例如上述例子中jquery代码中第9行numId.click;

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

详解JSON.parse()与JSON.stringify()的区别以及使用方法

JS实现JSON.stringify步骤详解

Atas ialah kandungan terperinci jQuery做出可编辑表格(附代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan