欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

基于jQuery實(shí)現(xiàn)可編輯的表格

前言

十余年的濟(jì)南網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整濟(jì)南建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“濟(jì)南網(wǎng)站設(shè)計(jì)”,“濟(jì)南網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

我們知道jQuery是一個(gè)輕便的JavaScript框架，里面封裝了系統(tǒng)和程序常用到的一些方法，利用CSS、HTML可以將這些內(nèi)容運(yùn)用起來，做出各式各樣好看的界面，下面小編使用jQuery實(shí)現(xiàn)了一個(gè)“可編輯的表格”的例子。

代碼加說明

一、HTML代碼

1.使用<thead></thead>實(shí)現(xiàn)標(biāo)頭；

2.一個(gè)table中可以包含thead和tbody

3.表頭的內(nèi)容可以放到th中。

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>JQuery實(shí)戰(zhàn)2-可編輯的表格</title>
 <link href="css/editTable.css" type="text/css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/editTable.js"></script>
</head>
<body>
 <table>
 <thead>
  <tr>
  <th colspan=2>鼠標(biāo)點(diǎn)擊表格項(xiàng)就可以編輯</th>
  </tr>
 </thead> 
 
 <tbody>
  <tr>
  <th>學(xué)號</th>
  <th>姓名</th>
 </tr>
 <tr>
  <td>001</td>
  <td>周星馳</td> 
  </tr> 
 <tr>
  <td>002</td>
  <td>星女郎</td> 
  </tr> 
 <tr>
  <td>003</td>
  <td>周潤發(fā)</td> 
 </tr>
 <tr>
  <td>004</td>
  <td>賭神</td> 
 </tr>
 </tbody>
 </table>
</body>
</html>

基于jQuery實(shí)現(xiàn)可編輯的表格

二、CSS代碼

1.table{}稱作標(biāo)簽選擇器，可以對整個(gè)頁面所有table產(chǎn)生影響；

2.table td{} 表示table中包含的所有td；

3.border_collapse:collape 使表格中的單元格的邊框合并

table{
 border:1px solid black;
 border-collapse:collapse;
 /* 修正單元格之間的邊框不能合并的問題*/
 width:400px;
 }
 
table th{
 border:1px solid black;
 width:50%;
}
table td{
 border:1px solid black;
 width:50%; 
}
tbody th{
 background-color:#A3BAE9;
}

三、JavaScript文件代碼

1.用來解決奇偶行背景色不同；

2.$(function(){})與$(documnet).ready(function(){})等價(jià)；

  $("tbody tr")  可以返回tbody中所有tr節(jié)點(diǎn)；

  $("tbody tr:even") 可以返回tbody中所有索引值是偶數(shù)的tr節(jié)點(diǎn)；

3.$()方法的參數(shù)如果是一個(gè)DOM對象時(shí)，這個(gè)方法相當(dāng)于把DOM對象轉(zhuǎn)換成jQuery對象；

   $()方法的參數(shù)如果是一段正確的HTML文本，則可以創(chuàng)建一個(gè)DOM節(jié)點(diǎn)，并包裝成jQuery對象。

$(function(){ 
 //找到表格偶數(shù)行
 //odd是數(shù)組中下標(biāo)為奇數(shù)的項(xiàng)，even是下標(biāo)為偶數(shù)的項(xiàng)
 $("tbody tr:even").css("background-color","#ECE9D8");
 //找到所有學(xué)號的單元格
 var numId=$("tbody td:even");
 //給這些單元格注冊點(diǎn)擊事件
 numId.click(function(){
  
 //找到當(dāng)前鼠標(biāo)點(diǎn)擊的td
 var tdObj=$(this);
 //
 if(tdObj.children("input").length>0){
  //當(dāng)前td中的input，不執(zhí)行click處理
  return false;
  }
 var text=tdObj.html();
 //清空td的內(nèi)容
 tdObj.html("");
 
 //創(chuàng)建一個(gè)文本框
 //去掉文本框的邊框
 //文本框的文字大小16px
 //文本框的寬度與td相同 
 //設(shè)置文本框的背景色
 //將td中的內(nèi)容放到文本框中 
 //將文本框插入到td中
 var inputObj=$("<input type='text' />").css("border-width","0")
 .css("font-size","16px")
 .width(tdObj.width())
 .css("background-color",tdObj.css("background-color"))
 .css("font",tdObj.css("font"))
 .val(text)
 .appendTo(tdObj); 
 //文本框插入后被選中
 //inputObj.get(0).select();
 inputObj.trigger("focus").trigger("select");
 inputObj.click(function(){
   return false;
   });
 //處理文本框的回車和Esc操作
 inputObj.keyup(function(event){
        //獲取鍵值
 var keycode=event.which;
        //回車
  if(keycode==13){
  //獲取當(dāng)前文本框的內(nèi)容
  var inputText=$(this).val();
  //將td的內(nèi)容修改為文本框的內(nèi)容
  tdObj.html(inputText);
  }
   
  //esc情況,
  //將td的內(nèi)容還原成text
  if(keycode==27){
  tdObj.html(text);
  }
 
 });
 
  });
 
});

小結(jié)

關(guān)于jQuery的學(xué)習(xí)，不只是停留在例子上面，我們還要從中不斷地深入，理解并能夠運(yùn)用起來。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

標(biāo)題名稱：基于jQuery實(shí)現(xiàn)可編輯的表格
網(wǎng)址分享：http://www.chinadenli.net/article48/ieodhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、電子商務(wù)、ChatGPT、外貿(mào)網(wǎng)站建設(shè)、企業(yè)建站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作