怎么使用JavaScript在自定义函数里改变任意<td>的背景色

怎么使用JavaScript在自定义函数里改变任意<td>的背景色,第1张

javaScript可以通过CSS样式间接改变<td>背景颜色:

1。<td>必须有id号 即<td id="td1">。( 方便javaScript调用 document.getElementById("td1"))

2。CSS样式中背景颜色background-color,颜色格式#rrggbb,rgb(rr,gg,bb)(javaScript背景颜色backgroundColor)

范例html文件代码:

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>改变表格颜色</title>

</head>

<body>

<table width="400" border="1" cellspacing="0" cellpadding="0">

<tr>

<td id="td1" bgcolor="#000000"> </td><!--设置黑色的(实际为红色)-->

<td bgcolor="#000000"> </td>

</tr>

</table>

</body>

<script language="javascript" type="text/javascript">

<!--

document.getElementById("td1").style.backgroundColor="#FF0000"

//引用了td1单元格,改变backgroundColor值

-->

</script>

</html>

献上微薄之力

<html>

<head>

<title>changeTdColor</title>

<style>

table,td{

border:1px solid black

border-collapse:collapse

}

td{

border:1px solid black

border-collapse:collapse

width="30px"

height="15px"

}

</style>

<script>

function changeColor(obj){

var bgColor = Math.floor(Math.random()*255*255*255)

obj.style.backgroundColor = bgColor

}

</script>

</head>

<body>

<table>

<tr>

<td onClick="changeColor(this)">1</td>

<td onClick="changeColor(this)">2</td>

<td onClick="changeColor(this)">3</td>

</tr>

<tr>

<td onClick="changeColor(this)">4</td>

<td onClick="changeColor(this)">5</td>

<td onClick="changeColor(this)">6</td>

</tr>

<tr>

<td onClick="changeColor(this)">7</td>

<td onClick="changeColor(this)">8</td>

<td onClick="changeColor(this)">9</td>

</tr>

</table>

</body>

</html>

<script language="javascript" type="text/javascript">

function chgbg(id){

var obj=window.document.getElementById(id)

var bg=obj.style.backgroundColor

if(bg=='') obj.style.backgroundColor='#f00'

else obj.style.backgroundColor=''

}

</script>

<table width="100%" border="1" cellspacing="0" cellpadding="4">

<tr>

<td id="td1"></td>

<td id="td2"></td>

<td id="td3"></td>

</tr>

<tr>

<td id="td4"></td>

<td id="td5"></td>

<td id="td6"></td>

</tr>

</table>

<input type="button" value="点击改变指定单元格背景" onClick="chgbg('td1')" />


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11837787.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存