快捷導(dǎo)航

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

更新時間：2019年12月11日 10:18:23 作者：馮浩月

這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

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

代碼加說明

一、HTML代碼

1.使用<thead></thead>實現(xiàn)標頭；

2.一個table中可以包含thead和tbody

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

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>JQuery實戰(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>鼠標點擊表格項就可以編輯</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>

二、CSS代碼

1.table{}稱作標簽選擇器，可以對整個頁面所有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(){})等價；

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

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

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

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

$(function(){ 
 //找到表格偶數(shù)行
 //odd是數(shù)組中下標為奇數(shù)的項，even是下標為偶數(shù)的項
 $("tbody tr:even").css("background-color","#ECE9D8");
 //找到所有學(xué)號的單元格
 var numId=$("tbody td:even");
 //給這些單元格注冊點擊事件
 numId.click(function(){
  
 //找到當(dāng)前鼠標點擊的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)建一個文本框
 //去掉文本框的邊框
 //文本框的文字大小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í)，不只是停留在例子上面，我們還要從中不斷地深入，理解并能夠運用起來。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: