从动态生成的表中获取行和单元格的值

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 }