为什么类在执行函数的过程中 原先定义的变量看不到了

为什么这个类在执行函数的过程中  原先定义的变量看不到了
在ff下才能使用，在js代码256行打个断点就看到了
这是html页面<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link type="text/css" href="CCCDADataTable.css" rel="stylesheet">
<script type="text/javascript" src="CCCDADataTable.js"></script>
<script type="text/javascript">
window.onload=function(){
var mydata = [ 
{id:"3",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
{id:"1",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
{id:"6",invdate:"2007-10-05",name:"test2",note:"note2中中年男女男女",amount:"300.00",tax:"20.00",total:"320.00"}, 
{id:"5",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
{id:"9",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
{id:"7",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} 
];
var cccdadatatable=new CCCDADataTable({
source:mydata,
datatype:"local",
colmodel:[
{name:"id",index:"id",sorttype:"int"},
{name:"invdate",index:"invdate",sorttype:"date"},
{name:"name",index:"name",sorttype:"string"},
{name:"note",index:"note",sorttype:"string"},
{name:"amount",index:"amount",sorttype:"float"},
{name:"tax",index:"tax",sorttype:"float"},
{name:"total",index:"total",sorttype:"float"}
],
bindid:"div1",
aasorting:true
});

}
</script>
</HEAD> <BODY>
<div id="div1" style="width:50%;margin:auto;"></div>
</BODY>
</HTML>

解决方案 »

  1.   


    //EventUtil类
    var EventUtil={
    addHandler:function(element,type,handler){
    if(element.addEventListener){
    element.addEventListener(type,handler,false);
    }
    else if(element.attachEvent){
    element.attachEvent("on"+type,handler);
    }
    else{
    element["on"+type]=handler;
    }
    },
    getEvent:function(event){
    return event?event:window.event;
    },
    getTarget:function(event){
    return event.target||event.srcElement;
    }
    };
    //class属性辅助类
    var ClassAttriUtil={
    /********************操纵class的几个辅助函数***************/
    /*
    * Get the class string from the object
    * @param object o the DOM object 
    * @return string the class string of the object
    */
    //var getClass=function(o){
    getClassName:function(o){
    return o.className;
    },
    /*
    * Set the class string from the object
    * @param string cls the class string to be set
    * @param object o the DOM object where
    * the class string to be set to
    */
    //var setClass=function(o){
    setClassName:function(cls,o){
    o.className=cls;
    },
    /*
    * Parse the classes list to array by split(" ")
    * @param string cl a string of class or a list of classes
    * @return array with the element of class name
    */
    getClassArray:function(cl){
    if(cl && typeof(cl)=="string")
    return cl.split(" ");
    else return cl;
    },
    /*
    * If the class is listed in the classes list ,return true
    * @param string cl a single class name 
    * @param string cls class name list
    * @return true if the class is listed 
    * in the classes list.else return false.
    */
    matchClass:function(cl,cls){
    if(!cls) return false;
    cls= this.getClassArray(cls);
    for(var c in cls) if(cl==cls[c]) return true;
    return cl==cls;
    },
    /*
    * remove one of the classes from the object
    * @param string cl a single class name 
    * @param string cls class name list
    */
    removeClass:function(cl,o){
    var cls=this.getClassArray(this.getClassName(o));
    var _cls="";
    for(var i in cls) if (cl!=cls[i]) _cls+=" "+cls[i];
    this.setClassName(_cls,o);
    },
    /*
    * add a class to the object
    * @param string cl a single class name 
    * @param object o the DOM object
    * where the class string to be ADD to
    */
    addClass:function(cl,o){
    this.removeClass(cl,o);
    this.setClassName(this.getClassName(o)+" "+cl,o);
    },
    /*********************************************************/
    };
      

  2.   

    //CCCDADataTable类
    function CCCDADataTable(arguments){
    this.source=arguments.source;
    this.datatype=arguments.datatype;
    this.colmodel=arguments.colmodel;
    this.bindElement=document.getElementById(arguments.bindid);
    this.aasorting=arguments.aasorting;

    this.table=document.createElement("table");

    this.initDataTable.apply(this,arguments);
    }
    CCCDADataTable.prototype={
    constructor:CCCDADataTable,

    //载入本地数组，生成表格
    bindlocal:function(){
    var tbody=document.createElement("tbody");
    this.table.appendChild(tbody);
    //thead
    var thead=this.table.createTHead();
    thead.insertRow(0);
    for(var i=0;i<this.colmodel.length;i++)
    {
    var th=document.createElement("th");
    th.appendChild(document.createTextNode(this.colmodel[i].name));
    thead.rows[0].appendChild(th);
    }
    //tbody
    for(var i=0;i<this.source.length;i++)
    {
    tbody.insertRow(i);

    for(var j=0;j<this.colmodel.length;j++)
    {
    tbody.rows[i].insertCell(j);
    tbody.rows[i].cells[j].appendChild(document.createTextNode(this.source[i][this.colmodel[j].name]));
    }
    }
    this.bindElement.appendChild(this.table);
    },
    //改变class,操作表格css
    changeClassname:function(classname){
    this.table.setAttribute("class",classname);
    },
    //给th添加默认class
    addThDefaultClass:function(className){
    var tr=this.table.tHead.firstChild;
    for(var th=tr.firstChild;th!=tr.lastChild.nextSibling;th=th.nextSibling)
    {
    if(th.nodeType===1 && th.nodeName.toLowerCase()==="th")
    {
    ClassAttriUtil.setClassName(className,th);
    }
    }
    },
    //循环tbody下的tr，每循环一次tr并执行函数trfunc
    tbodyTrLoop:function(tbody,trfunc){
    for(var tr=tbody.firstChild;tr!=tbody.lastChild.nextSibling;tr=tr.nextSibling)
    {
    if(tr.nodeType===1 && tr.nodeName.toLowerCase()==="tr")
    {
    trfunc(tr);
    }
    }
    },
    //循环tr下的td，每循环一次td执行函数tdfunc
    trTdLoop:function(tr,tdfunc){
    //去掉tr孩子td的class
    for(var td=tr.firstChild;td!=tr.lastChild.nextSibling;td=td.nextSibling)
    {
    if(td.nodeType===1 && td.nodeName.toLowerCase()==="td")
    {
    tdfunc(td);
    }
    }
    },
    //tr的click事件响应函数
    trclick:function(event){
    var event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
    //一般是tbody
    var parent=event.currentTarget.parentNode;
    //循环去掉tbody孩子tr的class，并同时去掉tr孩子td的class
    CCCDADataTable.prototype.tbodyTrLoop(parent,function(tr){
    ClassAttriUtil.removeClass("trclick",tr);
    CCCDADataTable.prototype.trTdLoop(tr,function(td){
    ClassAttriUtil.removeClass("tdclick",td);
    });
    });
    ClassAttriUtil.addClass("trclick",event.currentTarget);
    for(var j=0;j<event.currentTarget.cells.length;j++)
    {
    ClassAttriUtil.addClass("tdclick",event.currentTarget.cells[j]);
    }
    },
    //tr的mouseover事件响应函数
    trmouseover:function(event){
    var event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
    ClassAttriUtil.addClass("trmouseover",event.currentTarget);
    for(var j=0;j<event.currentTarget.cells.length;j++)
    {
    ClassAttriUtil.addClass("tdmouseover",event.currentTarget.cells[j]);
    }
    },
    //tr的mouseout事件响应函数
    trmouseout:function(event){
    var event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
    //一般是tbody
    var parent=event.currentTarget.parentNode;
    //循环去掉tbody孩子tr的class，并同时去掉tr孩子td的class
    CCCDADataTable.prototype.tbodyTrLoop(parent,function(tr){
    ClassAttriUtil.removeClass("trmouseover",tr);
    CCCDADataTable.prototype.trTdLoop(tr,function(td){
    ClassAttriUtil.removeClass("tdmouseover",td);
    });
    });
    },
    //td的双击事件响应函数
    tddbclick:function(event){
    event.currentTarget.setAttribute("class","tdclick");
    },
    //th的click事件响应函数
    thclick:function(event){
    var event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
    var table=this.parentNode.parentNode.parentNode;
    if(ClassAttriUtil.getClassName(target).toLowerCase()==="sorting")
    {
    var parent=event.currentTarget.parentNode;
    for(var th=parent.firstChild;th!=parent.lastChild.nextSibling;th=th.nextSibling)
    {
    ClassAttriUtil.setClassName("sorting",th);
    }
    ClassAttriUtil.setClassName("sorting_asc",target);
                CCCDADataTable.prototype.colSorting(table,"asc","id");
    }
    else if(ClassAttriUtil.getClassName(target).toLowerCase()==="sorting_asc")
    {
    var parent=event.currentTarget.parentNode;
    for(var th=parent.firstChild;th!=parent.lastChild.nextSibling;th=th.nextSibling)
    {
    ClassAttriUtil.setClassName("sorting",th);
    }
    ClassAttriUtil.setClassName("sorting_desc",target);
    CCCDADataTable.prototype.colSorting(table,"desc","id");
    }
    else if(ClassAttriUtil.getClassName(target).toLowerCase()==="sorting_desc")
    {
    var parent=event.currentTarget.parentNode;
    for(var th=parent.firstChild;th!=parent.lastChild.nextSibling;th=th.nextSibling)
    {
    ClassAttriUtil.setClassName("sorting",th);
    }
    ClassAttriUtil.setClassName("sorting_asc",target);
    CCCDADataTable.prototype.colSorting(table,"asc","id");
    }
    },
    //列排序函数
    colSorting:function(table,sortType,sortIndex){
    var tbody=table.tBodies[0];
    var rows=tbody.rows;
    var aTrs=new Array;

    for(var m=0;m<this.colmodel.length;m++)
    {
    if(this.colmodel[m].toLowerCase()===sortIndex.toLowerCase())
    break;
    }
    for(var i=0;i<rows.length;i++)
    {
    aTrs[i]=rows[i];
    }
    aTrs.sort(this.numCompare(m));
    var oFragment = document.createDocumentFragment();
            for (var j=0; j < aTrs.length; j++) {
                oFragment.appendChild(aTrs[j]);
            }
    tbody.appendChild(oFragment);
    },
    //数字比较函数
    numCompare:function(m){
    return function(value1,value2){
    if(value1.cells[m]<value2[m])
    {
    return -1;
    }
    else if(value1.cells[m]>value2.cells[m])
    {
    return 1;
    }
    else
    {
    return 0;
    }
    }
    },
    //string比较函数
    stringCompare:function(value1,value2,sortIndex){
    if(value1.sortIndex.toLowerCase()<value2.sortIndex.toLowerCase())
    {
    return -1;
    }
    else if(value1.sortIndex.toLowerCase()>value2.sortIndex.toLowerCase())
    {
    return 1;
    }
    else
    {
    return 0;
    }
    },
    //注册事件
    registevent:function(element,type){
    switch(element)
    {
    case "tr":
    var tr=this.table.tBodies.item("tbody").rows;
    switch(type)
    {
    case "click":
    for(var i=0;i<tr.length;i++)
    {
    EventUtil.addHandler(tr.item(i),type,this.trclick);
    }
    break;
    case "mouseover":
    this.tbodyTrLoop(this.table.tBodies.item("tbody"),function(tr){
    EventUtil.addHandler(tr,type,CCCDADataTable.prototype.trmouseover);
    })
    break;
    case "mouseout":
    this.tbodyTrLoop(this.table.tBodies.item("tbody"),function(tr){
    EventUtil.addHandler(tr,type,CCCDADataTable.prototype.trmouseout);
    })
    break;
    }
    break;
    case "th":
    var th=this.table.tHead.firstChild.children;
    switch(type)
    {
    case "click":
    for(var i=0;i<th.length;i++)
    {
    EventUtil.addHandler(th.item(i),type,this.thclick);
    }
    break;
    }
    break;
    };

    },
    //判断数据来源，生成表格
    initDataTable:function(){
    switch(this.datatype)
    {
    case "local":
    //加载数据
    this.bindlocal();
    break;
    case "json":
    break;
    }
    //注册事件
    this.registevent("tr","click");
    this.registevent("tr","mouseover");
    this.registevent("tr","mouseout");
    if(this.aasorting==true)
    {
    this.registevent("th","click");
    }
    //加载样式表
    this.changeClassname("basictable1");
    if(this.aasorting==true)
    {
    this.addThDefaultClass("sorting");
    }
    }
    }
      

  3.   

    这是csstable.basictable1{
    color: #333333;
        font: 80%/1.45em "Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    clear: both;
        margin: 0 auto;
        width: 100%;
    }
    table.basictable1 thead tr th{
    border-bottom: 1px solid black;
        cursor: pointer;
        font-weight: bold;
        padding: 3px 18px 3px 10px;
    }
    table.basictable1 thead tr th.sorting{
    background: url("image/sort_both.png") no-repeat scroll right center transparent;
    }
    table.basictable1 thead tr th.sorting_asc{
    background: url("image/sort_asc.png") no-repeat scroll right center transparent;
    }
    table.basictable1 thead tr th.sorting_desc{
    background: url("image/sort_desc.png") no-repeat scroll right center transparent;
    }
    table.basictable1 tbody tr {
    background-color: #DDFFDD;
    }
    table.basictable1 tbody tr.trclick {
    background-color:#FFDDDD;
    }
    table.basictable1 tbody tr.trmouseover {
    background-color:#FFDDDD;
    }
    table.basictable1 tbody tr td{
    padding: 3px 10px;
    background-color: #C4FFC4;
    cursor:default;
    }
    table.basictable1 tbody tr td.tdclick{
    background-color:transparent ;
    }
    table.basictable1 tbody tr td.tdmouseover{
    background-color:transparent ;
    }