首頁 web前端 js教程 jQuery做出可編輯表格(附程式碼)

jQuery做出可編輯表格(附程式碼)

Apr 25, 2018 am 10:20 AM
jquery 程式碼 表格

這次帶給大家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中文網其它相關文章!

推薦閱讀:

詳解JSON.parse()與JSON.stringify()的區別以及使用方法

JS實作JSON .stringify步驟詳解

以上是jQuery做出可編輯表格(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1422
52
Laravel 教程
1316
25
PHP教程
1267
29
C# 教程
1239
24
PPT表格中插入的圖片調整格式的操作步驟 PPT表格中插入的圖片調整格式的操作步驟 Mar 26, 2024 pm 04:16 PM

1.新建一個PPT文件,命名為【PPT技巧】,作為範例。 2、雙擊【PPT技巧】,開啟PPT檔。 3、插入兩行兩列的表格,作為範例。 4.在表格的邊框上雙擊,上方工具列出現【設計】的選項。 5.點選【底紋】的選項,點選【圖】。 6.點選【圖片】,彈出以圖片為背景的填滿選項對話框。 7.在目錄中找到要插入的托,點選確定即可插入圖片。 8.在表格框上右鍵,彈出設定的對話框。 9.點選【設定儲存格格式】,勾選【將圖片平鋪為底紋】。 10.設定【居中】【鏡像】等自己需要的功能,點選確定即可。注意:預設為圖片填充在表格

wps數值如何設定依條件自動變色_wps表格數值設定依條件自動變色的步驟 wps數值如何設定依條件自動變色_wps表格數值設定依條件自動變色的步驟 Mar 27, 2024 pm 07:30 PM

1.開啟工作表,找到【開始】-【條件格式】按鈕。 2、點選列選擇,選取將新增條件格式的列。 3.點選【條件格式】按鈕,彈出選項選單國。 4.選擇【突出顯示條件規則】-【介於】。 5、填寫規則:20,24,深填色深綠色文字。 6.確定後,所選列中資料依設定對對應數字文字、單元框加色處理。 7.對於沒有衝突的條件規則,可以重複添加,但對於衝突規則wps則會以最後添加的規則代替先前建立的條件規則。 8.重複新增【介於】規則20-24和【小於】20後的單元列。 9.如需改變規則,剛可以清除規則後重新設定規則。

關於銷售預測如何製作表格 關於銷售預測如何製作表格 Mar 20, 2024 pm 03:06 PM

能夠熟練的製作表格不僅是會計、人事以及財務的必備技能,對於許多銷售人員來說,學會製作表格也是很重要的。因為與銷售量有關的數據都是很多且很複雜的,而且不是簡單的記在文件當中,就可以說明問題的。為了能讓更多的銷售人員熟練運用Excel來製作表格,小編接下來要介紹的就是有關於銷量預測的表格製作問題,有需要的朋友不要錯過哦! 1,開啟【銷售預測及目標制定】,xlsm,來分析每個表格所存放的資料。 2,新建【空白工作表】,選擇【儲存格】,輸入【標籤資訊】。向下【拖曳】,【填充】月份。輸入【其它】數據,點選【

GE通用遠端程式碼可在任何裝置上編程 GE通用遠端程式碼可在任何裝置上編程 Mar 02, 2024 pm 01:58 PM

如果您需要遠端編程任何設備,這篇文章會為您帶來幫助。我們將分享編程任何設備的頂級GE通用遠端代碼。通用電氣的遙控器是什麼? GEUniversalRemote是一款遙控器,可用於控制多個設備,如智慧電視、LG、Vizio、索尼、藍光、DVD、DVR、Roku、AppleTV、串流媒體播放器等。 GEUniversal遙控器有各種型號,具有不同的功能和功能。 GEUniversalRemote最多可以控制四台設備。頂級通用遙控器代碼,可在任何裝置上編程GE遙控器配備一組代碼,使其能夠與不同設備配合。您可

如何使用Copilot產生程式碼 如何使用Copilot產生程式碼 Mar 23, 2024 am 10:41 AM

身為一名程式設計師,對於能夠簡化程式設計體驗的工具,我感到非常興奮。借助人工智慧工具的幫助,我們可以產生演示程式碼,並根據需求進行必要的修改。在VisualStudioCode中新引入的Copilot工具讓我們能夠創建具有自然語言聊天互動的AI生成程式碼。透過解釋功能,我們可以更好地理解現有程式碼的含義。如何使用Copilot產生程式碼?要開始,我們首先需要取得最新的PowerPlatformTools擴充。要實現這一點,你需要進入擴充頁面,搜尋“PowerPlatformTool”,然後點擊Install按鈕

你知道Word表格怎麼求和嗎 你知道Word表格怎麼求和嗎 Mar 21, 2024 pm 01:10 PM

有時候,我們在Word表格中會經常遇到計數的問題;通常遇到這樣的問題,大部分同學都回把Word表格複製到Excel中來計算;還有一部分同學會默默地拿起計算器去算。那有沒有快速的方法來計算呢?當然有啊,其實在Word中也是可以計算求和的。那麼,你知道該怎麼操作嗎?今天,我們就來一起來看吧!廢話不多說,有需要的朋友趕緊收藏起來吧!步驟詳情:1、首先,我們開啟電腦上的Word軟體,開啟需要處理的文件。 (如圖)2、接著,我們將遊標定位在求和數值所在的儲存格上(如圖);然後,我們點選【選單列

word怎麼把表格橫豎調換 word怎麼把表格橫豎調換 Mar 20, 2024 am 09:31 AM

Word軟體是我們必不可少且需要經常使用的,前面學習了Word軟體編輯表格,但是,如果不小心,將表格的橫豎方向編輯反了,又不想浪費時間重新製作,是否可以將表格的橫豎調換呢?答案當然是肯定,接下來,就由小編為大家詳細的介紹word怎麼把表格橫豎調換的操作方法,讓我們一起來學習吧。首先,我們需要將下面的Word表格進行行列互換。要做到這一點,我們需要先全部選取表格,然後右鍵點擊並選擇複製功能。第2步,選擇複製以後我們把word最小化,然後打開一個Excel表格,點擊右鍵,選擇貼上,把它貼到Exc

Word表格自動編號或序號如何插入 Word表格自動編號或序號如何插入 Mar 20, 2024 am 09:30 AM

我們在製作表格時,第一想到的是會用Excel軟體製作表格,但是你知道嗎,其實Word軟體製作表格也是非常方便的,有時我們在Word軟體裡進行表格製作的時候,需要輸入序號或編號,如果是手動一個一個地輸,那就非常地麻煩了,其實word軟體裡有一個操作能自動插入​​編號或序號,那麼下面就和小編一起來學習Word表格自動編號或序號怎麼插入的方法吧。 1.先建立一個Word文檔,插入表格。  2.選取需要插入自動序號或編號的列或儲存格。  3.點選「開始」—「編號」。  4.選擇其中的一種樣式的編號。  5.

See all articles