选择下拉项时将 CSS 添加到单个表行

Question

我想知道实现这一目标的最佳方法。我有一个嵌入在显示订单列表的表格中的表单。我有一个包含三个项目的下拉列表。"待处理"、"已批准"和"已拒登"，当用户选择其中一个选项并点击"更新"时，该行的状态会更改。我想要的是整个表格行根据已选择的项目改变颜色。

我知道这可以使用我必须工作的 jQuery 来实现，但我需要它，以便根据选项值应用一个类。 我可以使用 PHP 来做到这一点吗？ 并将类应用于选项值服务器端，以便在用户刷新页面时，单个表单元格将保持突出显示？

echo '<tr>';
    echo '<td><input type="text" readonly=true name="order_no['.$i.']" value="' . $row['Orderno'] . '"/></td>';
    echo '<td><input type="text" readonly=true name="order_date['.$i.']" value="' . $row['Orderdate'] . '"/></td>';
    echo '<td><input type="text" readonly=true name="order_ordered_by['.$i.']" value="' . $row['Orderedby'] . '"/></td>';
    echo '<td><input type="text" readonly=true name="order_supplier['.$i.']" value="' . $row['Supplier'] . '"/></td>';
    echo '<td><input type="text" readonly=true name="order_total_price['.$i.']" value="' . $row['totalprice'] . '"/></td>';
    echo '<td><input type="text" readonly=true name="order_requested_by['.$i.']" value="' . $row['requestedby'] . '"/></td>';
    echo '<td>';
    echo '<select name="order_status['.$i.']" id="id" onchange="showUser(this.value)" >';
    echo '<option value = "Pending"   name="order_status['.$i.']" class = "pending"' . ($row['status'] == 'Pending' ? ' selected=selected' : '') . '>Pending</option>';
    echo '<option value = "Approved"  name="order_status['.$i.']" class = "approved"' . ($row['status'] == 'Approved' ? ' selected=selected' : '') . '>Approved</option>';
    echo '<option value = "Disapproved" name="order_status['.$i.']" class ="disapproved"' . ($row['status'] == 'Disapproved' ? ' selected=selected' : '') . '>Disapproved</option>';
    echo '</select>';
    echo '<td><input type="checkbox" name="order_selected['.$i.']"/></td>';
    echo '</td>';
    echo '</tr>';

Answer 1

您可以使用状态作为类名。

<?php echo '<tr class="' . $status . '"><td>...</td></tr>'; ?>

其中$status是提交的选择框的值。

编辑：

为了准备，我更新了您的代码：

<tr class="<?php echo $status; ?>">
    <td>
        <input type="text" readonly=true name="order_no[<?php echo $i; ?>]" value="<?php echo $row['Orderno']; ?>"/>
    </td>
    <td>
        <input type="text" readonly=true name="order_date[<?php echo $i; ?>]" value="<?php echo $row['Orderdate']; ?>"/>
    </td>
    <td>
        <input type="text" readonly=true name="order_ordered_by[<?php echo $i; ?>]" value="<?php echo $row['Orderedby']; ?>"/>
    </td>
    <td>
        <input type="text" readonly=true name="order_supplier[<?php echo $i; ?>]" value="<?php echo $row['Supplier']; ?>"/>
    </td>
    <td>
        <input type="text" readonly=true name="order_total_price[<?php echo $i; ?>]" value="<?php echo $row['totalprice']; ?>"/>
    </td>
    <td>
        <input type="text" readonly=true name="order_requested_by[<?php echo $i; ?>]" value="' . $row['requestedby'] . '"/>
    </td>
    <td>
        <select name="order_status[<?php echo $i; ?>]" id="id" onchange="showUser(this.value)" >
            <option value = "Pending"   name="order_status[<?php echo $i; ?>]" class = "pending"'<?php echo $row['status'] == 'Pending' ? ' selected=selected' : ''; ?>>Pending</option>
            <option value = "Approved"  name="order_status[<?php echo $i; ?>]" class = "approved"'<?php echo $row['status'] == 'Approved' ? ' selected=selected' : ''; ?>>Approved</option>
            <option value = "Disapproved" name="order_status[<?php echo $i; ?>]" class ="disapproved"'<?php echo $row['status'] == 'Disapproved' ? ' selected=selected' : ''; ?>>Disapproved</option>
        </select>
    </td>
    <td>
        <input type="checkbox" name="order_selected[<?php echo $i; ?>]"/>
    </td>
</tr>

您应该考虑对选择值和表行使用不同的类。

可能的 CSS 标记可以是：

table tr.Pending
{
    background-color: #FF0000;
} 
...

编辑2：我添加了一些代码，这些代码可能是您呈现页面的方式：

<?php for($i = 0; $i < count($_POST["order_no"]); $i++) :?>    
    <tr class="<?php echo $_POST["order_status"][$i]; ?>">
        <td>
            <input type="text" readonly=true name="order_no[<?php echo $i; ?>]" value="<?php echo $row['Orderno']; ?>"/>
        </td>
        <td>
            <input type="text" readonly=true name="order_date[<?php echo $i; ?>]" value="<?php echo $row['Orderdate']; ?>"/>
        </td>
        <td>
            <input type="text" readonly=true name="order_ordered_by[<?php echo $i; ?>]" value="<?php echo $row['Orderedby']; ?>"/>
        </td>
        <td>
            <input type="text" readonly=true name="order_supplier[<?php echo $i; ?>]" value="<?php echo $row['Supplier']; ?>"/>
        </td>
        <td>
            <input type="text" readonly=true name="order_total_price[<?php echo $i; ?>]" value="<?php echo $row['totalprice']; ?>"/>
        </td>
        <td>
            <input type="text" readonly=true name="order_requested_by[<?php echo $i; ?>]" value="' . $row['requestedby'] . '"/>
        </td>
        <td>
            <select name="order_status[<?php echo $i; ?>]" id="id" onchange="showUser(this.value)" >
                <option value = "Pending"   name="order_status[<?php echo $i; ?>]" class = "pending"'<?php echo $row['status'] == 'Pending' ? ' selected=selected' : ''; ?>>Pending</option>
                <option value = "Approved"  name="order_status[<?php echo $i; ?>]" class = "approved"'<?php echo $row['status'] == 'Approved' ? ' selected=selected' : ''; ?>>Approved</option>
                <option value = "Disapproved" name="order_status[<?php echo $i; ?>]" class ="disapproved"'<?php echo $row['status'] == 'Disapproved' ? ' selected=selected' : ''; ?>>Disapproved</option>
            </select>
        </td>
        <td>
            <input type="checkbox" name="order_selected[<?php echo $i; ?>]"/>
        </td>
    </tr>
<?php endforeach; ?>

但要小心显示从客户端收到的数据。您应该始终先检查它。

Answer 2

您可以使用 PHP 的会话来保留应用的类，并检查以读取会话值，因此每次刷新页面时，您都会返回您的值。

Answer 3

我认为jquery是比使用会话更好的方法。您可以添加id（这应该是唯一的，您可以使用来自数据库的唯一 id）和class用于使用 jquery <tr>和更新类<tr>，如下所示$("#tr_id").addClass("class_name");