我正在尝试从动态生成的表 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);
}
谢谢。
最佳答案
我认为您遇到的问题是 callVideo 函数的上下文。当您构建动态表时,您在 td2 内创建一个 anchor 标记,然后将事件处理程序放在 a 标记 href 上,并传入该标记。我怀疑 callVideo 中的 x 根本不是 TD 元素,而是 anchor 标记(a 标记),并且由于 a 标记没有 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>
是一个 anchor /链接,并且在单击时运行函数会更改其默认行为,这意味着您可以添加诸如 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(即第一个单元格),因为你已经知道它在第一个单元格中,因为你的代码创建了它。尽管如果这只是较大代码的一个片段,并且您在其他单元格中有图像,那么它是有意义的。
关于javascript - 从动态生成的表中获取行和单元格值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33637872/