jQuery 表格选中颜色变化

深碍√TFBOYSˉ_ 2023-07-06 04:49 6阅读 0赞

功能简介：选中偶数行，tr颜色变化；td颜色暂时固定下来。tr红色，td淡蓝色。

<table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <script> // 先设置整体样式 $("table").css({ borderCollapse: "collapse", width: 500 }) $("td").css({ border: "1px solid #000000", textAlign: "center" }) // 选中偶数行颜色变红，否则变蓝 $("tr:odd").hover(function () { $(this).css("backgroundColor", "rgba(255,0,0,0.8)") }, function () { $(this).css("backgroundColor", "rgba(255,0,0,0)") }) // 解释：因为索引从0开始，所以奇数被选中，在我们看来，确是偶数行被选中了 // 下面的是td格子的颜色选中情况 $("td:odd").css("backgroundColor","rgba(0,0,255,0.1)"); // $("tr:even").css("backgroundColor","rgba(0,255,0,0.2)"); </script>

![在这里插入图片描述][20200216113946429.png]

[20200216113946429.png]: https://img-blog.csdnimg.cn/20200216113946429.png

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery实现表格隔行换颜色：

jQuery实现表格各行换颜色：截图如下： ![SouthEast][] 代码如下： <span style="font-family:Microsoft Y

快来打我*/ 2024年02月17日 14:16/ 0 赞/ 63 阅读

相关 Jquery中设置表格的悬浮和选中时行的背景颜色

场景效果 ![Image 1][]![20190702094055664.gif][] 要求鼠标放在一行上此行背景颜色单倍高亮，点击一行时双倍高亮。

比眉伴天荒/ 2023年10月18日 20:51/ 0 赞/ 58 阅读

相关 jquery怎么设置表格奇偶行不同的颜色？

在[jQuery][]中使用“$("tr:odd").css("background-color","颜色")”与“$("\tr:even").css("background-

Love The Way You Lie/ 2023年10月03日 19:22/ 0 赞/ 39 阅读

相关 jQuery 表格选中颜色变化

功能简介：选中偶数行，tr颜色变化；td颜色暂时固定下来。tr红色，td淡蓝色。 <table> <tr> <td>1</td

深碍√TFBOYSˉ_/ 2023年07月06日 04:49/ 0 赞/ 7 阅读

相关 Jquery遍历计算表格中选中的checkbox个数

/ 计算表格中选中的checkbox个数 / function checkedRowNums(){ var i = 0;

比眉伴天荒/ 2022年12月10日 03:43/ 0 赞/ 149 阅读

相关 checkbox选中和取消，控制dom元素颜色变化

<!DOCTYPE HTML> <html> <head> <title></title> <m

缺乏、安全感/ 2022年10月16日 01:49/ 0 赞/ 149 阅读

相关 checkbox选中和取消，控制dom元素颜色变化

<!DOCTYPE HTML> <html> <head> <title></title> <meta name="viewp

不念不忘少年蓝@/ 2022年10月10日 12:44/ 0 赞/ 190 阅读

相关 Jquery 实现表格颜色交替变化鼠标移过颜色变化实例

Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化效果附演示代码，喜欢的朋友可以参考下 Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化效果

比眉伴天荒/ 2022年08月27日 07:53/ 0 赞/ 136 阅读

相关 android中ImageView设置选中与不选中颜色

由于ImageView默认是没焦点，不可点击的，所以要设置背景颜色，就必须要有如下代码： 1.如果组件只需要点击，那么就设置： android:clickable=

小咪咪/ 2022年08月05日 05:22/ 0 赞/ 483 阅读

相关 jquery之表格颜色练习

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

末蓝、/ 2021年12月10日 07:31/ 0 赞/ 261 阅读