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中创建一个锚标记，然后将事件处理程序放在标记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); }

OH，顺便说一句，所有单元格都将返回0，因为这是它们的索引，记住Javascript索引从0开始（即0是第一个，1是第二个等）。所以说实话，我不确定你为什么需要cellIndex，因为它总是为0（即第一个单元格），因为你已经知道它在第一个单元格中，因为你的代码创建了它。虽然如果这只是较大代码的片段，并且您在其他单元格中有图像，那么它就有意义。

Answer 2

需要进行两项更改，因为您的动态生成DOM是正确的。

将<a href="javascript:callVideo(this)">...</a>更改为<a href="javascript:void(0);" onclick="callVideo(this)">...</a>，使其成为事件处理程序。否则，因为通过 href 执行功能在全局上下文中，此将实际上是全局对象是窗口。因此，您的函数将接收窗口作为参数，这是错误的

将callVideo功能的正文更改为OJay的解决方案

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

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

2 个答案: