我正在做一个测试项目,以学习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> RED</div></td>
<td id="cell2"><div> BLUE</div></td>
<td id="cell3"><div> GREEN</div></td>
</tr>
<tr>
<td id="cell5"><div> PINK</div></td>
<td id="cell6"><div> PURPLE</div></td>
<td id="cell7"><div> YELLOW</div></td>
</tr>
<tr>
<td id="cell9"><div> BLACK</div></td>
<td id="cell10"><div> BROWN</div></td>
<td id="cell11"><div> GREY</div></td>
</tr>
</tbody>
</table>
<table width="300" border="1" id="menulist">
<tbody>
<tr>
<td id="colourname"><div> colour name</div></td>
</tr>
<tr>
<td id="colour"> colour</td>
</tr>
</tbody>
</table>
</body>
</html>
我已经为每个单元格提供了ID,我想做的是,根据用户单击的单元格来更改底部两个单元格“colourname”和“colour”的值,但是,我想手动将值传递给javascript参数当我点击它时;像这样的东西;
</script> <td id="cell1" onClick="mySetup("RED", Color:RED)"><div> 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> colour name</div></td>
</tr>
<tr>
<td id="colour"> 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> RED</div></td>
<td id="cell2" onclick="f('BLUE', 'name BLUE')"><div> BLUE</div></td>
<td id="cell3" onclick="f('GREEN', 'name GREEN')"><div> GREEN</div></td>
</tr>
</tbody>
</table>
<table width="300" border="1" id="menulist">
<tbody>
<tr>
<td id="colourname"><div> colour name</div></td>
</tr>
<tr><td id="colour"> colour</td></tr>
</tbody>
</table>
见https://jsfiddle.net/gkmmmk86/4/