向 jQuery 脚本添加 cookie 功能（确保表格单元格保持突出显示）答案

【问题标题】：Adding cookie functionality to jQuery script (ensuring table cells remain highlighted)向 jQuery 脚本添加 cookie 功能（确保表格单元格保持突出显示）
【发布时间】：2018-10-16 02:05:28
【问题描述】：

我有以下 jQuery 代码：

<script type="text/javascript">
    $(document).ready(function() {
        var color = ['none', 'green', 'yellow', 'red'];
        $('table').on('change','select', function() {
            $(this).parents('td').css('background', color[$(':selected', this).index()]);
        });
    });
</script>

选择选择框中的选项时，突出显示了行上的所有表单元格。我已经下载并实现了 jQuery cookie 插件。我的问题是如何实现功能（附加代码），以便在刷新页面或用户注销时，表格单元格的行将保持突出显示。

【问题讨论】：

标签： jquery css html-table

【解决方案1】：

您只需将选定的颜色存储在 cookie 中，然后将其读回即可。您可以使用jquery cookie plugin。此处的示例用法：

$(document).ready(function() {

    if ($.cookie("yourname")) {
        // applying color from cookie
        var color = $.cookie("yourname");
        $('div').css('background', color);
        $('select').val(color);
    }

    $('div').on('change', 'select', function() {
        // applying selected color, storing it in the cookie
        var color = $(this).val();
        $.cookie("yourname", color);
        $('div').css('background', color);
    });

});

DEMO

PS：对于演示，我使用稍微修改的脚本，因为您没有提供 HTML 标记。

【讨论】：

谢谢，我的 HTML 如下所示： echo ' ';回声“”；该表由数据库结果填充。然后我将订单标记为已批准、待处理或未批准，表格单元格会改变颜色。
感谢这项工作，页面状态在刷新或注销时保持不变。我将如何定位表格的每一行？因为目前整张桌子正在改变颜色。也可以将 CSS 颜色放在每个选项名称之外，因为它们需要保持相同（已批准、未决和不赞成）抱歉，最后一个要求是选项值本身在页面刷新时保持相同状态, 个别。非常感谢
这有意义吗？您说您正在以不同颜色显示订单，并且希望将颜色存储在 cookie 中。仅存储用户 ID 或一些令牌以便能够在服务器端呈现颜色不是更好吗？
嗨，是的，当状态改变时，我很难选择单个行，并确保选择框选项值保持不变。这可能是一个更好的选择。我需要做的就是存储页面的状态，这样当用户返回时，他们会看到正确的状态和颜色。我可以使用 php 做到这一点吗？谢谢
还有多个用户会查看表格

【解决方案2】：

谢谢你的回答。在以下代码中实现它的最佳方法是什么：

<?php
while ($row = mysql_fetch_assoc($result))

{
echo '<tr>';

echo '<td><input type="text" name="order_no[]" value="' . $row['Orderno'] . '"/></td>';
echo '<td><input type="text" name="order_date[]" value="' . $row['Orderdate'] . '"/>   </td>';
    echo '<td><input type="text" name="order_ordered_by[]" value="' . $row['Orderedby'] . '"/></td>';
    echo '<td><input type="text" name="order_supplier[]" value="' . $row['Supplier'] . '"/></td>';
    echo '<td><input type="text" name="order_total_price[]" value="' . $row['totalprice'] . '"/></td>';
    echo '<td><input type="text" name="order_requested_by[]" value="' . $row['requestedby'] . '"/></td>';
    echo '<td>';
    echo '<select name="order_status[]">';
    echo '<option></option>';
    echo '<option>Approved</option>';
    echo '<option>Pending</option>';
    echo '<option>Dissaproved</option>';
    echo '</select>';
    echo '</td>';
    echo '</tr>';

}
?>

【讨论】：