我希望我的表格行根据其下拉状态更改其颜色。如何使用 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
}
}
这可能有点简单，可能需要针对您的特定应用程序进行更新，但鉴于您展示的示例代码，这似乎有效。
您可以查找下拉列表的父节点，然后获取同级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();
演示 - 查找兄弟姐妹td并更改backgroundColor
多行演示
目前一些浏览器引擎为空格插入文本节点， 因此，上一个同级实际上可能不会返回第一个
td时间它被召唤。 文本节点属于类型 3，您需要确保 你找到一个元素节点，它是类型 1。 这就是为什么我们循环 直到上一个同级返回节点类型 1