如何根据字符串更改表格单元格的颜色
How to change the color of table cells based on a string?
我希望我的表格行根据其下拉状态更改其颜色。如何使用 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
相关文章:
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 如何将jQuery/AAJAX结果放入表格单元格
- 使用下拉选择菜单高亮显示一行表格单元格
- 使用javascript下拉菜单更改表格单元格的颜色
- 表格单元格高度与背景高度匹配
- 在表格单元格中查找超链接
- 如何使用单击属性和工具提示动态创建表格单元格,该工具提示将超链接到页面
- 在 DIV 中定位表格单元格
- 单击时将表格单元格从范围更改为输入
- 使用 javascript 为 HTML 表格单元格指定颜色
- 将单击表格单元格重定向到其中的
- JQuery insertAfter();移动下一个表格单元格
- 单击并用CTRL+C复制值时高亮显示html表格单元格
- TinyMCE - 允许表格单元格元素作为有效的 html
- 使用jsp更改表格单元格的颜色
- 如何从表格单元格中删除html的某些部分
- 在动态表格单元格跨度中单击时更新一个权重值
- 从所选内容中选择选项,并在表格单元格中显示所选内容的信息
- 在输入字段之前提取表格单元格中的文本
- 使用外部 javascript 更改多个表格单元格中的文本