Question

我希望我的表格行根据其下拉状态更改其颜色。如何使用ajax？

echo '<table id="table_id">';
echo '<tr>';
echo '<td><b>'.$client.'</b></td>';
echo '<td>
<select class="color_status" onchange="update_Status(this.value)">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Yellow">Yellow</option>
</select>
</td>';
echo '</tr>';
echo '</table>';

如果我在下拉列表中选择一个红色，则当前行单元格将改变其颜色我在剧本上做了类似的事情：

function update_Status(str){
     if(str=='Red'){
       //the current row cells will turn to red
     }
     if(str=='Green'){
       //the current row cells will turn to green
     }
     if(str=='Yellow'){
       //the current row cells will turn to yellow
     }
}

Answer 1

这可能有点简单，可能需要针对您的特定应用进行更新，但考虑到您展示的示例代码，这似乎有效。

您可以查找下拉列表的父节点，然后获取兄弟td并直接使用元素值更改backgroundColor。您需要传递元素而不是仅传递值update_Status(this)而不是update_Status(this.value)，因为您需要从元素开始查找父元素和兄弟元素。

假设以下HTML：

<table id="table_id">
    <tr>
        <td><b>'.$client.'</b>
        </td>
        <td>
            <select class="color_status" onchange="update_Status(this)">
                <option value="Red">Red</option>
                <option value="Green">Green</option>
                <option value="Yellow">Yellow</option>
            </select>
        </td>
    </tr>
</table>

这将满足您的需求：

function update_Status(list) {
    var cell = list.parentNode;

    var targetCell = cell;

    do targetCell = targetCell.previousSibling;
    while (targetCell && targetCell.nodeType != 1);

    targetCell.style.backgroundColor = list.value;
}

// I'm assuming if you got many rows with this dropdown you would need to iterate through result of getElementsByClassName to execute onchange on each one.
document.getElementsByClassName('color_status')[0].onchange();

DEMO - 查找同级td并更改backgroundColor

Multi-Row DEMO

目前有些浏览器引擎会插入TextNodes用于空白区域，因此previousSibling可能实际上不会返回第一个td 它被称为时间。 TextNodes属于类型3，您需要确保你找到了一个ElementNode，它是1型。这就是我们循环的原因直到previousSibling返回节点类型1

如何根据字符串更改表格单元格的颜色？

1 个答案: