对象内部事件的引用方法是什么


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
b_ft();//构造一个表
});
function b_ft(){
ft1= new myfreetable(document.getElementById('freeTableDiv'), "300","100%","自由表格")
}
function myfreetable(htmlObject,height, width,str){
this.height=height;
this.width=width;
this.is_edit_mode=true;
  var t=htmlObject;
  //构建标题栏位
  var c_title=document.createElement('div');
c_title.className="c_title";
var p=document.createElement('p');
p.innerHTML=str;
$(c_title).append(p);
$(t).append(c_title);
//构建工具条
var c_tb=document.createElement('div');
c_tb.className="c_toolsbar";
$(t).append(c_tb);
this.toolsbar= new _creat_toolsbar(c_tb);
}
myfreetable.prototype.cilck_b=function(str){
   alert (str);
   $(".c_title p").innerHTML=str; //修改标题的内容, 这里使用CLASS引用不妥会影响别的同类对象
   // 应该如何引用次对象的标题??
}
function _creat_toolsbar(htmlObject){
  var c_tb=htmlObject;
  for (var i=1; i<4;i++){
    var bt1=document.createElement('input');
    bt1.type="button";
    bt1.value="按钮"+i;
    bt1.className="toolsbar_bott";
    bt1.name=i;
    $(bt1).click(function () {
      cilck_b(this.name);  //这个无效
    });
    $(c_tb).append(bt1);
 } 
}
</script>
<html>
<body>
<div id="freeTableDiv"></div>
</body>
</html>
想要的效果是 点按钮1 就把 标题变为1 点按钮2 就把标题变成2.
不知道如何绑定 按钮的click 时间. 和如何引用本对象的标题栏
JavaScript对象click事件引用

解决方案 »

  1.   

     
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
    </style>
    <script type="text/javascript">
    $(document).ready(function() {
    b_ft();//构造一个表
    });
    function b_ft(){
    ft1= new myfreetable(document.getElementById('freeTableDiv'), "300","100%","自由表格")
    }
    function myfreetable(htmlObject,height, width,str){
        this.height=height;
        this.width=width;
        this.is_edit_mode=true;
      var t=htmlObject;
      //构建标题栏位
      var c_title=document.createElement('div');
        c_title.className="c_title";
        var p=document.createElement('p');
        p.innerHTML=str;
        $(c_title).append(p);
        $(t).append(c_title);
        //构建工具条
        var c_tb=document.createElement('div');
        c_tb.className="c_toolsbar";
        $(t).append(c_tb);
        this.toolsbar= new _creat_toolsbar(c_tb);
    }
    myfreetable.prototype.cilck_b=function(str){
          alert (str);    
          $(".c_title p").html(str); //修改标题的内容, 这里使用CLASS引用不妥会影响别的同类对象
                                                                          // 应该如何引用次对象的标题??
    }
    function _creat_toolsbar(htmlObject){
      var c_tb=htmlObject;
      for (var i=1; i<4;i++){
        var bt1=document.createElement('input');
        bt1.type="button";
        bt1.value="按钮"+i;
        bt1.className="toolsbar_bott";
        bt1.name=i;
        $(bt1).click(function () {
          
          ft1.cilck_b(this.name);  //改成 ft1.cilck_b
        });
        $(c_tb).append(bt1);
     } 
    }
    </script>
    <html>
    <body>
    <div id="freeTableDiv"></div>
    </body>
    </html>
      

  2.   

    去掉 cilck_b方法，    _creat_toolsbar  类改成 myfreetable.creat_toolsbar
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
    </style>
    <script type="text/javascript">
    $(document).ready(function() {
    b_ft();//构造一个表
    });
    function b_ft(){
    ft1= new myfreetable(document.getElementById('freeTableDiv'), "300","100%","自由表格")
    for (var i=1; i<4;i++){   //如果这部分是固定的可以放到 myfreetable 里
      ft1.creat_toolsbar('bnt'+i,i);
    }

    }
    function myfreetable(htmlObject,height, width,str){
        this.height=height;
        this.width=width;
        this.is_edit_mode=true;
      var t=htmlObject;
      //构建标题栏位
      var c_title=document.createElement('div');
        c_title.className="c_title";
        var p=document.createElement('p');
        p.innerHTML=str;
        $(c_title).append(p);
        $(t).append(c_title);
        //构建工具条
        var c_tb=document.createElement('div');
        c_tb.className="c_toolsbar";
        $(t).append(c_tb);
        this.toolsbar=c_tb;
        //this.toolsbar= new _creat_toolsbar(c_tb,this);
    }
     myfreetable.prototype.creat_toolsbar=function(caption,name){
        var bt1=document.createElement('input');
        bt1.type="button";
        bt1.value=caption;
        bt1.className="toolsbar_bott";
        bt1.name= name;
        var me=this;
        $(bt1).click(function () {
          $(".c_title p").html(this.name); //修改标题的内容, 这里使用CLASS引用不妥会影响别的同类对象
        });
        $(this.toolsbar).append(bt1);
    }
     
    </script>
    <html>
    <body>
    <div id="freeTableDiv"></div>
    </body>
    </html>
      

  3.   


    多谢您的费心指导. 我刚学这个没多久. 我学做一个网页, 需要处理很多 列数不固定, 列名也不固定的表格
    比如
    表一 表二想找个控件来处理这些内容 网上没找到. 所以想自己尝试这写一个控件.能够自由编辑表格标题和内容的表格
    但是对控件的框架不熟悉. 各种元素的引用十分陌生. 
    上面的代码只是做一些尝试. 我希望做成的是
    1.一个div   里面有一个标题div 标题的名字是可以有外部更改
    2.一个工具条div, 里面有几个按钮. 如插入一行  插入一列,  存储 刷新 等过程
      这个过程是私有的. 外部不能访问.
    3. 一个表格DIV 用来显示和编辑如上图所示的内容, 编辑过程也是私有的;外部能控制的属性只有 1 标题的内容. 
    2 是否是编辑状态 如果不是编辑状态就隐藏工具条.
    3. 是否有小计列
    4. 是否有总计行所以 _creat_toolsbar 需要做成一个私有方法. 不能杯被部调用.
    我把代码改成下面的样子<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
    </style>
    <script type="text/javascript">
    $(document).ready(function() {
    b_ft();//构造一个表
    });function b_ft(){
    ft1= new myfreetable(document.getElementById('freeTableDiv'), "300","100%","自由表格")
    }
    function myfreetable(htmlObject,height, width,str){
    this.height=height;
    this.width=width;
    this.is_edit_mode=true;
      var t=htmlObject;
      //构建标题栏位
      //var c_title=document.createElement('div');
    this.c_title_div=document.createElement('div');
    this.c_title_div.className="c_title";
    this.c_title_div_p=document.createElement('p');
    this.c_title_div_p.innerHTML=str;
    $(this.c_title_div).append(this.c_title_div_p);
    $(t).append(this.c_title_div);
    //构建工具条
    this.c_tb=document.createElement('div');
    this.c_tb.className="c_toolsbar";
    $(t).append(this.c_tb);

    this.toolsbar= new _creat_toolsbar(this.c_tb);
     myfreetable.prototype.cilck_b=function(str){
       alert (str);
       $(".c_title p").html(str); //修改标题的内容, 这里使用CLASS引用不妥会影响别的同类对象
       // 应该如何引用此象的标题??
       //this.c_title_div_p.innerHTML=str;
      };
    }function _creat_toolsbar(htmlObject){
      var c_tb=htmlObject;
      for (var i=1; i<4;i++){
        var bt1=document.createElement('input');
        bt1.type="button";
        bt1.value="按钮"+i;
        bt1.className="toolsbar_bott";
        bt1.name=i;
        $(bt1).click(function () {
          myfreetable.prototype.cilck_b(this.name);  //这个无效
        });
        $(c_tb).append(bt1);
     } 
    }
    </script>
    <html>
    <body>
    <div id="freeTableDiv"></div>
    </body>
    </html>
    能够改写标题栏了. 不过是用找类名的方法实现的. 会影响页面上的对象. 
    所以想请教您 1类中的共有方法 和私有方法应该怎样布局和声明.
    2. 在私有方法和公共方法中如何引用类的各种属性. 比如在上面的代码中
    myfreetable.prototype.cilck_b=function(str){
       alert (str);
       $(".c_title p").html(str); //修改标题的内容, 这里使用CLASS引用不妥会影响别的同类对象
       // 应该如何引用此象的标题??
       //this.c_title_div_p.innerHTML=str;
      };
    this.c_title_div_p.innerHTML=str; 这句就是无效的
      

  4.   

    其实修改标题内容这个过程是不需要的.  我是想按了按钮之后在下面的table(还没做)中加入一个行
    做这个是想学习一下, 私有属性的引用 
      

  5.   

    我看你一会用JQ一会用原API 的 
    建议了解些 dhtml Dom 操作，先了解些原生的DHTML api dom 的操作，后再用JQ就很顺了
    你这些具体的需求，不是几句能实现的，我回下后面的两问题吧
    1类中的共有方法 和私有方法应该怎样布局和声明.
     要实现 共有方法和私有方法 可以利用闭包
     function C(){  //类
         function pri(){  //这样你可以理解成 私有方法
            
         }
         this.pub=function(){  //共有方法
            
         }
      } 
      this.c_title_div_p.innerHTML=str; 不能用
      是因为你这么   myfreetable.prototype.cilck_b(this.name); 调用的 
      这时 this =myfreetable.prototype ,而不是实例的对象  
      
      

  6.   

    多谢您的指点.  我现在是用到什么学什么. 主要是jq, 要是jq 不行 domAPI 试一下;我看你一会用JQ一会用原API 的 
    建议了解些 dhtml Dom 操作，先了解些原生的DHTML api dom 的操作，后再用JQ就很顺了
    你这些具体的需求，不是几句能实现的，我回下后面的两问题吧
    1类中的共有方法 和私有方法应该怎样布局和声明.
     要实现 共有方法和私有方法 可以利用闭包
     function C(){  //类
         function pri(){  //这样你可以理解成 私有方法
            
         }
         this.pub=function(){  //共有方法
            
         }
      } 多谢您的指点.  我现在是用到什么学什么. 主要是jq, 要是jq 不行 domAPI 试一下;
    我现在 搞不清楚的是如何在 共有方法和私有方法中引用类的属性
    比如
    function C(){  //类
        this.aa="123456";
         function pri(){  //这样你可以理解成 私有方法
            alert (this.aa);//我想在这里引用 AA的值, 应该如何引用
            alert (c.aa)  ; //这样也不对
            alert (parent.aa);// 也不行
         }
         this.pub=function(){  //共有方法
            alert (this.aa);  
         }
      } javascript 里面好像没有 PARENT 这个引用
    遇到这样的情况只能把 this.aa 作为参数穿进去才可以,要是遇到需要很多属性的话, 要传进去一大堆参数.才可以. 十分麻烦. 有没有简单一点的方法
      

  7.   

    function C(){  //类
        this.aa="123456";
         var me=this;    //记住当前对象
         function pri(){  //这样你可以理解成 私有方法
            alert (this.aa);//我想在这里引用 AA的值, 应该如何引用
            alert (me.aa)  ; //这样也不对
         
         }
         this.pub=function(){  //共有方法
            alert (this.aa);  
            
         }
         pri.call(this);  //让 pri 里的this指向当前对象
    } var c=new C()
      

  8.   

    非常感谢. 前一段时间在啃 PHP . 把这个变量作用域个搞混了,忘了JavaScript的变量作用域了. 我现在基本明白这个类的写法了.   真的很感谢. 以后有什么疑问还望不吝赐教. 要是这个控件能发布,一定注上您的大名