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

Answer 2

只需将数字放入其中：onclick="imgclick(1)"，onclick="imgclick(2)"等。并为您的函数添加参数

function imgclick(num) {
    alert("hey");
    txtarea.innerHTML="You clicked the baby no "+num;
}

如何访问表的元素

2 个答案: