[英]Change color of a table cell using javascript using dropdown menu
我想使用一些JavaScript代码来更改表格中单个单元格的背景颜色。
我下面有一些代码,允许我更改页面背景颜色。 这在概念上与我想要的类似,但是我真的很希望能够只更改一个单元格,而不是整个页面。
我曾考虑过将其余的单元格边框和背景颜色设置为白色,而使要操作的单元格保持透明,但是我认为这可能是蛮力方法,这会给我带来麻烦。
有没有人建议使用javascript做到这一点?
页面背景颜色更改代码在这里:
<form name="bgcolorForm">Try it now:
<select onChange="if(this.selectedIndex!=0)
document.bgColor=this.options[this.selectedIndex].value">
<option value="choose">set background color
<option value="FFFFCC">light yellow
<option value="CCFFFF">light blue
<option value="CCFFCC">light green
<option value="CCCCCC">gray
<option value="FFFFFF">white
</select></form>
您是否正在寻找这样的东西? http://jsfiddle.net/2KdmA/但是,如果您打算进行大量操作,建议您使用jQuery。
只需使用: document.getElementById('theID').style.backgroundColor ="#" + value
单元格上的document.getElementById('theID').style.backgroundColor ="#" + value
。
您正在使用jQuery吗? 还是必须是纯JS?
使用jQuery可以使用$(selector).css("background-color", value);
如果只有一个单元格(不重复),则可以为其指定一个特定的ID,然后在onchange事件中将其作为目标。
例如,如果您的td id =“ mycell”
然后在选择更改时调用函数updateColor
<select onChange="updateColor(this.options[this.selectedIndex].value);">
这是功能
function updateColor(color){
var myCell = document.getElementById('mycell');
myCell.style.background = "#"+color;
}
查看更新的小提琴
如果要按单元格坐标访问,可以执行以下操作
function cellColour(tableId, row, column, col){
var t = document.getElementById(tableId);
if(!t) throw '#'+tableId+' does not exist.';
if(t.rows.length <= row) throw 'Row '+row+' of #'+tableId+' does not exist.';
t = t.rows[row];
if(t.cells.length <= column) throw 'Column '+column+' of row '+row+' of #'+tableId+' does not exist.';
t = t.cells[column];
t.style.backgroundColor = col;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.