0

我希望我的表格行根据其下拉状态更改其颜色。如何使用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
     }
}
4

1 回答 1

0

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

您可以查找下拉列表的父节点，然后获取兄弟节点并直接使用元素值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

多行演示

目前一些浏览器引擎会为空白插入 TextNode，因此 previousSiblingtd第一次调用时可能不会真正返回。TextNodes 属于类型 3，您要确保找到一个 ElementNode，它是类型 1。这就是为什么我们循环直到 previousSibling 返回一个节点类型 1

于 2013-09-07T00:27:35.023 回答