介绍一个基于jquery的table排序插件

介绍一个基于jquery的table排序插件
觉得挺好用介绍给大家

官方介绍http://tablesorter.com/docs/

用法很简单
1、引入js

<script type="text/javascript" src="${resourceUrl}/js/jquery.tablesorter.min.js"></script>

2、table必须是这种格式的,标题用<thead>包裹，内容用<tbody>包裹

<table id="mytable">
    <thead>
    <tr>
        <th></th>
        <th></th>
        ..............
    </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            ..............
        </tr>
    </tbody>
</table>

3、在ready中调用

$(function () {
     $("#myTable").tablesorter();
});

4、可以定义不参加排序的列

//第一列不排序
$.tablesorter.defaults.headers = {0: {sorter: false}};

5、可以设置默认排序，可以设置组合排序

//默认第一列 和第二列排序
//设置shift+alt键，选择组合排序
$("#myTable").tablesorter( {sortList: [[1,0]]} ,{sortForce:[[0,0]]},{sortMultiSortKey: 'altKey'});

jquery定义除输入框之外的背景色

$j("table.infoTable tr td").each(function(){var child = $j(this).children().eq(0);if(!child.is("input") && !child.is("select") && !child.is("textarea")&& !child.is("span")) $j(this).css('backgroundColor', '#e6eff3'); });

关于javascript闭包

function Test(){
            var num = 1;
            AddNum = function(){num++;};
            function getNum(){
                alert(num);
            }
            return getNum;
        }
        var test = Test();

        test();//1
        AddNum();
        test();//2

 

用闭包貌似可以模拟java中类的概念

Test是一个类

num是一个字段

getNum是get方法

AddNum是一个方法 这里不用var声明，为的是可以在全局访问

自己的一点理解，还在深入

 

AddNum是一个

jquery validate自带验证

validate自带的默认验证

required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.format("请输入一个最大为 {0} 的值"),
min: jQuery.format("请输入一个最小为 {0} 的值")

http://bluefuture.javaeye.com/blog/668196

javascript 动态创建function

  var cellfuncs = new Array();
for(var i = 0;i < selectedArrayLength;i++){
var fun = new Function("data","return data["+i+"]");
cellfuncs = cellfuncs.concat(fun);
}

jquery 验证所有text,textare非法字符

01 var $j = jQuery.noConflict();
02 //使用此方法验证所有text textarea 是否含有非法字符
03 $j(document).ready(function(){
04    $j("input[type='text']").each(function(i){
05         $j(this).keyup(function() { checkIllegalChar($j(this)); });
06     });
07     $j("textarea").each(function(i){
08         $j(this).keyup(function() { checkIllegalChar($j(this)); });
09     });
10 });
11
12
13
14 function checkIllegalChar(obj){
15     var value = obj.val();
16     if(!checkChar(value)){
17          obj.val(value.substring(0,value.length-1));
18          obj.focus();
19        
20     }
21 }
22
23   //检查输入中的非法字符
24 function checkChar(InString) {
25     var RefString = "<";
26     var RefString2 = "%";
27     var RefString3 = "\"";
28     var RefString4 = ">";
29     var RefString5 = "~";
30     var RefString6 = "&";
31     var RefString7 = "?";
32     var RefString8 = "'";
33     for (Count = 0; Count < InString.length; Count++) {
34         TempChar = InString.substring(Count, Count + 1);
35         if ((RefString.indexOf(TempChar, 0) == 0) || (RefString2.indexOf(TempChar, 0) == 0) || (RefString3.indexOf(TempChar, 0) == 0) || (RefString4.indexOf(TempChar, 0) == 0) || (RefString5.indexOf(TempChar, 0) == 0) || (RefString6.indexOf(TempChar, 0) == 0) || (RefString7.indexOf(TempChar, 0) == 0) || (RefString8.indexOf(TempChar, 0) == 0)) {
36             alert("您的输入中含有非法字符\"<\",\"\"\",\"%\",\"> \",\"~\",\"&\",\"?\",\"'\",请重新输入!");
37             return (false);
38         }
39     }
40     return (true);
41 }

Unable to modify the parent container element before the child element is closed (KB927917)

又涨见识了
IE8报下面错误，而且是我的机器不报，同事的机器报，试了4台，两个报，两个不报，IE版本都一样，没想明白
解决：1、查看是否有未关闭的html标签，比如<table>而没有</table> (我就是这个原因)
2、是否在页面未加载完前js代码操作了body里的元素，将相关js代码移到</body>后面



网页错误详细信息

用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
时间戳: Wed, 14 Apr 2010 08:33:56 UTC


消息: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
行: 0
字符: 0
代码: 0
URI: 


http://support.microsoft.com/kb/927917

百度登陆popup.js

一直在项目中用百度的popup.js，挺好用兼容性不错
有关详细介绍：http://bbs.80nian.net/thread-428-1-1.html
使用中自己也试着修改了些源码 以适应实际需要
1、在弹出层的时候popup.js隐藏了父页面中所有的select选择框，当然这是必要的，但项目中用到了日期选择框js，如果他们两个一块用，呵呵，就开始打架了，现象是 当关闭popup弹出框后会发现页面上有年份和月的select下拉框，我看到是在左上角
      分析popup.js，修改了源码，在popup.js隐藏select的时候，判断如果id为日期选择框中的id名字就不做操作，OK！
