您好,登錄后才能下訂單哦!
前言
我們知道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>學號</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對象時,這個方法相當于把DOM對象轉換成jQuery對象;
$()方法的參數(shù)如果是一段正確的HTML文本,則可以創(chuàng)建一個DOM節(jié)點,并包裝成jQuery對象。
$(function(){ //找到表格偶數(shù)行 //odd是數(shù)組中下標為奇數(shù)的項,even是下標為偶數(shù)的項 $("tbody tr:even").css("background-color","#ECE9D8"); //找到所有學號的單元格 var numId=$("tbody td:even"); //給這些單元格注冊點擊事件 numId.click(function(){ //找到當前鼠標點擊的td var tdObj=$(this); // if(tdObj.children("input").length>0){ //當前td中的input,不執(zhí)行click處理 return false; } var text=tdObj.html(); //清空td的內(nèi)容 tdObj.html(""); //創(chuàng)建一個文本框 //去掉文本框的邊框 //文本框的文字大小16px //文本框的寬度與td相同 //設置文本框的背景色 //將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){ //獲取當前文本框的內(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); } }); }); });
小結
關于jQuery的學習,不只是停留在例子上面,我們還要從中不斷地深入,理解并能夠運用起來。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。