jquery表格动态添加及各行变色效果

最新推荐文章于 2022-05-13 08:45:47 发布
最新推荐文章于 2022-05-13 08:45:47 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： 前端笔记 jquery 文章标签： jquery 隔行变色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32584661/article/details/53116934
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格动态添加及各行变色效果</title>
    <script src="js/jquery-1.11.1.js"></script>
    <style type="text/css">


        *{padding: 0;margin: 0;list-style: none;}

        body{ width: 1000px; margin:30px auto;}

        .box-head { background:#009cc3;border-radius: 5px 5px 0px 0px;max-height: 40px;}
        .box-content { background: #eee;border: 1px solid #bbb;border-top: none;
        border-radius: 0 0 3px 3px;padding:10px;}
        .small_ico3{font-size: 16px;color: #ffffff; line-height: 40px; padding-left:10px;}

        .table_ban{ background: url("img/kacha.png") no-repeat center 12px #ffffff;
        overflow: hidden; padding-bottom: 10px;}

        .table_boxl{float:left; margin-left:20px;}
        .table_boxr{float:right;margin-right:20px;}

 color: #ffffff!important; padding-left:38px;
            background: url("img/moredjbg.png") no-repeat; margin:10px 0;}

        .table {border:1px solid #1295b6;border-right-width:0;display:inline-block;}
        .table ul li{float:left;width:180px;text-align:center;
        border-right:1px solid #1295b6;
            cursor:pointer;position:relative;}

        .table ul{clear:both;margin-bottom:0;padding-left:0;}
        .table .lis1{width:70px;}
        .table .tit{line-height:30px;font-weight:bold;background:#8fd3e4;height:30px;}
        .table .tr{border-top:1px solid #1295b6;line-height:28px;height:28px;}


        .col{color:red;font-weight:normal;}

        .linebox{ float: left; background: url("img/lineline.png") repeat-y center; width:46px;
            height:604px; margin:58px 0 0 12px; }

    </style>
</head>
<body>


<div class="box" style="width:100%;">
    <div class="box-head">
        <h2 class="small_ico3">数据表</h2>
    </div>
    <div class="box-content ">

        <div class="table_ban">

            <div class="table_box table_boxl">
                <h5>数据1</h5>
                <div class="table" id="cys_form">
                    <ul class="tit">
                        <li class="lis1">名次</li>
                        <li>企业</li>
                        <li>区域</li>
                    </ul>
                    <!--<ul class="tr">-->
                        <!--<li class="lis1">1</li>-->
                        <!--<li>顺丰 (<strong class="col">98%</strong>)</li>-->
                        <!--<li>顺丰 (<strong class="col">98%</strong>)</li>-->
                    <!--</ul>-->


                </div>
            </div>

            <div class="linebox"></div>

            <div class="table_box table_boxr">
                <h5>数据2</h5>
                <div class="table" id="djl_form">
                    <ul class="tit">
                        <li class="lis1">名次</li>
                        <li>企业</li>
                        <li>区域</li>
                    </ul>
                    <!--<ul class="tr">-->
                        <!--<li class="lis1">1</li>-->
                        <!--<li>顺丰 (<strong class="col">98%</strong>)</li>-->
                        <!--<li>顺丰 (<strong class="col">98%</strong>)</li>-->
                    <!--</ul>-->


                </div>
            </div>



        </div>
    </div>
</div>

<script>
    $(function () {

        var table_cys1=['圆通','申通','天天','德邦','全峰','国通','EMS','百世','韵达','宅急送','速尔','优速','快捷','中国邮政','圆通','国通','EMS','百世','韵达','宅急送'];
        var table_cys2=['100','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200'];
        var table_cys3=['圆通','申通','天天','德邦','全峰','国通','EMS','百世','韵达','宅急送','速尔','优速','快捷','中国邮政','圆通','国通','EMS','百世','韵达','宅急送'];
        var table_cys4=['100','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200'];

        var table_djl1=['圆通','申通','天天','德邦','全峰','国通','EMS','百世','韵达','宅急送','速尔','优速','快捷','中国邮政','圆通','国通','EMS','百世','韵达','宅急送'];
        var table_djl2=['98%','98%','98%','98%','98%','98%','98%','200','200','200','200','200','200','200','200','200','200','200','200','200'];
        var table_djl3=['圆通','申通','天天','德邦','全峰','国通','EMS','百世','韵达','宅急送','速尔','优速','快捷','中国邮政','圆通','国通','EMS','百世','韵达','宅急送'];
        var table_djl4=['100','200','98%','200','200','98%','200','200','98%','200','98%','200','200','200','200','200','200','200','200','200'];

        var num=table_cys1.length;


/查验数/

        for(var i=0;i<num;i++){
            var $cystable_ul=$('<ul  class="tr"></ul>');
            var $cystable_li1=$('<li class="lis1">'+(i+1)+'</li>');
            var $cystable_li2=$('<li>'+table_cys1[i]+'(<strong class="col">'+table_cys2[i]+'</strong>)</li>');
            var $cystable_li3=$('<li>'+table_cys3[i]+'(<strong class="col">'+table_cys4[i]+'</strong>)</li>');
            $cystable_ul.append($cystable_li1);
            $cystable_ul.append($cystable_li2);
            $cystable_ul.append($cystable_li3);
            $('#cys_form').append($cystable_ul);
        }
/登记率/

        for(var i=0;i<num;i++){
            var $djltable_ul=$('<ul  class="tr"></ul>');
            var $djltable_li1=$('<li class="lis1">'+(i+1)+'</li>');
            var $djltable_li2=$('<li>'+table_djl1[i]+'(<strong class="col">'+table_djl2[i]+'</strong>)</li>');
            var $djltable_li3=$('<li>'+table_djl3[i]+'(<strong class="col">'+table_djl4[i]+'</strong>)</li>');

            $djltable_ul.append($djltable_li1);
            $djltable_ul.append($djltable_li2);
            $djltable_ul.append($djltable_li3);
            $('#djl_form').append($djltable_ul);

        }

        $('.tr').each(function () {
            var a=$(this).index()%2;
            if(a===0){ $(this).css("background","#e5e5e5")};
            if(a===1){ $(this).css("background","#ffffff")};
        });

        $('.tr').mouseenter(function () {
            $(this).css("background","#b1e1eb");
        })

        $('.tr').mouseleave(function () {
            var a=$(this).index()%2;
            if(a===0){ $(this).css("background","#e5e5e5")};
            if(a===1){ $(this).css("background","#ffffff")};
        })


    })


</script>

</body>

效果图显示：

这里写图片描述

酷jjs
关注
专栏目录
jquery html 多行,JQ实现动态添加多行
weixin_42628573的博客
06-25 752
一.实例二.Html代码添加一行三.JQ代码1.添加行$("#addTimeItems_Basics").on("click", function () {var len = $("#GiveTimeGroup_Basics").find("div[id^=‘role_‘]").length;$("#GiveTimeGroup_Basics").append(‘~元赔付元‘);})2.删除行$...
jquery动态生成表格
06-06 934
无标题文档 $(document).ready(function (){ $("#submit").click(function (){ //先获取文本框的值 var $name=$("#name").val(); var $email=$("#email").val(); var $phone=$("#phone").val()...
jQuery 动态添加或删除表格行
03-27
jQuery 动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行，基于jQuery插件完成，想研究的朋友下载一看。
[原创]持续给力：jQuery实现表格隔行变色效果案例详解
liwei3gjob的专栏
03-26 2253
      本案例源码 jQeruy20110323.rar    由于这几天忙着给学生出卷、测试等相关工作，导致这几天博客没有更新太多的东西，从本周开始我会持续的原创一些jQuery方面的文章，也请大家继续关注，我的宗旨是只要发文，一定附上源代码，供各位大本营的朋友免费下载，也请大家转载的时候注明出处     jQuery是什么？不少同学可能会知道一些，但是可能还不是很全面，下面是给大家
JQuery实现单行变色表格（附代码）
weixin_46726346的博客
08-15 566
效果展示： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> th {
jquery 动态创建表格单元随机色
09-03
jquery 动态创建表格，单元背景随机色
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
10-22
总结来说，本文提供的实例代码不仅清晰地演示了如何用jQuery实现表格的隔行变色和点击行变色，而且强调了jQuery在网页交互设计中的实用性和有效性。通过编写简单的jQuery脚本，可以极大地增强网页的功能和用户的交互...
html5和jQuery动态饼状图表插件.pdf
最新发布
02-28
接下来，代码使用jQuery库来实现动态效果。当DOM准备就绪时，会调用名为`pieChart`的函数。这个函数中包含了图表的配置设置，例如： - `chartSizePercent`：定义了图表半径相对于canvas宽度或高度的比例，用于调整...
razor table分页、隔行变色 table_pages_color_demo
09-24
本示例“razor table分页、隔行变色 table_pages_color_demo”专注于如何在网页上展示数据，同时实现表格的分页功能和隔行变色效果，以提高用户体验。 首先，我们需要理解`razor`语法。Razor视图引擎的核心是`....
Jquery实现表格动态增加一行，删除一行.html
05-15
Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)
JQuery 动态增加删减行，并合并其中几行
weixin_44469852的博客
05-13 652
JQuery 动态增加删减行，并合并其中几行相同的数据
js 指向表格行变色，离开恢复
weixin_30423977的博客
05-10 74
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <script> ...
jquery ＜table＞中选中一行，行背景色改变
虾米大王的学习历程
03-25 595
css文件中 .lineColor { background-color: #eeeeee; } js文件中 function TableRowSelectColor(clsName) { $(clsName).find("tr").click(function () { var rows = $(this).parent().find("tr"); if(rows.hasClass("lineColor")) {
jquery如何对js动态产生的表格行高亮显示
MMY
08-22 289
前几天本人在用jquery的时候， 鼠标移到table上的td时，所在的行高亮显示其他颜色，网上很多例子，包括官方的例子也只是针对页面上的静态数据，但是实际开发中我们操作的数据确实动态产生的，于是作了个测试，始终不行，在查资料，对js动态产生的表格数据，关于这方面的资料太少了，即使有网友提到这方面的也说不能操纵动态的。可能是本人的道行不够吧，花了些时间，终于做出来了   &lt;script...
jquery实现表格中点击相应行变色功能
weixin_30707875的博客
10-04 209
对于一个表格，为了使我们选中的项更容易区分，需要为选中项添加高亮，同时也需要，将其他项的高亮形式去除。类似于： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> ...
h5表格隔行换色
biggrand的博客
11-09 3448
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0 auto; } </style> <script src="js/jquery-1.1
jQuery为表格行添加背景色
LeavesMi的博客
07-04 3086
.odd { background-color:#ffc;/*奇数行背景色-浅黄色*/ } .even { background-color:#cef;/*偶数行背景色-浅蓝色*/ } $().ready(function(){ $('tr:odd').addClass('odd'); $('tr:even').addClass('even'); });注：:eq
jQuery动态生成隔行变色表格
庞凡 坚定自己踏实走好每一步
04-27 5097
jQuery动态生成隔行变色表格下载地址：http://download.csdn.net/detail/lypf19900912/8638743
jQuery table行变色
zythy的专栏
09-01 1339
jQuery table鼠标经过行变色函数
jQuery动态表格添加与删除示例及代码
本文将详细介绍如何使用jQuery实现一个简单的动态添加和删除表格的功能。在网页开发中，动态表格处理对于用户交互和数据展示具有重要意义，尤其是在需要实时更新或响应用户操作时。以下将逐步解析代码和功能实现。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值