javascript - 如何访问表的元素

Question

我有一个 JSfiddle 的例子 http://jsfiddle.net/pAQTn/8/

我想要的是我的 div 与图像相邻，我希望在单击图像时显示文本我想要的另一件事是文本包含我从 1-4 单击的图像这是我的 HTML

<table border="1">
<tr>
  <td>
      <img onclick="imgclick()" src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100" />
  </td>

  <td>
<img onclick="imgclick()" src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
  </td>
</tr>
<tr>
  <td>
 <img onlick="imgclick()" src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
  </td>
  <td>
 <img onclick="imgclick()" src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
</td>
</tr>
</table>
<div id="txtarea">
    </div>

这是我的CSS

img:hover{
     border:1px solid #0000ff;
    width:120px;
    height:120px;        
}

这是我的 JavaScript

function imgclick() {        
    txtarea.innerhtml="You clicked the baby no :";
}

Answer 1

jsFiddle

试试这个:

function imgclick(e) {
    src = (e.parentNode.parentNode.rowIndex * 2) + e.parentNode.cellIndex + 1;
    txtarea = document.getElementById('txtarea');
    txtarea.innerHTML = "You clicked the baby no :" + src;
}

我不确定你想在文本编号上显示什么。在我的示例中，我放置了 onclick = "imgclick(this)" 将函数与您单击的图像连接起来。
在示例中，您从表格位置获取 img nr。

另请注意:在您的 html 上，第 3 张图片有 onlick，它应该是 onclick