在adjunction.html页面点击按钮，弹出新的页面result.html，然后在result.html页面输入新的值后，传递回父页面加数据，并且不刷新？

adjunction.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body><table width="200" border="1">
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>职业</td>
  </tr>
  <tr>
    <td>王丽</td>
    <td>23</td>
    <td>公务员</td>
  </tr>
  <tr>
    <td>李牧</td>
    <td>50</td>
    <td>将军</td>
  </tr>
  <tr>
    <td colspan="3"><input name="" type="button" value="添加" onclick="aca()"/></td>
  </tr>
</table><script type="text/javascript">
function aca()
{
var str ='result.html?a=100&b=20';
window.open(str);
}
function eachJson(jsonStr,breakCall) {
for(var v in jsonStr)
{
//alert(v+"=="+jsonStr[v]);
breakCall(v+"="+jsonStr[v]);
}
}var parseParam=function(param,key)
{
var paramStr=""; 
if(param instanceof String||param instanceof Number||param instanceof Boolean)
{
paramStr+="&"+key+"="+encodeURIComponent(param);
}
else
{
eachJson(param,function(i){
var k=key==null?i:key+(param instanceof Array?"["+i+"]":"."+i);
paramStr+='&'+k; 
}); 
}
// substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
return paramStr.substr(1); 
 
};var obj={name:'tom',class:'abc',classMates:'123'};
var ps =parseParam(obj);//alert(ps);
</script></body>
</html>result.html<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<input name="" type="text" />
<input name="" type="button" value="命名"/></body>
</html>新的数据传递回父页面在表格内增加内容，
并且不刷新，请问如何实现？

解决方案 »

  1.   

    result.html里通过window.opener可以获取到adjunction.html的window对象
      

  2.   

    只在IE有效
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    <html>  
      <head>  
        <title>a.html</title>  
          
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
        <meta http-equiv="description" content="this is my page">  
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
      </head>  
      <script language="JavaScript">  
            function openWin(){  
              
             /*  
              *   
              * window . showModalDialog ( sURL , vArguments , sFeatures )    建立模式对话框显示指定的文档  
              *            
              * * sURL:必选项,指定要载入和显示的 URL.  
              * * vArguments:指定供显示文档时使用的变量。利用这个参数可以传递任何类型的值，包括包含多个值得的数组。  
              *               对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。   
              *               window:把a1.html页面的window对象传递到a2.html页面上  
              *  * sFeatures可选项。指定对话框的窗口装饰。多个值之间用分号隔开。    
              */  
               //window.showModalDialog("a2.html",window,"dialogHeight:10;dialogWidth:20;help:no");   
                 
               //建立无模式对话框显示指定的文档，就是前面弹出一个网页在后面还能够更改。  
               window.showModelessDialog("a2.html",window,"dialogHeight:10;dialogWidth:20;help:no");      
           
        }  
          
        function setValue(cid, cname){  
           /*  
            *  <input type="text" name="cid" value=""  id="cid"  >  
              <input type="text" name="cname" value=""  id="cname"  >  
            */  
           document.getElementById("cid").value=cid;  
           document.getElementById("cname").value=cname;  
             
          
        }     
      </script>  
        
      <body>  
           <form name="form1" action="test.html" method="post" >  
              <input type="text" name="cid" value=""  id="cid"  >  
              <input type="text" name="cname" value=""  id="cname"  >  
              <input type="button" name="ok" value="请选择客户" onclick="openWin()" />  
           </form>  
    </body>  
        
    </html>  
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>a2.html</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      </head>
       <script language="JavaScript">
    function viewData(cid,cname){
    //获取a1.html对象window对象
    //对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。 

    //a1.html页面的window对象在a2.html页面上被封装到dialogArguments属性中
    var sdata=window.dialogArguments;

    //调用a1.html页面的函数
            sdata.setValue(cid,cname);
    window.close();
     }

      </script>
      <body>
          <table border="1">
             <tr>
              <td>操作</td>
    <td>客户id</td>
    <td>客户名称</td>
             </tr>
      
      <tr>
              <td><input type="button" value="选择" onclick="viewData('001','深圳华为')"></td>
    <td>001</td>
    <td>深圳华为</td>
             </tr>
      <tr>
              <td><input type="button" value="选择"   onclick="viewData('002','用友软件')"> </td>
    <td>002</td>
    <td>用友软件</td>
             </tr>
          </table>
      </body>
     
      
      
    </html>兼容IE火狐弹出窗口<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>t1</title><script language="javascript">
    function colorpick(obj){
    if (window.showModalDialog!=null)//IE判断
    {
    var smd= window.showModalDialog("t2.html","","dialogWidth:225px;dialogHeight:170px;status:no;help:no;scrolling=no;scrollbars=no");
    if(smd!=null)obj.style.background=rtn;
    return;
    }
    else
    {
    this.returnAction=function(strResult)
    {
    if(strResult!=null)
    obj.style.background=strResult;
    }
    window.open("t2.html","","width=225,height=170,menubar=no,toolbar=no,location=no,scrollbars=no,status=no,modal=yes");
    return;
    }
    }</script></head><body><input name="" type="button" onclick="colorpick(this)" value="弹出窗口"/>
    </body>
    </html><!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title><script type="text/javascript">
    function act(RGB) {
    if (window.showModalDialog!=null)//IE判断
    {
    parent.window.returnValue="#"+RGB;
    window.close();//firefox不支持
    }
    else
    {
    window.opener.returnAction("#"+RGB);
    top.close();//IE和FireFox都支持
    }
    }</script></head><body>
    <input name="" type="button" onclick="act(1)" value="关闭"/>
    </body>
    </html>
      

  3.   

    1、每个函数都包含两个非继承而来的方法：apply()和call()。 
    2、他们的用途相同，都是在特定的作用域中调用函数。 
    3、接收参数方面不同apply()接收两个参数，一个是函数运行的作用域(this)，另一个是参数数组。
    call()方法第一个参数与apply()方法相同，但传递给函数的参数必须列举出来。 
    1、方法定义call方法: 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])参数 thisObj 可选项。将被用作当前对象的对象。 arg1, arg2, , argN 可选项。将被传递方法参数序列。说明 call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
    如果没有提供 thisObj 参数，那么 Global 对象被用作thisObj。说明白一点其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。apply方法： 
    语法：apply([thisObj[,argArray]]) 
    定义：应用某一对象的一个方法，用另一个对象替换当前对象。 
    说明： 
    如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。 
    如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。2、常用实例function add(a,b)  
    {  
        alert(a+b);  
    }  
    function sub(a,b)  
    {  
        alert(a-b);  
    }  
      
    add.call(sub,3,1);    这个例子中的意思就是用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4); // 注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。
    function Animal(){  
        this.name = "Animal";  
        this.showName = function(){  
            alert(this.name);  
        }  
    }  function Cat(){  
        this.name = "Cat";  
    }  
     
    var animal = new Animal();  
    var cat = new Cat();  
      
    //通过call或apply方法，将原本属于Animal对象的showName()方法交给对象cat来使用了。  
    //输入结果为"Cat"  
    animal.showName.call(cat,",");  
    //animal.showName.apply(cat,[]);call 的意思是把 animal 的方法放到cat上执行，原来cat是没有showName() 方法，现在是把animal 的showName()方法放到 cat上来执行，所以this.name 应该是 Cat实现继承function Animal(name){    
    this.name = name;    
    this.showName = function(){    
    alert(this.name);    
    }    
    }    function Cat(name){  
    Animal.call(this, name);  
    }    var cat = new Cat("Black Cat");   
    cat.showName();Animal.call(this) 的意思就是使用 Animal对象代替this对象，那么 Cat中不就有Animal的所有属性和方法了吗，Cat对象就能够直接调用Animal的方法以及属性了多重继承function Class10()  
    {  
        this.showSub = function(a,b)  
        {  
            alert(a-b);  
        }  
    }  
      
    function Class11()  
    {  
        this.showAdd = function(a,b)  
        {  
            alert(a+b);  
        }  
    }  
      
    function Class2()  
    {  
        Class10.call(this);  
        Class11.call(this);  
    }  
    很简单，使用两个 call 就实现多重继承了
    当然，js的继承还有其他方法，例如使用原型链，这个不属于本文的范畴，只是在此说明call 的用法。说了call ，当然还有 apply，这两个方法基本上是一个意思，区别在于 call 的第二个参数可以是任意类型，而apply的第二个参数必须是数组，也可以是arguments
    还有 callee，caller其实javascript里的this指针逻辑上的概念也是实例化对象，这一点和java语言里的this指针是一致的，但是javascript里的this指针却比java里的this难以理解的多，究其根本原因我个人觉得有三个原因：　　原因一：javascript是一个函数编程语言，怪就怪在它也有this指针，说明这个函数编程语言也是面向对象的语言，说的具体点，javascript里的函数是一个高阶函数，编程语言里的高阶函数是可以作为对象传递的，同时javascript里的函数还有可以作为构造函数，这个构造函数可以创建实例化对象，结果导致方法执行时候this指针的指向会不断发生变化，很难控制。　　原因二：javascript里的全局作用域对this指针有很大的影响，由上面java的例子我们看到，this指针只有在使用new操作符后才会生效，但是javascript里的this在没有进行new操作也会生效，这时候this往往会指向全局对象window。　　原因三：javascript里call和apply操作符可以随意改变this指向，这看起来很灵活，但是这种不合常理的做法破坏了我们理解this指针的本意，同时也让写代码时候很难理解this的真正指向http://www.cnblogs.com/sharpxiajun/p/4148932.html
    http://uule.iteye.com/blog/1158829
      

  4.   

    判断浏览器的种类function isIE() {//ie
    //因为IE11已经不支持document.all了
    if (!!window.ActiveXObject || "ActiveXObject" in window)
    return true;
    else
    return false;
    }// 获取当前浏览器名及版本号
    var appInfo = function(){
    var browser = {appname: 'unknown', version: 0}, 
    userAgent = window.navigator.userAgent.toLowerCase();
    if(isIE())
    {
    browser.appname = "IE浏览器测试";  
    browser.version = "12"; 
    return browser;
    }
    else
    {
    // 使用navigator.userAgent来判断浏览器类型
    //msie,firefox,opera,chrome,netscape
    if (/(msie|firefox|opera|chrome|netscape)\D+(\d[\d.]*)/.test( userAgent ) )
    {  
    browser.appname = RegExp.$1;  
    browser.version = RegExp.$2;  
    }
    else if( /version\D+(\d[\d.]*).*safari/.test( userAgent ) )
    { // safari 
    browser.appname = 'safari';  
    browser.version = RegExp.$2;  
    }
    return browser;
    }
    }
    //调用
    var testBrowser = appInfo();
    var browerName=testBrowser.appname+"====="+testBrowser.version;
    alert(browerName);
      

  5.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <script>最短判断IE浏览器var ie = !-[1,]; //alert(ie); </script>
    <script type="text/javascript">
    function isIE() {//ie
    //因为IE11已经不支持document.all了
    if (!!window.ActiveXObject || "ActiveXObject" in window)
    return true;
    else
    return false;
    }// 获取当前浏览器名及版本号
    var appInfo = function(){
    var browser = {appname: 'unknown', version: 0}, 
    userAgent = window.navigator.userAgent.toLowerCase();
    if(isIE())
    {
    browser.appname = "IE";  
    browser.version = "12"; 
    return browser;
    }
    else
    {
    // 使用navigator.userAgent来判断浏览器类型
    //msie,firefox,opera,chrome,netscape
    if (/(msie|firefox|opera|chrome|netscape)\D+(\d[\d.]*)/.test( userAgent ) )
    {  
    browser.appname = RegExp.$1;  
    browser.version = RegExp.$2;  
    }
    else if( /version\D+(\d[\d.]*).*safari/.test( userAgent ) )
    { // safari 
    browser.appname = 'safari';  
    browser.version = RegExp.$2;  
    }
    return browser;
    }
    }
    //调用
    var testBrowser = appInfo();
    var browerName=testBrowser.appname+"====="+testBrowser.version;
    //alert(browerName);
    //检测函数
    var check = function(r) {
    return r.test(navigator.userAgent.toLowerCase());
    };
    var statics = {
    /**
     * 是否为webkit内核的浏览器
     */
    isWebkit : function(){
    return check(/webkit/);
    },
    /**
     * 是否为火狐浏览器
     */
    isFirefox : function() {
    return check(/firefox/);
    },
    /**
             * 是否为谷歌浏览器
             */
            isChrome : function() {
              return !statics.isOpera() && check(/chrome/);
            },
            /**
             * 是否为Opera浏览器
             */
            isOpera : function() {
              return check(/opr/);
            },
            /**
             * 检测是否为Safari浏览器
             */
            isSafari : function() {
              // google chrome浏览器中也包含了safari
              return !statics.isChrome() && !statics.isOpera() && check(/safari/);
            }
    };//alert("火狐浏览器======="+statics.isFirefox());
    function openWin()
    {
    /*
     *   
         * window . showModalDialog ( sURL , vArguments , sFeatures )    建立模式对话框显示指定的文档  
         *            
         * * sURL:必选项,指定要载入和显示的 URL.  
         * * vArguments:指定供显示文档时使用的变量。利用这个参数可以传递任何类型的值，包括包含多个值得的数组。  
         *               对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。   
         *               window:把a1.html页面的window对象传递到a2.html页面上  
         *  * sFeatures可选项。指定对话框的窗口装饰。多个值之间用分号隔开。    
         */  
        //window.showModalDialog("a2.html",window,"dialogHeight:10;dialogWidth:20;help:no");   
                  
        //建立无模式对话框显示指定的文档，就是前面弹出一个网页在后面还能够更改。 
    if(testBrowser.appname=="IE")
    {
    alert("点击测试IE浏览");
    window.showModelessDialog("a2.html",window,"dialogHeight:10;dialogWidth:20;help:no");
    }
    if(statics.isFirefox()==true)
    {
    alert("点击测试火狐浏览");
    }
          
    }function setValue(cid, cname)
    {  
    /*  
         *  <input type="text" name="cid" value=""  id="cid"  >  
            <input type="text" name="cname" value=""  id="cname"  >  
         */  
    document.getElementById("cid").value=cid;  
    document.getElementById("cname").value=cname;  
    }    
    </script><form name="form1" action="test.html" method="post" >  
    <input type="text" name="cid" value=""  id="cid"  >  
    <input type="text" name="cname" value=""  id="cname"  >
        <input type="button" name="ok" value="请选择客户" onclick="openWin()" />  
    </form>  
    </body>
    </html>
      

  6.   

    adjunction.html<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>adjunction</title>
    </head><body>
    <script>最短判断IE浏览器var ie = !-[1,]; //alert(ie); </script>
    <script type="text/javascript">
    function isIE() {//ie
    //因为IE11已经不支持document.all了
    if (!!window.ActiveXObject || "ActiveXObject" in window)
    return true;
    else
    return false;
    }// 获取当前浏览器名及版本号
    var appInfo = function(){
    var browser = {appname: 'unknown', version: 0}, 
    userAgent = window.navigator.userAgent.toLowerCase();
    if(isIE())
    {
    browser.appname = "IE";  
    browser.version = "12"; 
    return browser;
    }
    else
    {
    // 使用navigator.userAgent来判断浏览器类型
    //msie,firefox,opera,chrome,netscape
    if (/(msie|firefox|opera|chrome|netscape)\D+(\d[\d.]*)/.test( userAgent ) )
    {  
    browser.appname = RegExp.$1;  
    browser.version = RegExp.$2;  
    }
    else if( /version\D+(\d[\d.]*).*safari/.test( userAgent ) )
    { // safari 
    browser.appname = 'safari';  
    browser.version = RegExp.$2;  
    }
    return browser;
    }
    }
    //调用
    var testBrowser = appInfo();
    var browerName=testBrowser.appname+"====="+testBrowser.version;
    //alert(browerName);
    //检测函数
    var check = function(r) {
    return r.test(navigator.userAgent.toLowerCase());
    };
    var statics = {
    /**
     * 是否为webkit内核的浏览器
     */
    isWebkit : function(){
    return check(/webkit/);
    },
    /**
     * 是否为火狐浏览器
     */
    isFirefox : function() {
    return check(/firefox/);
    },
    /**
             * 是否为谷歌浏览器
             */
            isChrome : function() {
              return !statics.isOpera() && check(/chrome/);
            },
            /**
             * 是否为Opera浏览器
             */
            isOpera : function() {
              return check(/opr/);
            },
            /**
             * 检测是否为Safari浏览器
             */
            isSafari : function() {
              // google chrome浏览器中也包含了safari
              return !statics.isChrome() && !statics.isOpera() && check(/safari/);
            }
    };//alert("火狐浏览器======="+statics.isFirefox());
    function openWin()
    {
    /*
     *   
         * window . showModalDialog ( sURL , vArguments , sFeatures )    建立模式对话框显示指定的文档  
         *            
         * * sURL:必选项,指定要载入和显示的 URL.  
         * * vArguments:指定供显示文档时使用的变量。利用这个参数可以传递任何类型的值，包括包含多个值得的数组。  
         *               对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。   
         *               window:把a1.html页面的window对象传递到a2.html页面上  
         *  * sFeatures可选项。指定对话框的窗口装饰。多个值之间用分号隔开。    
         */  
        //window.showModalDialog("a2.html",window,"dialogHeight:10;dialogWidth:20;help:no");   
                  
        //建立无模式对话框显示指定的文档，就是前面弹出一个网页在后面还能够更改。 

    if(testBrowser.appname=="IE")
    {
    alert("点击测试IE浏览");
    window.showModelessDialog("result.html",window,"dialogHeight:10;dialogWidth:20;help:no");
    return;
    }
    if(statics.isFirefox()==true)
    {
    alert("点击测试火狐浏览");
    window.open("t2.html","","width=225,height=170,menubar=no,toolbar=no,location=no,scrollbars=no,status=no,modal=yes");
            return;
    }
          
    }function setValue(cid, cname)
    {  
    /*  
         *  <input type="text" name="cid" value=""  id="cid"  >  
            <input type="text" name="cname" value=""  id="cname"  >  
         */  
    document.getElementById("cid").value=cid;  
    document.getElementById("cname").value=cname;  
    }    
    </script><form name="form1" action="test.html" method="post" >  
    <input type="text" name="cid" value=""  id="cid"  >  
    <input type="text" name="cname" value=""  id="cname"  >
        <input type="button" name="ok" value="请选择客户" onclick="openWin()" />  
    </form>  
    </body>
    </html>result.html<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>结果</title><script type="text/javascript">
    function viewData(cid,cname)
    {
    //获取a1.html对象window对象
    //对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。 

    //a1.html页面的window对象在a2.html页面上被封装到dialogArguments属性中
    var sdata=window.dialogArguments;

    //调用a1.html页面的函数
    sdata.setValue(cid,cname);
    window.close();
    }
    </script></head><body><table border="1">    <tr>
            <td>操作</td>
            <td>客户id</td>
            <td>客户名称</td>
        </tr>    <tr>
            <td><input type="button" value="选择" onclick="viewData('001','深圳华为')"></td>
            <td>001</td>
            <td>深圳华为</td>
        </tr>
        
        <tr>
            <td><input type="button" value="选择"   onclick="viewData('002','用友软件')"> </td>
            <td>002</td>
            <td>用友软件</td>
        </tr>
        
    </table></body>
    </html>
      

  7.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <script type="text/javascript">
    function getElementsClass(classnames)
    {
    var classobj= new Array();//定义数组 
    var classint=0;//定义数组的下标 
    var tags=document.getElementsByTagName("*");//获取HTML的所有标签 
    for(var i in tags)
    {//对标签进行遍历
    if(tags[i].nodeType==1)
    {//判断节点类型
    if(tags[i].getAttribute("class") == classnames)//判断和需要CLASS名字相同的，并组成一个数组 
    {
    classobj[classint]=tags[i];
    classint++;
    }
    }
    }
    return classobj;//返回组成的数组
    }function $(symbol){
    var re = /(.)([\w]*)/g; 
    var result = re.test(symbol);
    alert("RegExp.$1: "+RegExp.$1+"==RegExp.$2: "+RegExp.$2)
    if(result==true)
    {
    return getElementsClass(RegExp.$2);
    }}</script><div class="aca" id="qaz">获取类的方法</div>
    <script type="text/javascript">
    //alert(document.getElementById("qaz").innerHTML);
    alert(getElementsClass("aca")[0].innerHTML);
    alert($(".aca")[0].innerHTML);
    </script>
    </body>
    </html>
      

  8.   

    Internet Explorer<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>结果</title><script type="text/javascript">
    function viewData(cid,cname)
    {
    //获取a1.html对象window对象
    //对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。 

    //a1.html页面的window对象在a2.html页面上被封装到dialogArguments属性中
    var sdata=window.dialogArguments;

    //调用a1.html页面的函数
    sdata.setValue(cid,cname);
    window.close();
    }function getElementsClass(classnames)
    {
        var classobj= new Array();//定义数组 
        var classint=0;//定义数组的下标 
        var tags=document.getElementsByTagName("*");//获取HTML的所有标签 
        for(var i in tags)
        {//对标签进行遍历
            if(tags[i].nodeType==1)
            {//判断节点类型
                if(tags[i].getAttribute("class") == classnames)//判断和需要CLASS名字相同的，并组成一个数组 
                {
                    classobj[classint]=tags[i];
                    classint++;
                }
            }
        }
        return classobj;//返回组成的数组
    }
     
    function $(symbol){
        var re = /(.)([\w]*)/g; 
        var result = re.test(symbol);
        //alert("RegExp.$1: "+RegExp.$1+"==RegExp.$2: "+RegExp.$2)
        if(result==true)
        {
            return getElementsClass(RegExp.$2);
        }
     
    }
     
    </script></head><body><table border="1">    <tr>
            <td>操作</td>
            <td>客户id</td>
            <td>客户名称</td>
        </tr>    <tr>
            <td><input type="button" value="选择" onclick="viewData('001','深圳华为')"></td>
            <td>001</td>
            <td>深圳华为</td>
        </tr>
        
        <tr>
            <td><input type="button" value="选择"   onclick="viewData('002','用友软件')"> </td>
            <td>002</td>
            <td>用友软件</td>
        </tr>
        
    </table>
    <table border="1">    <tr>
            <td>客户id</td>
            <td><input name="" type="text" class="customer"/></td>
        </tr>    <tr>
            <td>客户名称</td>
            <td><input name="" type="text" class="customer"/></td>
        </tr>
        
        <tr>
         <td colspan="2"><input name="" type="button" onclick="subInfo('.customer')" value="提交用户信息"/></td>
        </tr>
        
    </table><script type="text/javascript">
    /*
    var js=function(){} 这种叫做函数表达式 必须先定义后使用
    function js(){}这种是函数声明 可以先使用后定义 它会对函数的声明进行一个提升
    */
    var subInfo = function(information)
    {
    var id =$(information)[0].value;
    var name =$(information)[1].value;
    alert(id+"===="+name);
    viewData(id,name);
    }
    </script></body>
    </html>
      

  9.   

    Internet ExplorerMozilla Firefoxadjunction.html<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>adjunction</title>
    </head><body>
    <script>//最短判断IE浏览器var ie = !-[1,]; //alert(ie); </script>
    <script type="text/javascript">
    function isIE() {//ie
    //因为IE11已经不支持document.all了
    if (!!window.ActiveXObject || "ActiveXObject" in window)
    return true;
    else
    return false;
    }// 获取当前浏览器名及版本号
    var appInfo = function(){
    var browser = {appname: 'unknown', version: 0}, 
    userAgent = window.navigator.userAgent.toLowerCase();
    if(isIE())
    {
    browser.appname = "IE";  
    browser.version = "12"; 
    return browser;
    }
    else
    {
    // 使用navigator.userAgent来判断浏览器类型
    //msie,firefox,opera,chrome,netscape
    if (/(msie|firefox|opera|chrome|netscape)\D+(\d[\d.]*)/.test( userAgent ) )
    {  
    browser.appname = RegExp.$1;  
    browser.version = RegExp.$2;  
    }
    else if( /version\D+(\d[\d.]*).*safari/.test( userAgent ) )
    { // safari 
    browser.appname = 'safari';  
    browser.version = RegExp.$2;  
    }
    return browser;
    }
    }
    //调用
    var testBrowser = appInfo();
    var browerName=testBrowser.appname+"====="+testBrowser.version;
    //alert(browerName);
    //检测函数
    var check = function(r) {
    return r.test(navigator.userAgent.toLowerCase());
    };
    var statics = {
    /**
     * 是否为webkit内核的浏览器
     */
    isWebkit : function(){
    return check(/webkit/);
    },
    /**
     * 是否为火狐浏览器
     */
    isFirefox : function() {
    return check(/firefox/);
    },
    /**
             * 是否为谷歌浏览器
             */
            isChrome : function() {
              return !statics.isOpera() && check(/chrome/);
            },
            /**
             * 是否为Opera浏览器
             */
            isOpera : function() {
              return check(/opr/);
            },
            /**
             * 检测是否为Safari浏览器
             */
            isSafari : function() {
              // google chrome浏览器中也包含了safari
              return !statics.isChrome() && !statics.isOpera() && check(/safari/);
            }
    };//alert("火狐浏览器======="+statics.isFirefox());
    function openWin()
    {
    /*
     *   
         * window . showModalDialog ( sURL , vArguments , sFeatures )    建立模式对话框显示指定的文档  
         *            
         * * sURL:必选项,指定要载入和显示的 URL.  
         * * vArguments:指定供显示文档时使用的变量。利用这个参数可以传递任何类型的值，包括包含多个值得的数组。  
         *               对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。   
         *               window:把a1.html页面的window对象传递到a2.html页面上  
         *  * sFeatures可选项。指定对话框的窗口装饰。多个值之间用分号隔开。    
         */  
        //window.showModalDialog("a2.html",window,"dialogHeight:10;dialogWidth:20;help:no");   
                  
        //建立无模式对话框显示指定的文档，就是前面弹出一个网页在后面还能够更改。 

    if(testBrowser.appname=="IE")
    {
    alert("点击测试IE浏览");
    window.showModelessDialog("result.html",window,"dialogHeight:10;dialogWidth:20;help:no");
    return;
    }
    if(statics.isFirefox()==true)
    {
    alert("点击测试火狐浏览");

    window.open("result.html?flag=update","","width=500,height=300,top=100,left=500,menubar=no,toolbar=no,location=no,scrollbars=no,status=no,modal=yes");
            return;
    }
          
    }function setValue(cid, cname)
    {  
    /*  
         *  <input type="text" name="cid" value=""  id="cid"  >  
            <input type="text" name="cname" value=""  id="cname"  >  
         */  
    document.getElementById("cid").value=cid;  
    document.getElementById("cname").value=cname;  
    }    
    </script><form name="form1" action="test.html" method="post" >  
    <input type="text" name="cid" value=""  id="cid"  >  
    <input type="text" name="cname" value=""  id="cname"  >
        <input type="button" name="ok" value="请选择客户" onclick="openWin()" />  
    </form><form name="form1" action="test.html" method="post" >  
    <input type="text" value=""  id="customer_id"  >  
    <input type="text" value=""  id="customer_name"  >
        <input type="button" name="ok" value="火狐得到子窗口" onclick="openWin()" />  
    </form>  
    </body>
    </html>result.html<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>结果</title><script type="text/javascript">
    function isIE() {//ie
    //因为IE11已经不支持document.all了
    if (!!window.ActiveXObject || "ActiveXObject" in window)
    return true;
    else
    return false;
    }
    function viewData(cid,cname)
    {
    //获取a1.html对象window对象
    //对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。 

    //a1.html页面的window对象在a2.html页面上被封装到dialogArguments属性中
    var sdata=window.dialogArguments;

    //调用a1.html页面的函数
    sdata.setValue(cid,cname);
    window.close();
    }function getElementsClass(classnames)
    {
        var classobj= new Array();//定义数组 
        var classint=0;//定义数组的下标 
        var tags=document.getElementsByTagName("*");//获取HTML的所有标签 
        for(var i in tags)
        {//对标签进行遍历
            if(tags[i].nodeType==1)
            {//判断节点类型
                if(tags[i].getAttribute("class") == classnames)//判断和需要CLASS名字相同的，并组成一个数组 
                {
                    classobj[classint]=tags[i];
                    classint++;
                }
            }
        }
        return classobj;//返回组成的数组
    }
     
    function $(symbol){
        var re = /(.)([\w]*)/g; 
        var result = re.test(symbol);
        //alert("RegExp.$1: "+RegExp.$1+"==RegExp.$2: "+RegExp.$2)
        if(result==true)
        {
            return getElementsClass(RegExp.$2);
        }
     
    }
     
    </script></head><body><table border="1">    <tr>
            <td>操作</td>
            <td>客户id</td>
            <td>客户名称</td>
        </tr>    <tr>
            <td><input type="button" value="选择" onclick="viewData('001','深圳华为')"></td>
            <td>001</td>
            <td>深圳华为</td>
        </tr>
        
        <tr>
            <td><input type="button" value="选择"   onclick="viewData('002','用友软件')"> </td>
            <td>002</td>
            <td>用友软件</td>
        </tr>
        
    </table>
    <table border="1">    <tr>
            <td>客户id</td>
            <td><input name="" type="text" class="customer"/></td>
        </tr>    <tr>
            <td>客户名称</td>
            <td><input name="" type="text" class="customer"/></td>
        </tr>
        
        <tr>
         <td colspan="2"><input name="" type="button" onclick="subInfo('.customer')" value="火狐提交用户信息"/></td>
        </tr>
        
    </table><script type="text/javascript">
    /*
    var js=function(){} 这种叫做函数表达式 必须先定义后使用
    function js(){}这种是函数声明 可以先使用后定义 它会对函数的声明进行一个提升
    */
    var subInfo = function(information)
    {
    var ie = !-[1,]; 
    var id =$(information)[0].value;
    var name =$(information)[1].value;
    alert(id+"===="+name);
    if(isIE()==true)
    {
    viewData(id,name)
    }
    else
    {
    window.opener.document.getElementById('customer_id').value = id;
    window.opener.document.getElementById('customer_name').value = name;
    }
    }
    </script></body>
    </html>
      

  10.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>正则表达式的验证</title>
    <script language="javascript" type="text/javascript">
    var patterms = new Object();
    //验证IP
    patterms.ip = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/;
    //验证EMAIL
    patterms.email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    //验证日期格式2009-07-13
    patterms.date = /^\d{4}-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
    //验证时间格式16:55:39
    patterms.time = new RegExp("^([0-1]\\d|2[0-3]):[0-5]\\d:[0-5]\\d$");patterms.word = new RegExp("^[\u4e00-\u9fa5],{0,}$");
    //验证函数
    var verify = function(id,pat)
    {
    var id_regular = document.getElementById(id);
    var value_regular = id_regular.value;
        var thePat;
        thePat = patterms[pat];
        if(thePat.test(value_regular))
        {
    alert(pat+"正确");
            return true;
        }
        else
        {
    alert(pat+"错误");
            return false;
        }
    }</script>
    </head><body><table width="500" border="1">
      <tr>
        <td>输入电子邮箱：</td>
        <td><input name="" type="text" id="email_input"/></td>
        <td><input name="" type="button" onclick="verify('email_input','email')" value="验证电子邮箱"/></td>
      </tr>
      
      <tr>
        <td>输入ip地址：</td>
        <td><input name="" type="text" id="ip_input"/></td>
        <td><input name="" type="button" onclick="verify('ip_input','ip')" value="验证ip地址"/></td>
      </tr>
      
      <tr>
        <td>输入时间：</td>
        <td><input name="" type="text" id="time_input"/></td>
        <td><input name="" type="button" onclick="verify('time_input','time')" value="验证时间"/></td>
      </tr>
      
      <tr>
        <td>输入日期：</td>
        <td><input name="" type="text" id="date_input"/></td>
        <td><input name="" type="button" onclick="verify('date_input','date')" value="验证日期"/></td>
      </tr>
      
      <tr>
        <td>输入汉字：</td>
        <td><input name="" type="text" id="word_input"/></td>
        <td><input name="" type="button" onclick="verify('word_input','word')" value="验证汉字"/></td>
      </tr></table>
    </body>
    </html>
      

  11.   


    <!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>表格</title>
    <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                font: italic 20px Georgia, serif;
                letter-spacing: normal;
                background-color: #f0f0f0;
            }
            #content{
                width: 750px;
                padding: 40px;
                margin: 0 auto;
                background-color: #fff;
                border-left: 30px solid #1D81B6;
                border-right: 1px solid #ddd;
                box-shadow: 0px 0px 16px #aaa;
            }
            #table1{
                font: bold 16px/1.4em "Trebuchet MS", sans-serif;
            }
            #table1 thead th{
                padding: 15px;
                border: 1px solid #93CE37;
                border-bottom: 3px solid #9ED929;
                text-shadow: 1px 1px 1px #568F23;
                color: #fff;
                background-color: #9DD929;
                border-radius: 5px 5px 0px 0px;
            }
            #table1 thead th:empty{
                background-color: transparent;
                border: none;
            }
            #table1 tbody th{
                padding: 0px 10px;
                border: 1px solid #93CE37;
                border-right: 3px solid #9ED929;
                text-shadow: 1px 1px 1px #568F23;
                color: #666;
                background-color: #9DD929;
                border-radius: 5px 0px 0px 5px;
            }
            #table1 tbody td{
                padding: 10px;
                border: 2px solid #E7EFE0;
                text-align: center;
                text-shadow: 1px 1px 1px #fff;
                color: #666;
                background-color: #DEF3CA;
                border-radius: 2px;
            }
            #table1 tbody span.check::before{
                content: url(images/check0.png);
            }
            #table1 tfoot td{
                padding: 10px 0px;
                font-size: 32px;
                color: #9CD009;
                text-align: center;
                text-shadow: 1px 1px 1px #444;
            }
        </style>
    </head>
    <body>
    <div id="content">
        <table id="table1">
            <thead>
                <tr>
                    <th></th>
                    <th scope="col" abbr="Starter">Smart Starter</th>
                    <th scope="col" abbr="Medium">Smart Medium</th>
                    <th scope="col" abbr="Business">Smart Business</th>
                    <th scope="col" abbr="Deluxe">Smart Deluxe</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th scope="row">Price per month</th>
                    <td>$ 2.90</td>
                    <td>$ 5.90</td>
                    <td>$ 9.90</td>
                    <td>$ 14.90</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <th scope="row">Storage Space</th>
                    <td>512MB</td>
                    <td>1 GB</td>
                    <td>2 GB</td>
                    <td>4 GB</td>
                </tr>
                <tr>
                    <th scope="row">Bandwidth</th>
                    <td>50 GB</td>
                    <td>100 GB</td>
                    <td>150 GB</td>
                    <td>unlimited</td>
                </tr>
                <tr>
                    <th scope="row">Mysql Databases</th>
                    <td>unlimited</td>
                    <td>unlimited</td>
                    <td>unlimited</td>
                    <td>unlimited</td>
                </tr>
                <tr>
                    <th scope="row">Setup</th>
                    <td>12.90 ___FCKpd___0lt;/td>
                    <td>12.90 ___FCKpd___0lt;/td>
                    <td>free</td>
                    <td>free</td>
                </tr>
                <tr>
                    <th scope="row">PHP 5</th>
                    <td><span class="check"></span></td>
                    <td><span class="check"></span></td>
                    <td><span class="check"></span></td>
                    <td><span class="check"></span></td>
                </tr>
                <tr>
                    <th scope="row">Ruby on Rails</th>
                    <td><span class="check"></span></td>
                    <td><span class="check"></span></td>
                    <td><span class="check"></span></td>
                    <td><span class="check"></span></td>
                </tr>
            </tbody>
        </table>
    </div>
    </body>
    </html>
      

  12.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function draw0(id) {
    var canvas =  document.getElementById(id); 
    //alert(canvas);
    if (canvas == null) {
    return false;
    }
    if (canvas.getContext){ 
    var context = canvas.getContext("2d")
    //alert("context");
    context.beginPath();
            context.arc(200, 150, 100, 0, Math.PI * 2, true);
    //不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果
    context.closePath();
    context.fillStyle = 'rgba(0,255,0,0.25)';
    context.fill();
    } else {
    alert("失败");
    } }
    </script>
    <style>
    #myCanvas{
    width:300px;
    height:200px;
    }
    </style>
    </head><body>
    <canvas id="myCanvas">your browser does not support the canvas tag </canvas>  
    <script type="text/javascript">
    draw0("myCanvas");
    </script>
    </body>
    </html>