我正在开发一个测试项目来学习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，我想要做的是，更改底部两个单元格的值＆＃39; colourname＆＃39;和＆＃39;颜色＆＃39;但是，根据用户单击的单元格，我想在单击时调用值时手动将值传递给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应该更改单元格的文本，而颜色应该更改单元格的背景颜色。
已编辑2
嗨，我认为我的问题没有像我希望的那样明确;
函数的参数应该包含两个值，1表示colourName，1表示backgroundcolour。
colourName应该更改colourname单元格的文本，backgroundcolour应该更改颜色单元格的颜色背景。
<td id="colourname"><div> colour name</div></td>
</tr>
<tr>
<td id="colour"> colour</td>
</tr>
答案 0 :(得分：2)
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>
答案 1 :(得分：1)
首先，您的点击事件调用应该是这样的。
<td id="cell1" onClick="mySetup('RED')"><div> RED</div></td>
和JS：
更新：
function mySetup(Color) {
var arr = {
"RED": {
"colornam": "red",
"color": "red"
},
"GREEN": {
"colornam": "blue",
"color": "blue"
},
"BLUE": {
"colornam": "green",
"color": "green"
}
}
var colourname = document.getElementById('colourname');
var colour = document.getElementById('colour');
var coloName = arr[Color];
colour.style.background = coloName.color;
colourname.innerHTML=coloName.colornam;
}
请参阅Fiddle
请参阅更新后的fiddle
UPDATE2 ：
td id="cell1" onClick="mySetup('RED','red')"><div> RED</div></td>
JS：
function mySetup(Color,colorName) {
var colourname = document.getElementById('colourname');
var colour = document.getElementById('colour');
colour.style.background = Color;
colourname.innerHTML=colorName;
}
答案 2 :(得分：1)
写一个简单的函数
<强>的Javascript
function mySetup(CoulourName, Color){
var colourname = document.getElementById('colourname');
var colour= document.getElementById('colour');
colourname.innerHTML = CoulourName;
colour.style.background = Color;
}
<强> HTML
并在onClick = "mySetup('FANCY NAME','RED');"上使用td，依此类推其他颜色名称不同的人。
答案 3 :(得分：-3)
你可以试试这个：
<td id="cell1" onClick="mySetup('RED', '#FF0000')"><div> RED</div></td>
var Color = new Object（）;
function mySetup（name，colourCode）{
Color.name = name;
Color.colorCode = colourCode;
}