首頁 > 文章 > web前端 > jQuery做出可編輯表格（附程式碼）

jQuery做出可編輯表格（附程式碼）

php中世界最好的语言原創: 2018-04-25 10:20:031388瀏覽

這次帶給大家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程式碼

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

總結：透過此實例的學習能獲得的知識點：
一、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中文網其它相關文章！