jQuery Dom 表格增删

最新推荐文章于 2024-07-05 14:21:58 发布
最新推荐文章于 2024-07-05 14:21:58 发布
阅读量432 收藏 2
点赞数 4
分类专栏： jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qi_JC/article/details/111460727
版权

给大家配了详细的解释

改 的话后天该大家发出来

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.5.1.js"></script>
</head>
<body>
    <form id="form">
        <input type="text" placeholder="请输入姓名" id="user"><br/>
        <div>
            <label for="boy">男</label>
            <input type="radio" name="sex" id="boy" value="男" checked>
            <label for="girl">女</label>
            <input type="radio" name="sex" id="girl" value="女">
        </div>
        <div>
            <label for="study">学习</label>
            <input type="checkbox" name="" id="study" value="学习">
            <label for="music">听音乐</label>
            <input type="checkbox" name="" id="music" value="听音乐">
            <label for="lol">打游戏</label>
            <input type="checkbox" name="" id="lol" value="打游戏">
        </div>

        <div>
            <select name="" id="sel">
                <option value="山西">山西</option>
                <option value="天津">天津</option>
                <option value="上海">上海</option>
                <option value="北京">北京</option>
            </select>
        </div>

        <textarea name="" id="txt" cols="30" rows="10"></textarea>
        <div>
            <input type="button" value="提交" id="btn">
        </div>
    </form>


    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>爱好</th>
                <th>住址</th>
                <th>介绍</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody">
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <button>删除</button>
                    <button>修改</button>
                </td>
            </tr> -->
        </tbody>
    </table>


    <script src="./work_09_js.js"></script>
</body>
</html>

js代码

//====点击提交时，获取所有值，并显示表格中
{
    var n=0
    $( "#btn" ).on( "click",function(){

        n++

        //姓名--文本框
        var user=$( "#user" ).val();
        // console.log( user );

        //性别--单选框
        var sex=$( "#form :radio:checked").val()
        // console.log( sex )
        
        //爱好--多选框
        var fuXuan=$( "#form :checkbox:checked" )
        var hobby=[];
        fuXuan.each( function( i,v ){
            hobby.push( $( v ).val() )
            // console.log( v )
            
        } )
        // console.log( hobby )

        //地区--下拉框
        var address=$( "#sel :selected" ).val();
        // console.log( address );

        //介绍--文本域
        var txt=$( "#txt" ).val()
        // console.log( txt )


        //创建表格
        var trDom=$( `
                <tr>
                    <td>${ n }</td>
                    <td>${ user }</td>
                    <td>${ sex }</td>
                    <td>${ hobby }</td>
                    <td>${ address }</td>
                    <td>${ txt }</td>
                    <td>
                        <button id="del">删除</button>
                        <button id="change">修改</button>
                    </td>
                </tr>
        ` )

        //添加
        $( "#tbody" ).append( trDom );

    } )
}


