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

基本的に、必要なのは、「クリック可能な」表のセルに、「onclick」を使用して必要な変更を行う JavaScript 関数を割り当てることです。「変化する」テーブル セルには、javascript が簡単に見つけて影響を与えるための一意の ID が必要です。最も単純な形式では、JavaScript 関数は .xml 内の<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 に答える
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 に答える