实现表格隔行变色且动态增加和删除

最新推荐文章于 2021-02-16 20:53:50 发布
最新推荐文章于 2021-02-16 20:53:50 发布
阅读量577 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Brave_TY/article/details/79523745
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态操作表格</title>
    
    <style>
        #data {
            width: 600px;
        }


        #data, td, th {
            border-collapse: collapse;
            border: 1px solid #aaaaaa;
        }


        th, td {
            height: 28px;
        }


        #data thead {
            background-color: #333399;
            color: #ffffff;
        }


        .blue {
            background-color: #ccccff;
        }
    </style>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
   $(function(){
       $("#add").click(function(){
        添加元素
            var appEle="<tr><td>Allen</td><td>$3700</td><td>2011-12-05</td><td><a href='#'>删除</a></td></tr>";
            // target.append(appEle)
            // appEle.appendTo(target)
            $("#data>tbody").append(appEle);
            $("#data>tbody>tr a").click(removeEle);
            $("#data>tbody>tr:even").css("background","pink");


       });
       //删除元素
       $("#data>tbody>tr a").click(removeEle);
       function removeEle(){
         var target=$(this).parent().parent();
            target.remove();
        $("#data>tbody>tr:even").css("background","pink");
         $("#data>tbody>tr:odd").css("background","");
       }
       $("#data>tbody>tr:even").css("background","pink");
   })
    </script>
</head>
<body>
    <input type="button" id="add" value="新增">
    <table id="data">
        <thead>
        <tr>
            <th>姓名</th>
            <th>工资</th>
            <th>入职时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Tom</td>
            <td>$3500</td>
            <td>2010-10-25</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>$3400</td>
            <td>2010-12-1</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>King</td>
            <td>$5900</td>
            <td>2009-08-17</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>Scott</td>
            <td>$3800</td>
            <td>2012-11-17</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>Smith</td>
            <td>$3100</td>
            <td>2014-01-27</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>Allen</td>
            <td>$3700</td>
            <td>2011-12-05</td>
            <td><a href="#">删除</a></td>
        </tr>
        </tbody>
    </table>
</body>
</html>
Brave_TY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery动态生成隔行变色的table
04-27
jQuery动态生成隔行变色的table，使用jQuery+css+json实现
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
1. 根据行的索引（奇偶性）动态添加样式类，实现表格隔行变色。 2. 监听鼠标事件，动态修改行的样式，实现鼠标滑过时的高亮显示效果。 通过这种方式，开发者可以轻松地增强表格的视觉效果，提高用户的交互体验。...
angular综合题 添加 删除 排序 隔行变色 等
xiaozhang0414的博客
12-08 360
2.用户信息添加页 3.删除询问框 实现用户数据列表展示5分，实现列表选中行变色5分，实现表格内行与行之间颜色区分5分，实现鼠标移动到删除上时变为小手样式5分。 2.实现姓名查询条件框5分，实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名”5分，实现按姓名搜索表格内容功能5分，当搜索内容未找到匹配项时提示”未找到内容”5分，当搜索内容有
java隔行变色_隔行变色---bai
weixin_36451610的博客
02-16 270
.mousein{background-color:blue;cursor: pointer;}.odd{background-color: gray;cursor: pointer;}$(document).ready(function (){//1 填充20行var html = "";for(var i=0;i<20;i++){html += ""+(i+1)+"";}$("tabl...
隔行变色
sunlizhen的专栏
06-15 208
//第一种： //首先获取div元素，因为要动态往div里添加p元素； var oDiv = document.getElementById("wrap"); //往div里动态添加p元素,因为要添加10个p每个p的内容不一样，所以要循环p； //var一个变量，初始值为空，以后要方变量的值； var str = ""; for(var i = 0;i10;i++){     i
js代码实现表格隔行变色，添加新的元素，以及鼠标停留变色
dfc_xiaoke的博客
09-18 540
js代码实现表格隔行变色，添加新的元素，以及鼠标停留变色 隔行变色 ![运行效果](https://img-blog.csdn.net/20180918170445981?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RmY194aWFva2U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFC...
js实现表格隔行变色
01-08
这里提到的"js实现表格隔行变色"就是一种通过JavaScript来动态改变HTML表格行背景色的技术。在给出的代码示例中，我们看到一个简单的实现方式。 首先，`window.onload`事件是JavaScript中的一个常见事件，它表示当...
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
10-22
下面小编就为大家带来一篇jQuery轻松实现表格的隔行变色和点击行变色的实例代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
android表格效果之ListView隔行变色实现代码
09-05
在Android开发中，为了提升用户界面的视觉效果和可读性，经常会在表格视图，如ListView中实现隔行变色的功能。这个功能使得用户在浏览列表时更容易区分不同的行，提高了阅读体验。本篇文章将详细讲解如何在Android中...
javascript实现table表格隔行变色的方法
10-24
主要介绍了javascript实现table表格隔行变色的方法,涉及javascript针对表格元素与样式的操作技巧,需要的朋友可以参考下
使用JavaScript实现可以动态增加行数的表格
01-14 329
最近见到了这样一个报表：要求填写项目可以动态增加，尝试着用JavaScript对该效果做出了实现。 经过分析： 1. 可以将上表的一行看做一个JS的Object； 2. 使用一个JS的Array来存储所有的内容； 3. 点击按钮时，相当于保存当前Object并刷新表格。 先实现一个简化版本： 简化版本的代码如下： 动态添加表格列 #content_table tr
jquery添加数据隔行变色
9960607的博客
11-07 718
日考         引入外部js         --> .tou { background: red; }         界面         --> 姓名:年龄:生日: 姓名 年龄 生日 删除         将js代码写在所有标签后面         --> //添加 $(
简单隔行变色及添加删除
Haley_170的博客
01-08 2390
<div> <label for="">姓名：</label> <input type="text" id="thename"> <label for="">年龄</label> <input type="text" id="theage"> <label for="">学期</label> <sel
JQuery表格新增与删除（点击按钮弹出框增加，点击删除减少指定行）隔行换色以及复选框全部勾选。
MissgirlFL的博客
11-04 957
JQuery表格按钮弹出框进行新增数据，删除指定行数据，隔行换色，复选框全选
JavaScript 操作table，可以新增行和列并且隔一行换背景色
weixin_34112208的博客
07-11 91
<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>JavaScript</title></head>&lt...
JTable动态加载表格
聆听梦飞扬的博客
10-23 1684
JTable动态加载表格，数据是模拟的public class LayoutTest extends JFrame { /** serialVersionUID = 4567832137864545L */ private static final long serialVersionUID = 4567832137864545L; /** 获取屏幕大小所用的变量 */
jsp页面怎么实现隔行变色
tangpeng2018的博客
04-12 7529
&lt;c:forEach var="student" items="${ students}" varStatus="status"&gt; &lt;c:if test=”${status.index % 2 == 0}”&gt; &lt;tr class = "even"&gt; --偶数行
使用js实现简单地对表格添加行和删除行
sleeping_xixi的博客
05-13 9167
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; new document &lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gbk"/&gt; &lt;scrip
elementplus表格隔行变色
最新发布
06-28
在 Element Plus 中，你可以使用 `:class` 或者 `style` 属性来为表格的行设置不同的 CSS 类，以便实现隔行变色。 例如，你可以这样做： ```html 姓名"> 年龄"> 地址"> <!-- 添加一个计算属性，用于控制行的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值