//====删除
{
    //需要用到事件委派,这就是未来事件
    $( "#tbody" ).on( "click","#del",function(){
        //父级的父级
        $( this ).parent().parent().remove()
    } )
}
雲上琅琅
关注
专栏目录
JQuery操作实现增删改查的详细介绍
zsl_955200的博客
12-16 1万+
JQuery操作实现增删改查的详细介绍 最近在写一个项目，让实现表格的增删改查功能，其实网上模块也很多，拿来用就可以了，我以前就是这样，想实现一个功能就去找度娘，然后拿来稍加修改就用了，但是这样的久了，技术都忘了，都不会自己写了，这次我就用纯鸡块实现了这样的一个功能，注释加的特别详细，以便以后回来看。
使用jQuery完成表格的增删改查4个功能
qq_180494790的博客
10-27 1454
最终可以实现4个功能。
jquery dom操作表格
tongyong128的专栏
08-24 607
表格编辑列中有控件，控件点击事件时绑定此方法           function worktypeChange(selectobj){        var tr= $(selectobj).parent().parent();//获取点击的行         var slct=tr.children().eq(1).children();
Jquery实现增删改查
m0_64288219的博客
11-04 875
使用的技术 jquery bootstrap 实现功能：实现对数据的添加，删除，修改，查找 原理：利用jquery对dom操作
使用jQuery实现增删改查
热门推荐
Uncle_sixsix的博客
09-07 1万+
jquery用的是1.11版本 css就用bootstrap吧 因为增和改用了模态框修改，所以还用了bootstrap.js实现模态框的弹出和关闭 做了个简单的表格来实现功能 HTML代码段 //表格 &lt;div class="container" style="padding-top: 40px;"&gt; &lt;div class="form-group"&gt;...
基于jQuery Datatables的前端表格增删改查实现
csdn_xiaoliyu的博客
03-30 1586
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 有着怎样的优势 分页，即时搜索和排序 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, F...
jquery--DOM操作
最新发布
m0_74194490的博客
07-05 1113
在javaScript的基础上创建的属于js的框架，是继Prototype之后又一个优秀的javaScript代码库（javaScript框架）有一些人嫌弃js用着不好，把 很多具有特殊功能的代码的集合，写在一个js文件中，名为jquery.js。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery实现表格栏内的增删改操作
weixin_72426331的博客
11-05 90
提交姓名
jQuery DOM操作实验
qq_58460470的博客
12-11 399
jQuery DOM操作实验，实现内容随着按键的方向移动
jQuery对table表格进行增删改查
10-20
以下是对jQuery实现表格增删改查功能的详细说明。 ### 增加记录 增加记录通常涉及在表格的tbody元素中插入新的行（tr）和单元格（td）。首先，我们需要创建一个表单让用户输入新数据，然后通过点击“新增”按钮...
jquery表格增删改查.rar
05-05
《jQuery表格增删改查详解——基于Bootstrap框架》 在Web开发中，表格的数据操作是常见且重要的功能，包括添加、删除、修改和查询。本教程将深入探讨如何利用jQuery和Bootstrap框架实现这一功能，特别适合初学者...
jQuery实现表格的增、删、改操作示例
12-09
本文实例讲述了jQuery实现表格的增、删、改操作。分享给大家供大家参考，具体如下： 这里实现的是在jQuery中通过按钮的形式，对表格进行的一些基本操作，可以实现表格的增删改操作，并实现对鼠标事件监听，实现表格...
JQuery实现表格增删
08-02
本主题将深入探讨如何利用jQuery实现表格的增删功能，并结合Bootstrap框架创建美观的用户界面。 首先，jQuery提供了方便的DOM操作API，使得我们可以轻松地选择、添加或删除HTML元素。在表格操作中，我们通常会用到`...
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
03-01
这个项目结合了jQuery和Bootstrap，旨在为开发者提供一个完整的Web应用解决方案，实现表格数据的增删改查功能。下面将详细阐述这些技术在实际应用中的作用和整合方式。 1. **Spring框架**：Spring是Java企业级应用...
jQuery 如何实现轮播图
Qi_JC的博客
12-21 4199
如何用 jQuery 实现轮播图 直接点击 对应的链接看对应具体代码 注释很详细了，就不做赘述了 一定一定不要忘记加入 jQuery html代码 css代码 js代码 方便你们复制，直接来一个全部的 全部在一起的代码 html代码 <div class="div"> <ul class="ul"> <li><a href=""><img src="./jQuery_轮播/img/01.jpg" alt=""&gt
jQuery 如何实现放大器效果
Qi_JC的博客
12-23 2554
我又来了 今天的内容时如何实现放大器效果 我们在看网购的时候，每个商品都有详细的介绍图片 当我们把鼠标放上去的时候，会出现两个区域 一个区域是选中图片的具体位置 另一个区域是高清大图 需要注意的是，图片尽量为正方形 例 ==原理==其实很简单：原图上的遮罩层默认隐藏，将原图放大，并默认隐藏，原图默认显示，当鼠标进入原图时，将大图显示在一个区域内，并显示遮罩层。 查看html代码 查看CSS代码 查看JavaSript代码 首先，写入html代码 <div class="box1">
jQuery 实现表格增删改
Qi_JC的博客
12-22 1110
今天来吧前天的坑补一下 利用 jQuer Dom操作实现表格增删改 增删写在了前天，可以点击这个链接去查看 jQuery Dom增删 不想点击链接的话我把全部内容放到最后 做了一点点小修改，大家可以直接看最后的完整代码 查看完整代码 ##话不多说，放后续代码 //====修改--点击修改时--将所有值返回到表单中 { //需要用到事件委派,这就是未来事件 $( "#tbody" ).on( "click","#change",function(){ //获取触发事件按钮的父
jQuery 实现购物车全选框问题
Qi_JC的博客
12-25 794
没错，我又来了 相信大家在做购物车或者其他项目时，会遇到选框样式 1、选中全选时，全部选中，取消全选，所有都不选中 2、所有的选框选中时，全选按钮也选中，只要有一个选框没选中，全选框就取消选中 这就是选框问题的两个条件 废话不多说，直接上代码 html代码 JavaScript代码 还是要提醒一句，不要忘记引入jQuery 依然有很详细的注释 css样式，大家自行设置，我这里就没有设置，绝对不是因为懒~ html 代码 <!-- 设置全选框 --> <h1>
jQuery如何实现事件委派 以及 未来事件
Qi_JC的博客
12-18 683
jQuery 实现事件委派 所谓事件委派，就是给父级添加事件，从而使子级也有了事件 接下来我们就来看一下怎么用 jQuery 事件委派 我尽量写的详细一些 1、首先确定一下标签，此处就用 无序列表， 顺带引入一下 jQuery,head 或body里都可以 <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> <li&
使用JQuery实现表格数据增删与分页教程
"通过JQuery实现在网页中对表格数据的增删及分页功能的示例教程" 在网页开发中，动态地展示和管理数据是常见的需求，特别是当数据量较大时，分页显示尤为重要。本教程将介绍如何使用JQuery来实现这一目标。JQuery是...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值