首頁 web前端 js教程 JQuery實作可直接編輯的表格_jquery

JQuery實作可直接編輯的表格_jquery

May 16, 2016 pm 04:03 PM
jquery 表格

本文實例講述了JQuery實作可直接編輯的表格。分享給大家供大家參考。具體分析如下:

功能:

建立一個表格,使用者點選某個儲存格後,可以直接修改儲存格文字。
編輯狀態下,使用者可按下回車鍵確認修改,按ESC鍵撤銷修改。

效果如下圖:

思路:

當使用者點擊某個儲存格後,立即向該儲存格內插入一個文字框,將它的寬、高都設定成與儲存格相的數值。使用者確認輸入後,清空該儲存格內的所有HTML程式碼,然後把內容設定為使用者剛輸入的文字。

HTML程式碼:

<table align="center"> 
 <tr> 
 <td>学号</td> 
 <td>姓名</td> 
 </tr> 
 <tr> 
 <td>001</td> 
 <td>dog</td> 
 </tr> 
 <tr> 
 <td>002</td> 
 <td>cat</td> 
 </tr> 
 <tr> 
 <td>003</td> 
 <td>pig</td> 
 </tr> 
</table> 
登入後複製

JavaScript程式碼:

$(function(){ 
 $("td").click(function(event){ 
  //td中已经有了input,则不需要响应点击事件
  if($(this).children("input").length > 0) 
   return false; 
  var tdObj = $(this); 
  var preText = tdObj.html();
  //得到当前文本内容 
  var inputObj = $("<input type='text' />");
  //创建一个文本框元素 
  tdObj.html(""); //清空td中的所有元素 
  inputObj 
   .width(tdObj.width())
   //设置文本框宽度与td相同 
   .height(tdObj.height()) 
   .css({border:"0px",fontSize:"17px",font:"宋体"})
   .val(preText) 
   .appendTo(tdObj)
   //把创建的文本框插入到tdObj子节点的最后
   .trigger("focus")
   //用trigger方法触发事件 
   .trigger("select"); 
  inputObj.keyup(function(event){ 
   if(13 == event.which)
   //用户按下回车 
   { 
    var text = $(this).val(); 
    tdObj.html(text); 
   } 
   else if(27 == event.which)
   //ESC键 
   { 
    tdObj.html(preText); 
   } 
  }); 
  //已进入编辑状态后,不再处理click事件 
  inputObj.click(function(){ 
   return false; 
  }); 
 }); 
}); 
登入後複製

希望本文所述對大家的jQuery程式設計有所幫助。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡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脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

PPT表格中插入的圖片調整格式的操作步驟 PPT表格中插入的圖片調整格式的操作步驟 Mar 26, 2024 pm 04:16 PM

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

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

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

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.如需改變規則,剛可以清除規則後重新設定規則。

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

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

新手製作表格有哪些技巧 新手製作表格有哪些技巧 Mar 21, 2024 am 09:11 AM

我們經常在excel中製作和編輯表格,但是作為一個剛剛接觸軟體的新手來講,如何使用excel製作表格,並沒有我們使用起來那麼輕鬆。下邊,我們針對新手,也就是初學者需要掌握的表格製作的一些步驟進行一些演練,希望對需要的人有些幫助。新手錶格範例樣板如下圖:我們看看如何完成! 1,新建excel文檔,有兩種方法。可以在【桌面】空白位置,點選滑鼠右鍵-【新建】-【xls】檔。也可以【開始】-【所有程式】-【MicrosoftOffice】-【MicrosoftExcel20**】2,雙擊我們新建的ex

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

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

WPS文件表格顏色怎麼設定你知道嗎 WPS文件表格顏色怎麼設定你知道嗎 Mar 20, 2024 am 08:19 AM

我們在看到別人的WPS文件中表格顏色做出來的效果五顏六色,十分美觀;而自己只有單調的黑色。如果過給表格填充顏色,我相信很多同學都會。但是,如果要在WPS文件中國設置表格的顏色的話,一定有不少同學會覺得燒腦!今天,我們來學習一下關於如何設定WPS文件表格的顏色。我整理了一份文檔,希望對大家有幫助。步驟如下:1、我們需要在WPS文件中繪製一個表格,在要修改線條顏色的表格中點選滑鼠右鍵。 2、接著,用滑鼠在表格上點選【滑鼠右鍵】;在彈出的選單中,我們找到【邊框和底紋】。 3.此時,會打開【邊框和底紋】對

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

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

See all articles