table鼠标经过修改样式

最新推荐文章于 2022-10-21 14:56:57 发布

weixin_43746297

最新推荐文章于 2022-10-21 14:56:57 发布

阅读量721

点赞数

分类专栏： jquery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_43746297/article/details/122624246

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

鼠标经过修改tr背景色

<tr onmouseover="tdMOver(this)" onmouseout="tdMOut(this)">
...
...
</tr>
...

function tdMOver(obj) {
	$(obj)[0].style.background= '#89cfc8'
}

function tdMOut(obj) {
	$(obj)[0].style.background= '#ffffff'
}

鼠移入tr时修改tr下面某个td的背景颜色

注：children()[0]，0代表每个tr下面第一个td

<tr onmouseover="tdMOver(this)" onmouseout="tdMOut(this)">
...
...
</tr>
...

function tdMOver(obj) {
	$(obj).children()[0].style.background= '#89cfc8'
}

function tdMOut(obj) {
	$(obj).children()[0].style.background= '#ffffff'
}

鼠标移入tr时修改tr下面某个td的字体颜色

<tr onmouseover="tdMOver(this)" onmouseout="tdMOut(this)">
...

</tr>
....

function tdMOver(obj) {
	$(obj).children()[1].style.color= '#89cfc8'
}

function tdMOut(obj) {
	$(obj).children()[1].style.color= '#ffffff'
}

鼠标移入tr时修改tr下面某个td的边框颜色,和字体颜色，和背景颜色

function tdMOver(obj) {
	$(obj).children()[1].style.color= '#fff'
	$(obj).children()[1].style.background= '#fd9595'
	$(obj).children()[1].style.border= '1px solid #000'
}
function tdMOut(obj) {
   $(obj).children()[1].style.color= '#030303'
	$(obj).children()[1].style.background= '#ffffff'
	$(obj).children()[1].style.border= 'none'
}