2、关闭按钮图标问题，popup.js写死从www.baidu.com中取关闭按钮图片，总不能用着人家js还要用人家图片 呵呵，索性换成了个全角 的X 哈哈
3、遇到一个新需求，就是想在关闭popup的时候，做一些判断处理，看来要对刚刚那个X动手脚了，在config中加了个属性showCloseButton，如果showCloseButton=true显示X，否则不显示X，然后自己在页面中加一个button处理关闭事件，这样自己想做什么就做什么了，哈哈

javascript 缺少对象

经常遇到javascript 缺少对象的错误，无外乎调用的js方法未定义，名字写错了，之类，今儿遇到的郁闷的
我在页面中加了一个注释 <!-- -- >，注意结束标签--和>之间有个空格，结果未起作用，结果可想而知，找了半天才找到

javascript 填字游戏

JavaScript写的小游戏 用了jquery

访问地址：http://liuspring315.googlepages.com/

javascript根据生日计算年龄

<SCRIPT LANGUAGE="JavaScript">
<!--
var birthday=new Date("1983-12-31".replace(/-/g, "\/"));
var d=new Date();
var age = d.getFullYear()-birthday.getFullYear()-((d.getMonth()<birthday.getMonth()|| d.getMonth()==birthday.getMonth() && d.getDate()<birthday.getDate())?1:0);
alert(age);
//-->
</SCRIPT>

javascript 单引号转义

在传递sql串时遇到单引号转义的问题
javascript中可以用双引号又可以用单引号，乱了，乱了
网上搜到一个这样的好使了
<BODY onLoad='javascript:alert("<html><body onload=\"&#39;rrrr&#39;\">")'>
参考：http://topic.csdn.net/t/20021223/14/1291582.html

js判断iframe加载完成

<iframe src="http://hi.baidu.com/liuspring" onreadystatechange="if(this.readyState=='complete')alert('加载完成');"></iframe>

javascript 将给定日期增加n个月

//将给定日期增加NumDay个月
    function addDate(dtDate,NumDay){
        var date = new Date(dtDate);
        var lIntval = parseInt(NumDay);
        date.setMonth(date.getMonth() + lIntval);
        return date.getYear() +'-' + (date.getMonth()+1) + '-' +date.getDate();
    }

addDate("2008-01-01".replace(/-/g, "\/"),2);


=======================================
// addDate("5",5,"2004/12/1 00:00:00")
function addDate(type,NumDay,dtDate){
   var date = new Date(dtDate)
type = parseInt(type) //类型
lIntval = parseInt(NumDay)//间隔
switch(type){
   case 6 ://年
date.setYear(date.getYear() + lIntval)
break;
case 7 ://季度
date.setMonth(date.getMonth() + (lIntval * 3) )
break;
case 5 ://月
date.setMonth(date.getMonth() + lIntval)
break;
case 4 ://天
date.setDate(date.getDate() + lIntval)
break
case 3 ://时
date.setHours(date.getHours() + lIntval)
break
case 2 ://分
date.setMinutes(date.getMinutes() + lIntval)
break
case 1 ://秒
date.setSeconds(date.getSeconds() + lIntval)
break;
default:
   
}
return date.getYear() +'-' + (date.getMonth()+1) + '-' +date.getDate()+ ' '+ date.getHours()+':'+date.getMinutes()+':'+date.getSeconds()
}

显示帮助的div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<HEAD>  
<TITLE>code by：haiwa - 随滚动条移动的层 - 中国asp之家 - www.aspxhome.com</TITLE>  
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">  
</HEAD>  
<style>  
<!--  
.div{  
position: absolute;  
border: 2px solid red;  
background-color: #EFEFEF;  
line-height:90px;  
font-size:12px;  
z-index:1000;  
}  
-->  
</style>  
<BODY>  
<div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center">正中...</div>  
<SCRIPT LANGUAGE="JavaScript">  
function sc1(){  
document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2)+"px";  
document.getElementById("Javascript.Div1").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2)+"px";  
}  
</SCRIPT>  


<div id="Javascript.Div2" class="div" style="width: 240px; height:90px" align="center">左上...</div>  
<SCRIPT LANGUAGE="JavaScript">  
function sc2(){  
document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop)+"px";  
document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft)+"px";  
}  
</SCRIPT>  

<div id="Javascript.Div3" class="div" style="width: 240px; height:90px" align="center">左下...</div>  
<SCRIPT LANGUAGE="JavaScript">  
function sc3(){  
document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight)+"px";  
document.getElementById("Javascript.Div3").style.left=(document.documentElement.scrollLeft)+"px";  
}  
</SCRIPT>  

<div id="Javascript.Div4" class="div" style="width: 240px; height:90px" align="center">右上...</div>  
<SCRIPT LANGUAGE="JavaScript">  
function sc4(){  
document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop)+"px";  
document.getElementById("Javascript.Div4").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth)+"px";  
}  
</SCRIPT>  

<div id="Javascript.Div5" class="div" style="width: 240px; height:90px" align="center">右下...</div>  
<SCRIPT LANGUAGE="JavaScript">  
function sc5(){  
document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight)+"px";  
document.getElementById("Javascript.Div5").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth)+"px";  
}  
</SCRIPT>  


<SCRIPT LANGUAGE="JavaScript">  
<!--  
function scall(){  
sc1();sc2();sc3();sc4();sc5();  
}  
window.onscroll=scall;  
window.onresize=scall;  
window.onload=scall;  
//-->  
</SCRIPT>  
<div style="position: absolute; top: 0px; left: 0px; width: 10000px; height: 4000px;"></div>  
</BODY>  
</HTML>