Javascript 使用下拉选择菜单高亮显示一行表格单元格

我一直在努力寻找解决方案来实现这一目标。我有一个填充了数据库数据的HTML表单。该表由6列组成，其中一列名为“状态”，在下面的每个单元格中都有一个下拉菜单。当用户从下拉列表中选择一个值时，该菜单包含三个值“待定”、“已批准”和“未批准”。该行上的所有单元格应更改颜色（绿色-已批准、琥珀色-待定、红色-已批准）

以下是我目前的代码：

<?php
$result = mysql_query("SELECT * FROM Orders")
or die (mysql_error());
?>
<table class="table1" style="background-color:#ffffff;" >
<h4>Purchase Orders</h4>
<tr>
<th>Order Number</th>
<th>Order Date</th>
<th>Ordered By</th>
<th>Supplier</th>
<th>Total Price</th>
<th>Status</th>
</tr>
<?php
while($row=mysql_fetch_array($result)){
echo "</td><td>";
echo $row['Orderno'];
echo "</td><td>";
echo $row['Orderdate'];
echo "</td><td>";
echo $row['Orderedby'];
echo "</td><td>";
echo $row['Supplier'];
echo "</td><td>£";
echo $row['totalprice'];
echo "</td><td>";
echo '  <select id="'.$row['Orderno'].'" onchange="myJSFunction(this)">
<option></option>
<option>Approved</option>
<option>Pending</option>
<option>Disapproved</option>                  
</select>';
echo "</td></tr>";
}
echo "</table>";
?>

采购订单
订单号
订购日期
订购人
供应商
总价
地位

如果有人能给我指出正确的方向，我将不胜感激。如何为每个颜色变化创建三个函数，然后将它们应用于每个选项值。如果我应用Orderno，该行上的所有单元格都会受到影响吗？

试试这个（）：

---

我知道你没有用jQuery标记你的问题，但是如果这是一个选项，你可以使用：

$(document).ready(function() {
    var color = ['none', 'green', 'yellow', 'red'];
    $('table.table1').on('change','select', function() {
        $(this).parents('tr').css('background', color[$(':selected', this).index()]);
    });​
});

---

你应该粘贴你实际生成的HTML，而不是PHP代码。这与你问的最后一个问题有何不同？如果你喜欢上一个q-N的答案，你必须接受他们的道歉，这非常相似。我只是想知道在选择每个选项时如何触发更改。一些我没有完全了解的东西非常感谢您提供的解决方案，我将如何在php代码中实现这一点？目前，我正在将Javascript包含到页面的标记中，然后在脚本中调用函数，如：echo'和另一个示例：但是行颜色没有改变。再次感谢您第一件事是您需要在页面的头部包含jQuery库，并在后面添加上面的代码块。在那之后它应该会工作。好的，谢谢，像这样？然后是另一组脚本标记？当我创建长方体时，将如何调用它？谢谢你。当选择框更改时，将自动调用它。唯一的问题是，上面的代码设置为在页面上的所有选择框上运行。如果有不希望附加的选择框，可以使用类、ID或父元素的组合来指定。好的，谢谢。将新记录添加到数据库时，将在表中动态生成选择框。因此，指定一个类可能很困难？感谢您提供的解决方案，但是，当选择每个选项值时，我看不到字段的颜色发生变化。我在文档的标记中实现了上述代码。选择框如下所示：echo“”；echo“批准待批准”；回声“；}回声“；很抱歉，我的意思是实现这个示例：在我当前的脚本中无法运行。谢谢你包括图书馆吗？您可以下载它并将其包含在本地代码中，也可以将其链接到托管副本，方法是将其放在您的部分：

Hi j08691，非常感谢新的解决方案。这在创建表时起作用，但是我无法在php代码中使用它。我将完成我所采取的步骤。首先，我在页面上使用jquery。然后是函数：$（document）.ready（函数（）{var color=['none'，green'，yellow'，red']；$（'table.table1'）。on（'change'，'select'，function（）{$（this）.parents（'td'）.css（'background'，color[$（'selected'，this.index（））；}）；​ });
$(document).ready(function() {
    var color = ['none', 'green', 'yellow', 'red'];
    $('table.table1').on('change','select', function() {
        $(this).parents('tr').css('background', color[$(':selected', this).index()]);
    });​
});