jQuery 綜合例項 固定表頭 滾動表格內容
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
jQuery - 綜合例項 - 固定表頭，滾動表格內容
[原始碼]
<html>
<head>
<script src="jquery-1.2.js"></script>
<script>
$(document).ready(function () {
for (var y = 1; y < 20; y++) {
$("#table_y").append("<tr style='height: 100px;'><td style='width: 90px;'>" + y.toString() + "</td></tr>");
$("#table_xy").append("<tr y='" + y.toString() + "' style='height: 100px;'></tr>");;
}
for (var x = 1; x < 20; x++) {
$("#table_x tr").append("<td style='width: 100px;'>" + x.toString() + "</td>");
$("#table_xy tr").each(function (index, element) {
var y = $(element).attr("y");
$(element).append("<td style='width: 100px;'>" + x.toString() + " * " + y + " = " + (x * y).toString() + "</td>");
});
}
$("#divxy").scroll(function () {
$("#divx").get(0).scrollLeft = this.scrollLeft;
$("#divy").get(0).scrollTop = this.scrollTop;
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
</td>
<td>
<div id="divx" style="width:400px; height:100px; overflow:hidden">
<table id="table_x" border="1" style="width: 2000px;">
<tr style="height: 90px;">
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="divy" style="width:100px; height:400px; overflow:hidden">
<table id="table_y" border="1">
</table>
</div>
</td>
<td>
<div id="divxy" style="width:400px; height:400px; overflow:scroll">
<table id="table_xy" border="1" style="width: 2000px;">
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
[jQuery - 官方網站]
http://jquery.com/[jQuery - 下載地址]
當前版本, http://docs.jquery.com/Release:jQuery_1.2.1下載列表, http://docs.jquery.com/Downloading_jQuery
最新程式碼, http://code.jquery.com/nightlies/jquery-nightly.js
[jQuery - 相關論壇]
http://groups.google.com/group/jquery-enhttp://WebDev.board.newsmth.net/
http://WebGeeks.board.newsmth.net/
http://bbs.pku.edu.cn/, homepage看版
http://forum.csdn.net/SList/JavaScript/
[jQuery - 關鍵詞]
jQuery[jQuery - Core核心]
each迭代, http://docs.jquery.com/Core/eachjQuery, http://docs.jquery.com/Core/jQuery
[jQuery - Ajax]
jQuery的Ajax文件, http://docs.jquery.com/Ajax/jQuery.ajaxjQuery的Ajax選項，http://docs.jquery.com/Ajax/jQuery.ajax#options
dataType選項，設定返回值型別
timeout選項，用於設定超時
與PHP整合可以使用json_encode返回結果, http://www.php.net/manual/zh/function.json-encode.php
readyState獲取請求操作的當前狀態, http://msdn2.microsoft.com/en-us/library/ms534361.aspx
[jQuery - 特效]
jQuery淡入特效,http://docs.jquery.com/Effects/fadeIn
[jQuery - Selectors選擇器]
表單元素選擇器, http://docs.jquery.com/DOM/Traversing/Selectors#Form_Selectors屬性相等選擇器，http://docs.jquery.com/Selectors/attributeEquals
checked選中, http://docs.jquery.com/Selectors/checked
:input匹配所有input, textarea, select和button元素, http://docs.jquery.com/Selectors/input
選擇器在選擇body中出現的title標記時，會出現和預期不同的效果。element按指定名稱匹配所有元素, http://docs.jquery.com/Selectors/element
[jQuery - Attributes屬性]
val獲取第一個匹配元素value屬性的內容, http://docs.jquery.com/Attributes/val
[jQuery - 常用函式]
attr訪問自定義屬性，減少javascript指令碼中程式碼和資料的耦合filter, 用於在集合中過濾元素
[jQuery - Events事件]
hover, http://docs.jquery.com/Events/hoversubmit提交, http://docs.jquery.com/Events/submit
focus響應每個匹配元素的焦點事件, http://docs.jquery.com/Events/focus
click單擊, 觸發每個匹配元素的單擊事件, 繫結函式到每個匹配元素的單擊事件, http://docs.jquery.com/Events/click
[jQuery - Manipulation操作]
after在每個匹配的元素之後插入內容, http://docs.jquery.com/Manipulation/after
[jQuery - Traversing遍歷器]
filter過濾, http://docs.jquery.com/Traversing/filterfind查詢, http://docs.jquery.com/Traversing/find
[jQuery - Tutorials教程]
Introducing $(document).ready(), http://docs.jquery.com/Tutorials:Introducing_%24%28document%29.ready%28%29[jQuery - plugins外掛]
Easing動畫, http://jquery.com/plugins/project/easingjCarouseLite, 走馬燈效果, http://jquery.com/plugins/project/jCarouselLite
tableFilter, 表過濾器, http://jquery.com/plugins/project/tableFilter
Rounded Corner圓角矩形, http://docs.jquery.com/Tutorials:Rounded_Corners#Rounded_Corners_Without_Images
[jQuery - Utilities實用工具]
trim去掉字串前後的空格, http://docs.jquery.com/Utilities/jQuery.trim[jQuery - 參考資料]
http://www.json.org/, http://www.json.org/json.jsJScript (Windows Script Technologies):, http://msdn2.microsoft.com/en-us/library/hbxc2t98.aspx
prototype Property (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/f5s9ycex.aspx
parseInt Method (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/x53yedee.aspx
toString Method (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/k6xhc6yc.aspx
HTTP Status Codes (Windows):, http://msdn2.microsoft.com/en-us/library/Aa384325.aspx
HTML+TIME:, http://msdn2.microsoft.com/en-us/library/ms533112.aspx
HTA:APPLICATION物件, http://msdn2.microsoft.com/en-us/library/ms536495.aspx
How to Build Tables Dynamically:如何動態構建表格, http://msdn2.microsoft.com/en-us/library/ms532998.aspx
[jQuery - 綜合例項]
實現前一個和後一個效果
跨視窗呼叫函式
定時重新整理
下拉列表框開啟指定網站
生成在兩個邊界間的隨機數文字輸入框與標籤自動更換
密碼輸入框與標籤自動更換
文字輸入區域與標籤自動更換
Pre標籤在IE與Firefox下效果相對理想的換行處理
固定表頭，滾動表格內容
給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow
