Javascript 如何从click方法调用自己的函数

我知道这听起来很愚蠢，但我不知道如何从“onclick”函数调用我的函数

我创建了自己的类，我想做的是在类中调用我的函数。 我在onclick函数中尝试了各种方法：

• 函数（）{this.getWidth（）}
• 这个文件名为getWidth（）
• Test.getWidth（）

函数数据网格（_父级，_数据） { this.table=[]； this.parent=$（“#”+_parent）[0]？$（“#”+_parent:（$（“+_parent）[0]？$（$”+_parent:（$（+_parent）[0]？$（_parent）：null））； this.data=_data

this.Datagrid = function(parent,data)
{
    this.setParent(parent);
    if(data != null)
        this.setData(data);
    return this;
}


this.setParent = function(parent)
{
    return this.parent = $("#"+parent)[0] ? $("#"+parent) : ($("."+parent)[0] ? $("."+parent) : ($(+parent)[0] ? $(parent) : null));
}

this.getParent = function()
{return this.parent;}

this.setData = function(data)
{this.data = data;}

this.buildTable = function()
{
    var dtTbl = [];
    dtTbl.push('<table class="TimeSheetmainTable" cellpadding="10" cellspacing="0" border="0">');

    var style;

    //Header//////////////////////
    dtTbl.push('<tr class="header">');
    for (var cell in this.data.row[0].cell) {
        dtTbl.push('<td>' + this.data.row[0].cell[cell].id + '</td>');
    }
    dtTbl.push('</tr>');
    //Content//////////////////////
    for(var r in this.data.row)
    {
        if (r % 2 == 0) { style = 'class="r1" onmouseover="this.className=\'hover\'"  onmouseout="this.className=\'r1\'"'; }
        else { style = 'class="r2" onmouseover="this.className=\'hover\'"  onmouseout="this.className=\'r2\'"'; }

        dtTbl.push('<tr ' + style + ' >');
        for(var c in this.data.row[r].cell)
        {
            dtTbl.push('<td alt="' + this.data.row[r].cell[c].id + '">' + this.data.row[r].cell[c].value + '</td>');
        }
        dtTbl.push('</tr>');
    }
    //Footer//////////////////////
    dtTbl.push('<tr class="footer">');
    for (var cell in this.data.row[0].cell) {
        dtTbl.push('<td>&nbsp;</td>');
    }
    dtTbl.push('</tr></table>');

    this.parent.html(dtTbl.join(''));
}

this.buildTableDiv = function()
{
    var tableString = [];
    //Header//////////////////////
    tableString.push('<div class="container"><div class="header"><table><tr id="header">');
    for (var cell in this.data.row[0].cell) {
        tableString.push('<td>' + this.data.row[0].cell[cell].id + '</td>');
    }
    tableString.push('</tr></table></div>');
    //Content//////////////////////
    tableString.push('<div class="content"><table>');
    var TD1 = new Object();
    var TD2 = new Object();

    for(var r in this.data.row)
    {
        if (r % 2 == 0) { style = 'class="r1" onmouseover="this.className=\'hover\'"  onmouseout="this.className=\'r1\'"'; }
        else { style = 'class="r2" onmouseover="this.className=\'hover\'"  onmouseout="this.className=\'r2\'"'; }

        for(var c in this.data.row[r].cell)
        {
            if(c == 0)
            {   if(TD1.value != this.data.row[r].cell[c].value){
                    TD1.value = this.data.row[r].cell[c].value;
                    TD1.show = true;
                }
                else
                    TD1.show = false;
            }
            if(c == 1)
            {   if(TD2.value != this.data.row[r].cell[c].value){
                    TD2.value = this.data.row[r].cell[c].value;
                    TD2.show = true;
                }
                else
                    TD2.show = false;
            }   
            if(TD1.show && c == 0){//First line
                tableString.push('<tr id="content" ' + style + ' >');
                tableString.push('<td alt="' + this.data.row[r].cell[c].id + '"><input type="button" class="arrow_down" /> ' + this.data.row[r].cell[c].value + '</td>');
                for(var c = 0; c < this.data.row[r].cell.length - 1; c++)
                {
                    tableString.push('<td>&nbsp</td>');
                }
                tableString.push('</tr>');
            }
            else if(TD2.show && c == 1)//Second line
            {
                tableString.push('<tr id="content" ' + style + ' >');
                tableString.push('<td>&nbsp;</td><td alt="' + this.data.row[r].cell[c].id + '">' + this.data.row[r].cell[c].value + '</td>');
                for(var c = 0; c < this.data.row[r].cell.length - 2; c++)
                {
                    tableString.push('<td>&nbsp</td>');
                }
                tableString.push('</tr><tr id="content" ' + style + ' ><td>&nbsp;</td><td>&nbsp;</td>');
            }
            else if(!TD2.show && c == 1)//third line (distincts second cells name)
            {
                tableString.push('<tr id="content" ' + style + ' >');
                tableString.push('<td>&nbsp;</td><td alt="' + this.data.row[r].cell[c].id + '">&nbsp;</td>');
            }
            else if(c > 1)//Rest filling (not ordered stuff)
            {
                tableString.push('<td alt="' + this.data.row[r].cell[c].id + '">' + this.data.row[r].cell[c].value.replace("","&nbsp;") + '</td>');
            }
        }
        tableString.push('</tr>');
        // $(".arrow_down").children(":nth-child(1)").click(function(){alert("test");});
    }
    tableString.push('</table></div>');
    //Footer//////////////////////
    tableString.push('<div class="footer"><table><tr id="footer">');
    for (var cell in this.data.row[0].cell) {
        tableString.push('<td>&nbsp;</td>');
    }
    tableString.push('</tr></table></div></div>');

    this.parent.html(tableString.join(''));

    // Setting width to all cells
    for (var i in this.data.row[0].cell)
    {
        cell = parseInt(i)+1;
        var h = this.parent.children(":first").children(".header").children("table").children("tbody").children("tr").children(":nth-child("+ cell +")").width();
        var c = this.parent.children(":first").children(".content").children("table").children("tbody").children("tr").children(":nth-child("+ cell +")").width();
        var f = this.parent.children(":first").children(".footer").children("table").children("tbody").children("tr").children(":nth-child("+ cell +")").width();
        var width = h > c ? h : (c > f ? c : f);

        this.parent.children(":first").children(".header").children("table").children("tbody").children("tr").children(":nth-child("+ cell +")").width(width);
        this.parent.children(":first").children(".content").children("table").children("tbody").children("tr").children(":nth-child("+ cell +")").width(width);
        this.parent.children(":first").children(".footer").children("table").children("tbody").children("tr").children(":nth-child("+ cell +")").width(width);
    }
    // this.activateScroller(0);
}

this.getScrollerWidth = function()
{
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
     // Append our div, do our calculation and then remove it 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'scroll'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2); 
}

this.activateScroller = function(value)
{
    var d = [];
    d.push('<div style="height: ' + this.parent.children(":first").children(".content").height() + '; width:20px; background:#FFF"><div style="background:#333; height:200">&nbsp;</div></div>');

    this.parent.children(":first").children(".content").scrollTop(value);
}

expandParent = function()
{
    alert(this.parent);
}

this.Datagrid=函数（父级，数据）
{
这个.setParent（parent）；
如果（数据！=null）
此.setData（数据）；
归还这个；
}
this.setParent=函数（父级）
{
返回this.parent=$（“#”+parent）[0]？$（“#”+parent:（$（“+parent）[0]？$（“+parent:（$（+parent）[0]？$（parent）：null））；
}
this.getParent=函数（）
{返回此.parent；}
this.setData=函数（数据）
{this.data=data；}
this.buildTable=函数（）
{
var dtTbl=[]；
dtTbl.推送（“”）；
var风格；
//标题//////////////////////
dtTbl.推送（“”）；
for（此.data.row[0].单元格中的变量单元格）{
dtTbl.push（“”+this.data.row[0].cell[cell].id+“”）；
}
dtTbl.推送（“”）；
//内容//////////////////////
for（此.data.row中的var r）
{
如果（r%2==0）{style='class=“r1”onmouseover=“this.className=\'hover\'”onmouseout=“this.className=\'r1\'”；}
else{style='class=“r2”onmouseover=“this.className=\'hover\'”onmouseout=“this.className=\'r2\'”；}
dtTbl.推送（“”）；
for（此.data.row[r].单元格中的变量c）
{
dtTbl.push（“”+this.data.row[r].cell[c].value+“”）；
}
dtTbl.推送（“”）；
}
//页脚//////////////////////
dtTbl.推送（“”）；
for（此.data.row[0].单元格中的变量单元格）{
dtTbl.推送（“”）；
}
dtTbl.推送（“”）；
this.parent.html（dtTbl.join（“”））；
}
this.buildTableDiv=函数（）
{
var tableString=[]；
//标题//////////////////////
表串推力（“”）；
for（此.data.row[0].单元格中的变量单元格）{
tableString.push（“”+this.data.row[0].cell[cell].id+“”）；
}
表串推力（“”）；
//内容//////////////////////
表串推力（“”）；
var TD1=新对象（）；
var TD2=新对象（）；
for（此.data.row中的var r）
{
如果（r%2==0）{style='class=“r1”onmouseover=“this.className=\'hover\'”onmouseout=“this.className=\'r1\'”；}
else{style='class=“r2”onmouseover=“this.className=\'hover\'”onmouseout=“this.className=\'r2\'”；}
for（此.data.row[r].单元格中的变量c）
{
如果（c==0）
{if（TD1.value！=this.data.row[r].cell[c].value）{
TD1.value=this.data.row[r].cell[c].value；
TD1.show=true；
}
其他的
TD1.show=false；
}
如果（c==1）
{if（TD2.value！=this.data.row[r].cell[c].value）{
TD2.value=this.data.row[r].cell[c].value；
TD2.show=true；
}
其他的
TD2.show=false；
}   
如果（TD1.show&&c==0）{//第一行
表串推力（“”）；
tableString.push（“”+this.data.row[r].cell[c].value+“”）；
对于（var c=0；c1）//剩余填充（非订购物料）
{
tableString.push（“”+this.data.row[r].cell[c].value.replace（“，”“）+”）；
}
}
表串推力（“”）；
//$（“.arrow_down”）.children（“：n个子项（1）”）。单击（函数（）{alert（“test”）；}）；
}
表串推力（“”）；
//页脚//////////////////////
表串推力（“”）；
for（此.data.row[0].单元格中的变量单元格）{
表串推力（“”）；
}
表串推力（“”）；
this.parent.html（tableString.join（“”））；
//设置所有单元格的宽度
对于（此.data.row[0]单元格中的变量i）
{
单元=parseInt（i）+1；
var h=this.parent.children（“：first”）.children（“.header”）.children（“.table”）.children（“.tbody”）.children（“.tr”）.children（“：nth children（“+cell+”）.width（）；
var c=this.parent.children（“：first”）.children（“.content”）.children（“table”）.children（“tbody”）.children（“tr”）.children（“：nth children（“+cell+”））.width（）；
var f=this.parent.children（“：first”）.children（“.footer”）.children（“.table”）.children（“.tbody”）.children（“.tr”）.children（“：nth child（“+cell+”）.width（）；
变量宽度=h>c？h：（c>f？c:f）；
此.parent.children（“：first”）.children（“.header”）.children（“.table”）.children（“.tbody”）.children（“.tr”）.children（“：nth children（“+cell+”））.width（宽度）；
此.parent.children（“：first”）.children（“.content”）.children（.table”）.children（.tbody”）.children（.tr”）.children（“：nth children（+cell+”）.width）；
此.parent.children（“：first”）。children（“.footer”）。children（“.table”）。children（“.tbody”）。children（“：nth children（“+cell+”））。宽度（width）；
}
//这是一个激活滚轮（0）；
}
this.getScrollerWidth=函数（）
{
var div=$（''）；
//A
// new version of your generateHTML function
this.generateHTML() {
   var str = [];
   str.push('<div><input type="button" value="button"/></div>');
   var that = this;
   $("#testDiv").append(str.join('')).find('button:first').click(function() {that.getWidth()});
}

​​Test = function() {    
    this.generate = function() {
        var newnode = $('<button>click me</button>');        
        $("body").append(newnode);
        // "cache" this in a variable - that variable will be usable in event handler
        var that = this;
        // write event handler function here - it will have access to your methods by using "that" variable
        newnode.click(function(e) {
            // here this refers to button not Test class
            // so we have to "reach" to outer context to gain access to all methods from Test
            that.doSomething('learn');
        })
    }
    this.doSomething = function(x) {
        alert('do it: '+x);            
    }
}

// initialize part
// make instance of Test "class"
t = new Test();
// generate the button (clicking on a button will essentialy fire Test.doSomething function in a context of "t"
t.generate();