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() + "&nbsp;*&nbsp;" + y + "&nbsp;=&nbsp;" + (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 - 下载地址]

当前版本,&nbsp;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-en
http://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/each
jQuery, http://docs.jquery.com/Core/jQuery

   [jQuery - Ajax]

 jQuery的Ajax文档, http://docs.jquery.com/Ajax/jQuery.ajax
jQuery的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/hover
submit提交, 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/filter
find查找, 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/easing
jCarouseLite, 走马灯效果, 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.js

   JScript (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

   About Cross-Frame Scripting and Security:关于跨框架脚本和安全, http://msdn2.microsoft.com/en-us/library/ms533028.aspx

   How to Build Tables Dynamically:如何动态构建表格, http://msdn2.microsoft.com/en-us/library/ms532998.aspx

   Filter Property (Tabular Data Control): - Filter属性(表格数据控件), http://msdn2.microsoft.com/en-us/library/ms531364.aspx

   [jQuery - 综合实例]

   实现前一个和后一个效果

   跨窗口调用函数

   定时刷新

   下拉列表框打开指定网站

生成在两个边界间的随机数
文本输入框与标签自动更换

   密码输入框与标签自动更换

   文本输入区域与标签自动更换

   Pre标签在IE与Firefox下效果相对理想的换行处理

固定表头,滚动表格内容

           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

这里写图片描述

猜你喜欢

转载自blog.csdn.net/yffkjhg/article/details/83782980