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

Highlighting a row of table cells using a drop down select menu

本文关键字：一行 单元格 表格 显示 选择 高亮 菜单      更新时间：2023-09-26

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

这是我到目前为止的代码：

<?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()]);
    });​
});

jsFiddle示例

试试这个（jsFiddle）：

function myJSFunction(element)
{
    var row = element.parentNode.parentNode;
    switch(element.options[element.selectedIndex].innerHTML)
    {
        case "Pending":
            row.style.background = "#FF7E00";
            break;
        case "Approved":
            row.style.background = "green";
            break;
        case "Disapproved":
            row.style.background = "red";
            break;
        default:
            row.style.background = "white";
    }
}
相关文章：