從動態生成的表中獲取行和單元格的值

Question

我正在嘗試從動態生成的表onClick函數獲取行和單元格。 我現在不確定。

xmlTitles = xmlDoc.getElementsByTagName("title");
                document.getElementById('playlist').innerHTML = "Playlist (" + xmlTitles.length + " videos)";
                document.getElementById('table').cellSpacing = "5px";
                for (var i = 0; i < xmlTitles.length; i++)
                {
                    tr = document.createElement('tr');
                    tr.style.height = "100px";
                    titles[i] = xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue;
                    image[i] = xmlDoc.getElementsByTagName("image")[i].childNodes[0].nodeValue;
                    filename[i] = xmlDoc.getElementsByTagName("filename")[i].childNodes[0].nodeValue;
                    td2 = document.createElement('td');
                    var _image = iPath + image[i];
                    td2.innerHTML = "<a href='javascript:callVideo(this);'><img src='" + _image + "'/></a>";
                    td2.style.verticalAlign = "top";
                    tr.appendChild(td2);
                    td1 = document.createElement('td');
                    var _title = titles[i];
                    td1.appendChild(document.createTextNode(_title));
                    td1.style.verticalAlign = "top";
                    td1.style.width = "200px";
                    td1.style.height = "100px";
                    td1.style.color = "#0000ff";
                    td1.style.fontFamily = "arial";
                    tr.appendChild(td1);
                    document.getElementById('table').appendChild(tr);
                }
            }

該函數稱為：

function callVideo(x)
            {
                console.log("Cell index: " + x.cellIndex);
}

謝謝。

Answer 1

我認為您遇到的問題是callVideo函數的上下文。 建立動態表時，可以在td2內創建一個定位標記，然后將事件處理程序放在a標記href中，並傳入該標記。 我會懷疑，callVideo中的x根本不是TD元素，而是錨標記（一個標記），並且由於標記沒有cellIndex，因此它將是不確定的。 將console.log（x）添加到callVideo中，並確切地確定x是什么。 如果我是正確的，則x.parentNode應該會為您提供TD標簽

function callVideo(x)
{
    console.log(x); //Establish what x is
    console.log("Cell index: " + x.parentNode.cellIndex);
}

編輯回應評論。

好的，因此在建立eventHandler的上下文時遇到問題。 我會更改您的設置方式，因為這並不是最佳做法。 <a>是錨點/鏈接，單擊時運行函數會更改其默認行為，這意味着您需要添加諸如javascript（void）或href =“＃”之類的內容，然后返回false或e.preventDefault（）阻止它執行應做的事情。 都不是最佳實踐。 為什么不只是將單擊處理程序添加到img或整個單元格。 例如（為了清晰起見，我刪除了樣式的東西，順便說一句，我認為也應該使用CSS而不是Javascript）

xmlTitles = xmlDoc.getElementsByTagName("title");
document.getElementById('playlist').innerHTML = "Playlist (" + xmlTitles.length + " videos)";
document.getElementById('table').cellSpacing = "5px";
for (var i = 0; i < xmlTitles.length; i++)
{
    tr = document.createElement('tr');  
    titles[i] = xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue;
    image[i] = xmlDoc.getElementsByTagName("image")[i].childNodes[0].nodeValue;
    filename[i] = xmlDoc.getElementsByTagName("filename")[i].childNodes[0].nodeValue;
    td2 = document.createElement('td');
    //change here
    var imgEle = document.createElement('img')
    imgEle.src = iPath + image[i];
    imgEle.addEventListener('click', callVideo);
    td2.appendChild(imgEle);

    tr.appendChild(td2);
    td1 = document.createElement('td');
    var _title = titles[i];
    td1.appendChild(document.createTextNode(_title));
    tr.appendChild(td1);
    document.getElementById('table').appendChild(tr);
}

function callVideo()
{
    //'this' will be the img itself
    //so this.parentNode will be the cell (TD)
    console.log(this.parentNode.cellIndex);
    //this.parentNode.parentNode will be the row (TR)
    console.log(this.parentNode.parentNode.rowIndex);
}

順便說一下，順便說一下，所有單元格都將返回0，因為這是它們的索引，請記住Javascript索引從0開始（即0是第一個索引，1是第二個索引，依此類推）。 坦白說，我不確定為什么需要cellIndex，因為在第一個單元格中就已經知道它始終為0（即第一個單元格），因為您的代碼創建了它。 盡管如果這只是較大代碼中的一小段，並且您在其他單元格中有圖像，那還是有意義的。

Answer 2

鑒於您動態生成的DOM是正確的，因此需要進行兩個更改。

1. 將<a href="javascript:callVideo(this)">...</a>更改為<a href="javascript:void(0);" onclick="callVideo(this)">...</a> <a href="javascript:void(0);" onclick="callVideo(this)">...</a> ，使其成為事件處理程序 。 否則，因為通過href執行功能是在全局上下文中進行的， 因此這實際上是window的全局對象。 因此，您的函數將接收window作為其參數，這是錯誤的

2. 將callVideo函數的主體更改為OJay的解決方案

   \n 函數callVideo（x）\n {\n    console.log（x）;  //確定x是什么\n    console.log（“單元格索引：” + x.parentNode.cellIndex）;\n }