1

What I am trying to do... let's say A is image1, B is image2, C is image3 and D is image4. I need to click on the cell containing A and the second cell in the other table would change the background to image1. Click on the cell containing D... the background in the second cell of the other table would change to image4.

<table><tr>
<td width="50" align="center">A</td>
<td width="20"></td>
<td width="50" align="center">B</td>
<td width="20"></td>
<td width="50" align="center">C</td>
<td width="20"></td>
<td width="50" align="center">D</td>
</tr></table>
<BR><BR>
<table><tr>
<td width="50" align="center">unchanged</td>
<td width="20"></td>
<td width="100" align="center">background color<br>changes when<br>A,B,C or D<br>
is clicked on.</td>
<td width="20"></td>
<td width="50" align="center">unchanged</td>
</tr></table>

Thank you for your time.

4

2 回答 2

0

给你的表一个唯一的 id 并使用 jquery .click 和 .html 方法来改变内容。

$("#table1 tr td#a").click(function() {
 $("#table2 tr td:nth-of-type(2)").html("<img something.. >");
});
于 2013-07-24T14:04:03.187 回答
0

基本上，您需要为“可点击”表格单元格分配一个 javascript 函数，该函数将使用“onclick”进行所需的更改。“变化”的表格单元格将需要一个唯一的 ID，以便 javascript 轻松找到并影响它们。在最简单的形式中，javascript 函数将驻留<script>在<head>. 尝试这样的事情：

<html>
   <head>
      <script type="text/javascript">
         function changeImage(id, image) {
            var ref = document.getElementById(id);
            ref.innerHTML = '<img src='+image+'>';
         }
      </script>
   </head>
   <body>
      <table border=1><tr>
         <td width="50" align="center"
            onclick="changeImage('myCell','image1.gif');">A</td>
         <td width="20"></td>
         <td width="50" align="center"
            onclick="changeImage('myCell','image2.gif');">B</td>
         <td width="20"></td>
         <td width="50" align="center"
            onclick="changeImage('myCell','image3.gif');">C</td>
         <td width="20"></td>
         <td width="50" align="center"
            onclick="changeImage('myCell','image4.gif');">D</td>
      </tr></table>
      <BR><BR>
      <table border=1><tr>
         <td width="50" align="center">unchanged</td>
         <td width="20" id="myCell"></td>
         <td width="100" align="center">background color<br>changes when<br>A,B,C or D<br>
         is clicked on.</td>
         <td width="20"></td>
         <td width="50" align="center">unchanged</td>
      </tr></table>
   </body>
</html>

我没有解决背景颜色，但我希望这能给你一个开始。:)

于 2013-07-24T16:37:25.853 回答