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='text'>").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()的區別以及使用方法
以上是jQuery做出可編輯表格(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

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

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

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

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

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

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

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

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