jquery 怎么样实现，点击一个表格(table)的 td时改变其背景颜色_教程

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。

2、在index.html中的<script>标签，输入jquery代码：

$('td').click(function(){

if ($(this).css('background-color') === 'rgb(255, 0, 0)') {

$(this).css('background-color', 'white')

} else {

$(this).css('background-color', 'red')

}

})

3、浏览器运行index.html页面，点击td，背景颜色变为红色。

4、再次点击td，背景颜色变回了原先的白色。

假设你的按钮的class是btn，两个背景图片分别是bg1.jpg和bg2.jpg，那么可以这样来做

css部分：

.btn {background:url(bg1.jpg)}

.btn:hover {background:url(bg2.jpg)}

html部分就很简单了，给input加个样式就行

使用这个样式时别忘了先把input的默认样式，那些padding、margin、border什么的都清零，然后再定义一下宽高，这样出来的视觉效果会好些。

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>

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

</head>

<body>

<tr>

</tr>

</table>

</body>

<!--

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

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

-->

</script>

</html>

欢迎分享，转载请注明来源：内存溢出

jquery 怎么样实现，点击一个表格(table)的 td时改变其背景颜色