我正在做一个测试项目,以学习Web开发,但遇到了不确定的问题。

我有一个包含11个单元格的表。 9个单元格中具有预定义的值,但是,对于其他两个单元格,我想通过将值传递给参数来手动设置该值。

编码;

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Colour Match</title>
</head>

<body>
<table width="300" border="1" id="menuitems">
  <tbody>
    <tr>
      <td id="cell1"><div>&nbsp;RED</div></td>
      <td id="cell2"><div>&nbsp;BLUE</div></td>
      <td  id="cell3"><div>&nbsp;GREEN</div></td>
    </tr>
    <tr>
      <td id="cell5"><div>&nbsp;PINK</div></td>
      <td  id="cell6"><div>&nbsp;PURPLE</div></td>
      <td  id="cell7"><div>&nbsp;YELLOW</div></td>
    </tr>
    <tr>
      <td id="cell9"><div>&nbsp;BLACK</div></td>
      <td  id="cell10"><div>&nbsp;BROWN</div></td>
      <td  id="cell11"><div>&nbsp;GREY</div></td>
    </tr>
  </tbody>
</table>
<table width="300" border="1" id="menulist">
  <tbody>
    <tr>
    <td id="colourname"><div>&nbsp;colour name</div></td>
    </tr>
    <tr>
      <td id="colour">&nbsp;colour</td>
    </tr>
  </tbody>
</table>
</body>
</html>

我已经为每个单元格提供了ID,我想做的是,根据用户单击的单元格来更改底部两个单元格“colourname”和“colour”的值,但是,我想手动将值传递给javascript参数当我点击它时;像这样的东西;
 </script> <td id="cell1" onClick="mySetup("RED", Color:RED)"><div>&nbsp;RED</div></td>

我对Javascript的了解不多,但是我对Java有一定的了解,这大概是可以在Java中实现的方式:
TextField someID;
Button SomeID;


    Public mySetup (String colourName, Color colour) {

    someID = colourName;
    someID.setBackgroundColor(colour)

    }

我想做的是在javascript中设置一个函数,该函数在调用onClick时将值作为参数并更改底部的两个单元格:

我确信这不是在JS中执行此操作的正确方法,而只是为了更好地解释我的问题:
Function mySetup (Var name, Color colour) {
colourName.setVar(name);
colour.setColour(colour);
}

我希望我已经正确解释了自己,如果没有,请告诉我,我将尽力更好地解释。

编辑:

colourName应该更改单元格的文本,而color应该更改单元格的背景色。

已编辑2

嗨,我想我的问题并没有我想的那么清楚。

函数的参数应采用两个值,对于colourName为1,对于背景色为1。

colourName应该更改colourname单元格的文本,backgroundcolour应该更改颜色单元格的颜色背景。
<td id="colourname"><div>&nbsp;colour name</div></td>
</tr>
<tr>
  <td id="colour">&nbsp;colour</td>
</tr>

最佳答案

function f(col, name) {
  $("#colourname div").html(name);
  $("#colour").css('background-color', col);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="300" border="1" id="menuitems">
  <tbody>
    <tr>
      <td id="cell1" onclick="f('RED', 'name RED')"><div>&nbsp;RED</div></td>
      <td id="cell2" onclick="f('BLUE', 'name BLUE')"><div>&nbsp;BLUE</div></td>
      <td id="cell3" onclick="f('GREEN', 'name GREEN')"><div>&nbsp;GREEN</div></td>
    </tr>
  </tbody>
</table>
<table width="300" border="1" id="menulist">
  <tbody>
    <tr>
      <td id="colourname"><div>&nbsp;colour name</div></td>
    </tr>
    <tr><td id="colour">&nbsp;colour</td></tr>
  </tbody>
</table>


https://jsfiddle.net/gkmmmk86/4/

10-07 18:08