javascript - JS中的动态表

Question

这是我的代码片段...

    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {   
        s=xmlhttp.responseText;
        info=s.split("!");
        elem=document.getElementById("add_players1");
        for (var i = 0 ;i < (info.length-1);i++ ) 
        {
        var row=elem.insertRow(-1); //here is where I need to call a function when I click on the element
        var x=row.insertCell(-1);
        var y=row.insertCell(-1);
        var z=row.insertCell(-1);
        temp=info[i].split(",");
        name=temp[0];
        val=temp[1];
        pos=temp[2];
        x.innerHTML=name;
        y.innerHTML=val;
        z.innerHTML=pos;

    }

基本上我所做的是从我的 PHP 文件中接收一些数据并动态创建一个表，但我想要的是当我单击表的单个元素时运行一个函数。我被困在这里，因为我动态创建了一个表，因此不知道如何进行函数调用......请指教

Answer 1

您可以使用元素上的 onclick 属性将事件附加到 javascript 中的元素，

var myfunction = function()
{
    alert("row clicked, id "+ this.id+", text"+this.innerHTML);
}

function addRow(){
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {   
        s=xmlhttp.responseText;
        info=s.split("!");
        elem=document.getElementById("add_players1");
        for (var i = 0 ;i < (info.length-1);i++ ) 
        {
        var row=elem.insertRow(-1); 
        row.onclick = myfunction;
        temp=info[i].split(",");
        for (j = 0; j < 3; i++) {
               appendDiv(row.insertCell(j), temp[j] , 'divStyle');
        }
    }
}

function appendDiv(cell, text, style) {
    var div = document.createElement('div'), 
        txt = document.createTextNode(text); 
    div.appendChild(txt);                    
    div.setAttribute('className', style);    
    cell.appendChild(div);                   
}