jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)

简介: jquery实现动态表格项目(表格增加删除/全选/表格变色特效)🍅 Java学习路线:搬砖工的Java学习路线🍅 作者:程序员小王🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步🍅 欢迎点赞 👍 收藏 ⭐留言 📝

一、用jquery实现动态表格相关功能

1、表格自动增加 当前行用户数据

2、表格自动删除 当前行数据

3、表格全选按钮

4、表格移动到当前行自动变色,自动变粗2px 的特性


二、项目具体实现代码

1、html基本实现(超详细注解)

(1)添加员工数据

<!--这个div是添加员工数据-->
<div>
    姓名:<input type="text" name="name" id="name">
    年龄:<input type="text" name="age" id="age">
    薪资:<input type="text" name="salary" id="salary">
    省份:<select onchange="test3()" id="province">
    <option value="gz">贵州</option>
    <option value="hlj">黑龙江</option>
    <option value="gs">甘肃</option>
</select>
    城市:<select id="city"></select>
    <input type="submit" value="提交" onclick="input()">
</div>


添加员工示列图

6.png


(2)表格(员工展示初始化表格)

<div class="table">
    <div id="div_h3">
        <h3>员工动态数据表格</h3>
    </div>
    <table border="1px" cellpadding="0px" cellspacing="0px" width="75%" align="center">
        <thead>
        <tr>
            <th> <input type="checkbox" id="selectAll">全选</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>薪资</th>
            <th>城市</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tbody">
        <tr onmouseover="test1(this);" onmouseout="test2(this);">
            <td><input type="checkbox"></td>
            <td>王恒杰</td>
            <td>21</td>
            <td>20000</td>
            <td>贵州遵义</td>
            <td><input type="button" onclick="remove(this)" value="删除"></td>
        </tr>
        <tr onmouseover="test1(this);" onmouseout="test2(this);">
            <td><input type="checkbox"></td>
            <td>吴洪旭</td>
            <td>23</td>
            <td>28000</td>
            <td>黑龙江哈尔滨</td>
            <td><input type="button" onclick="remove(this)" value="删除"></td>
        </tr>
        <tr onmouseover="test1(this);" onmouseout="test2(this);">
            <td><input type="checkbox"></td>
            <td>张西</td>
            <td>22</td>
            <td>18000</td>
            <td>甘肃兰州</td>
            <td><input type="button" onclick="remove(this)" value="删除"></td>
        </tr>
        <tr onmouseover="test1(this);" onmouseout="test2(this);">
            <td><input type="checkbox"></td>
            <td>杨福君</td>
            <td>19</td>
            <td>4000</td>
            <td>贵州遵义</td>
            <td><input type="button" onclick="remove(this)" value="删除"></td>
        </tr>
        </tbody>
    </table>
</div>

员工展示初始化表格

7.png


2、css样式(超详细注解)

css样式设置

1、body: 整个页面body的背景颜色样式
2、#div_h3:表格位置设置
3、#div_h3 h3 标题:“员工动态数据表格”的设置位置,颜色
4、th :表头的设置
5、tr:行设置
6、d:列设置
7、.cc1:表格自动变色,字体变大设置


具体css设置

 <style>
        body {
            background-color: #3e94ec;
            font-family: "Roboto", helvetica, arial, sans-serif;
            font-size: 16px;
            font-weight: 400;
            text-rendering: optimizeLegibility;
        }
        #div_h3 {
            display: block;
            margin: auto;
            max-width: 600px;
            padding: 5px;
            width: 100%;
        }
        #div_h3 h3 {
            color: red;
            font-size: 30px;
            font-weight: 400;
            font-style: normal;
            font-family: "Roboto", helvetica, arial, sans-serif;
            text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
            text-transform: uppercase;
        }
        th {
            color: #D5DDE5;;
            background: #1b1e24;
            border-bottom: 4px solid #9ea7af;
            border-right: 1px solid #343a45;
            font-size: 23px;
            font-weight: 100;
            padding: 24px;
            text-align: left;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            vertical-align: middle;
        }
        th:first-child {
            border-top-left-radius: 3px;
        }
        th:last-child {
            border-top-right-radius: 3px;
            border-right: none;
        }
        tr {
            background: #FFFFFF;
            font-size: 18px;
        }
        td {
            padding: 20px;
            text-align: left;
            vertical-align: middle;
            font-weight: 300;
            text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
            border-right: 1px solid #C1C3D1;
        }
        .cc1 {
            background: #4D4F66;
            font-size: 20px;
        }
    </style>


3、javaScript实现相关功能(超详细注解)

因为使用了jquery框架需要query文件,我使用的文件是(如果需要,源码和jquery文件都在文末):


jquery-1.8.3.min.js

