javascript操作Table

 

     概述：父页面A调用子页面B，从子页面B返回数据从而在父页面A上构建一行追加到原有的表格上；

----------------------------------------------------------------------------------------

    A页面的调用脚本：

 

 1var RecordObj = null;
 2        var OverRecordObj = null;
 3        function GetSth()
 4        {
 5            var url = "../CorpResTree.aspx?URL=Scrap/AccountList.aspx";
 6            var reStr=window.showModalDialog(url,window,"dialogHeight:300px;dialogWidth:580px;center:1;help:0;status:0;");
 7            if(reStr != null)
 8            {
 9                var values=reStr.split(',');
                var tbmain=document.getElementById('GVInOutMain');
                var newRow=tbmain.insertRow();
                newRow.id=values[0];
                newRow.className="grid_row";
                for(var i=1;i<7;i++)
                {
                    var newCell=newRow.insertCell();
                    newCell.innerHTML=values[i];
                    newCell.align="center";
                }
                newRow.onmouseover=function()
                                    {
                                        var obj=newRow;            
                                        if(obj != RecordObj)
                                        {    
                                            obj.className = 'trm_over';
                                        }
                                        
                                        if( OverRecordObj != null && OverRecordObj != RecordObj)
                                        {
                                            OverRecordObj.className = 'trm_out';
                                        }
                                        
                                        OverRecordObj = obj;
                                    }
                newRow.onclick=function()
                                {
                                    var obj=newRow;
                                    obj.className = 'trm_focus';
                                    if( RecordObj != null && RecordObj != obj)
                                    {
                                        RecordObj.className = 'trm_out';
                                    }
                                    RecordObj = obj;    
                                    document.getElementById('btnDel').disabled = false;
                                    //document.getElementById('hdnItemIndex').value = row.id;
                                }
            }
        }

 

 A页面相关元素：

 1<input id="btnAdd" type="button" onclick="GetSth();" value="增 加"/>
 2
 3<table id="GVInOutMain" border="0" cellpadding="0" cellspacing="0" class="grid" rules="all">
 4                                <tr align="center" class="grid_head">
 5                                    <th align="center" nowrap="nowrap" scope="col" style="width: 70px">
 6                                        名称</th>
 7                                    <th align="center" nowrap="nowrap" scope="col" style="width: 70px">
 8                                        编码</th>
 9                                    <th align="center" nowrap="nowrap" scope="col" style="width: 70px">
                                        规格</th>
                                    <th align="center" nowrap="nowrap" scope="col" width="70" style="width: 70px">
                                        购买日期</th>
                                    <th align="center" nowrap="nowrap" scope="col" style="width: 70px">
                                        责任人</th>
                                        <th align="center" nowrap="nowrap" scope="col" style="width: 70px">
                                        净值</th>
                                </tr>
                            </table>

-------------------------------------------------------------

B页面的js脚本：

 

Code

 B页面的HTML元素：

.....

一个和A页面上一摸一样的表格，只不过是GridView动态生成的；一个按钮关联SelectSave()函数。

------------------------------------------------------------------------------------------------

总结：

• 熟悉了下js实现类的方法，可惜的是不能在页面间传递js对象 ，指的是子页面关闭回到父页面这种情况，如果是是通过iframe嵌套的话另当别论，因为js对象是引用类型而页面关闭的时候js就会消失（不够严谨）；
• 体会到了W3C标准的重要性，IE、FireFox等没有统一的页面对象操作方法，导致我一天搜索了不下40个页面，浪费了相当长的时间和体力才搞定；
• 并且在IE下不能调试脚本，只好alert()这里，alert()那里；FireFox下的调试用的插件都摆在一边没法子用；
• appendChild();      document.createElement("");            Row1.setAttribute("align","center");      这几个函数在IE下都不能用；最终用   insertRow();insertCell;Row1.align="center";才搞定。
• 给元素添加事件相应函数的问题用   "莫名函数"....
  

 function Info(id,code,name,specs,btime,man,value) //写的一个js类，:-)权作练习用，多此一举啦
     {
        this.AccountID=id;
        this.AccountCode=code;
        this.ResName=name;
        this.Specs=specs;
        this.PurchaseDay=btime;
        this.Principal=man;
        this.ResidualCost=value;
        
        if(typeof Info._initialized=="undefined")
        {
            Info.prototype.ToStr=function()
            {
                return this.AccountID+','+this.AccountCode+','+this.ResName+','+this.Specs+','+this.PurchaseDay+','+this.Principal+','+this.ResidualCost;
            };
            Info._initialized=true;
        }
     }
     var info;
    function ClickRow(row)//绑定在GridView行上的属性，row-是GridViewRow (-_- "有点啰嗦啦）
    {
        info=new Info(row.id,row.children[1].innerHTML,row.children[0].innerHTML,row.children[2].innerHTML,row.children[3].children[0].innerHTML,row.children[4].innerHTML,row.children[5].innerHTML);
        //alert(info.ToStr());
        document.getElementById('HdnRow').value=row.innerHTML;
        document.getElementById('btnAdd').disabled=false;        
    }
        function SelectSave()//最后用来回传值的按钮
        {
            //alert(info.ToStr());
            var reValue=document.getElementById('HdnRow').value;
            window.parent.window.returnValue=info.ToStr();
            window.close();
        }