8.png

(1)用jquery实现页面变色

   //1.用jquery实现页面变色
        //鼠标移入
        function test1(tr) {
            //4.事件发生后的监听功能,增加class属性
            $(tr).addClass("cc1");
        }
        //鼠标移出
        function test2(tr) {
            //4.事件发生后的监听功能,移除class类属性
            $(tr).removeClass("cc1");
        }


(2)用jquery实现下拉列表二级联动

 //2.用jquery实现下拉列表二级联动
        //(1)准备城市数据
        var city = {
            gz: ["贵阳", "遵义", "六盘水"],
            hlj: ["哈尔滨", "齐齐哈尔", "大庆"],
            gs: ["兰州", "庆阳", "天水"]
        }
        //(2)下拉列表二级联动的方法
        function test3() {
            // //(1)每次选择前先去清空县区下拉列表的内容
            var citySelect = $("#city")
            citySelect.text("");
            // (2)获取省的值,jquery中用val
            var cityValue = $("#province").val();
            // (3)获取市的值(两种方法) city.["gz"];
            var citys = city[cityValue];
            //(4)遍历市的信息for(inner in 市的值citys)
            for (index in citys) {
                //a、为市的值封装成文本节点
                //b、创建option标签对象
                // c、将文本节点追加到option中
                var option = $("<option></option>");
                option.append(citys[index]);
                //  d、将option封装到select
                $(citySelect).append(option);
            }
        }
        //3.初始化方法,刷新页面时,自动选择第一个市信息
        function init() {
            //初始化方法,刷新页面时,自动选择第一个市信息
            test3();
        }


(3)实现自动添加数据,自动删除数据,动态表单

 //3.实现自动添加数据,自动删除数据,动态表单
        function input() {
            //a.获取值
            var name = $("#name").val();
            var age = $("#age").val();
            var salary = $("#salary").val();
            var province = $("#province option:selected").text();
            var city = $("#city option:selected").text();
            //复选框
            var inputCheckbox = $("<input/>");
            //jquery中添加属性
            inputCheckbox.attr("type", "checkbox");
            //删除按钮
            var inputButton = $("<input/>");
            inputButton.attr("type", "button");
            inputButton.attr("value", "删除")
            inputButton.attr("onclick", "remove(this)")
            //b.创建td标签,将值放入td中
            var td0 = $("<td></td>");
            var td1 = $("<td></td>");
            var td2 = $("<td></td>");
            var td3 = $("<td></td>");
            var td4 = $("<td></td>");
            var td5 = $("<td></td>");
            td0.append(inputCheckbox)
            td1.append(name);
            td2.append(age);
            td3.append(salary);
            td4.append(province + city);
            td5.append(inputButton)
            //c.创建tr,将td放入tr
            var tr = $("<tr></tr>");
            tr.append(td0)
            tr.append(td1);
            tr.append(td2);
            tr.append(td3);
            tr.append(td4);
            tr.append(td5);
            tr.attr("onmouseover", "test1(this)")
            tr.attr("onmouseout", "test2(this)")
            //d.将tr放到tbody
            $("#tbody").append(tr);
        }
        function remove(remove) {
            //删除语法  父节点.removeChild(子节点)
            //通过事件对象获取事件发生的源头
            var tr = remove.parentNode.parentNode;
            var parentNode = tr.parentNode;
            parentNode.removeChild(tr);
        }


(4)全选实现

   $(function () {
            //全选实现
            $("#selectAll").click(function () {
                //:checked  获取当前选中的单选按钮或者复选框
                $(":checkbox:gt(0)").prop("checked", $("#selectAll").prop("checked"));
            })
        })


效果实现:

9.png


源代码在githee仓库:

程序员小王Gitee: https://gitee.com/wanghengjie563135/jquery.git


📌 作者:王恒杰

❌ 勘误: 无

📜 声明: 由于作者水平有限,本文有错误和不准确之处在所难免,本人也很想知道这些错误,恳望读者批评指正!

🍅 欢迎点赞 👍 收藏 ⭐留言 📝



相关文章
|
6月前
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
|
6月前
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
58 0
|
3月前
|
JavaScript 前端开发
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
如何在Vue 2或Vue 3项目中引入jQuery及其动画扩展库jQuery.easing,以实现更丰富的动画效果。
171 0
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
|
5月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
41 0
|
5月前
|
JavaScript 前端开发 索引
jQuery如何实现一个轮播图左右翻页的功能
jQuery如何实现一个轮播图左右翻页的功能
42 0
|
6月前
|
JavaScript
jQuery最简单的留言功能^-^
jQuery最简单的留言功能^-^
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
58 2
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
60 1
|
1月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
40 4
jQuery Growl 插件(消息提醒)