Jquery05-练习-DOM的增删该----从左到右,从右到左练习---动态添加、删除表格记录

最新推荐文章于 2021-10-23 22:30:12 发布
最新推荐文章于 2021-10-23 22:30:12 发布
阅读量225 收藏
点赞数
分类专栏： JQuery 文章标签： js javascript jquery html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44236958/article/details/112759357
版权

DOM的增删该

内部插入:

  • appendTo() a. appendTo(b) 把a插入到b子元素末尾,成成为最后一给元素
  • prependTo() a,prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素

外部插入:

  • insertAfter() a.insertAfter(b) 得到ba
  • insertBefore() a.insertBefore(b) 得到 ab

替换:

  • replaceWith() a.replaceWith(b) 用 b 替换掉 a
  • replaceAll() a.replaceAll(b) 用 a 替换掉所有 b

删除:

  • remove() a.remove() 删除a标签
  • empty() a.emoty() 清空a标签里的内容
$("<h1>标题</h1>").prependTo($("div")
$("<h1>标题</h1>").insertAfter($("div")
$("<h1>标题</h1>").insertBefore($("div"));
$("div").replaceWith( $("<h1>标题</h1>") );
$("<h1>标题</h1>").replaceAll( "div" );
$("div").empty();

练习二,从左到右，从右到左练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        select {
            width: 100px;
            height: 140px;
        }

        div {
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        //页面加载完成
        $(function () {
            //第一个按钮(选择添加右边)
            $("button:eq(0)").click(function () {
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"))
            })
            //第二个按钮(全部添加右边)
            $("button:eq(1)").click(function () {
                $("select:eq(0) option").appendTo($("select:eq(1)"))
            })
            //第三个按钮(选中添加左边边)
            $("button:eq(2)").click(function () {
                $("select:eq(1) option:selected").appendTo($("select:eq(0)"))
            })
            // 第四个按钮(全部添加左边)
            $("button:eq(3)").click(function () {
                $("select:eq(1) option").appendTo($("select:eq(0)"))
            })
        })
    </script>
</head>
<body>
<div id="left">
    <select multiple="multiple" name="sel01">
        <option value="opt01">选项1</option>
        <option value="opt02">选项2</option>
        <option value="opt03">选项3</option>
        <option value="opt04">选项4</option>
        <option value="opt05">选项5</option>
        <option value="opt06">选项6</option>
        <option value="opt07">选项7</option>
        <option value="opt08">选项8</option>
    </select>

    <button>选中添加到右边</button>
    <button>全部添加到右边</button>
</div>
<div id="rigth">
    <select multiple="multiple" name="sel02">
    </select>
    <button>选中删除到左边</button>
    <button>全部删除到左边</button>
</div>

</body>
</html>

练习三动态添加、删除表格记录

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="styleB/css.css"/>
    <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {

            //创建一个用于复用删除的function函数
            var deleteFun = function () {
                //alert("删除 操作 的function : " + this)
                //事件相应的function函数中  有一个this对象  这个对象时当前正在相应事件的dom对象
                var $trOBj = $(this).parent().parent();
                var name = $trOBj.find("td.first").text();

                /*
                confirm 是javaScript语言提供的一个确认的框 函数  你给他你给它传什么，它就提示什么
                当用户点击确定 就返回true  当店家取消就 妇女会flase;
                 */
                if (confirm("你确定要删除[" + name + "]")) {
                    $trOBj.remove();
                }
                // return false; 可以阻止 元素的默认行为。
                return false;
            }


            //给{submit} 按钮帮电工单击事件
            $("#addEmpButton").click(function () {
                //获取输入框 姓名，邮箱，工资的内容
                var name = $("#empName").val();
                var email = $("#email").val();
                var salary = $("#salary").val();

                //创建一个行标签,添加到显示数据的表格中
                var $trObj = $("   <tr>" +
                    "        <td>" + name + "</td>" +
                    "        <td>" + email + "</td>" +
                    "        <td>" + salary + "</td>" +
                    "        <td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
                    "    </tr>")

                //将数据添加到表格中
                $trObj.appendTo($("#employeeTable"));

                //给添加的行a标签绑定上事件
                $trObj.find("a").click(deleteFun);

            })

            //给删除的a标签绑定单击事件
            $("a").click(deleteFun)

        })


    </script>
</head>
<body>

<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>
</table>

<div id="formDiv">

    <h4>添加新员工</h4>

    <table>
        <tr>
            <td class="word">name:</td>
            <td class="inp">
                <input type="text" name="empName" id="empName"/>
            </td>
        </tr>
        <tr>
            <td class="word">email:</td>
            <td class="inp">
                <input type="text" name="email" id="email"/>
            </td>
        </tr>
        <tr>
            <td class="word">salary:</td>
            <td class="inp">
                <input type="text" name="salary" id="salary"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>

</div>

</body>
</html>
靠谱的大钊
关注
专栏目录
JavaWeb开发-jQuery技术
刘树之的博客
08-16 545
1.开始jQuery的学习之旅 1.1.jQuery简介 JQuery是继Prototype之后又一款非常优秀的JavaScript框架，由John Resig创建于2006年1月。jQuery体积小，运行速度快，它独有的极为强大的选择器，使得页面元素的查找变得非常简单，其出色的DOM操作、可靠的事件处理、完善的浏览器兼容性和链式操作等优点。 Jquery本身也是JS，只不过是对原生的JS进行封装，形成了一个JS的开发库! JQuery官方介绍： 1.2.jQuery简介 JQuery的核心理念是：“
el-table 树形表格 自定义展开图标_实践一个树形组件
weixin_39916355的博客
10-22 2215
想实践一个树形组件的起因是发现目前主流UI库在树形组件上都没有提供连接线(ant design有，但不知道为什么设计得发虚，就是各元素之间没有严格衔接上，见下图，而Vue生态圈中的Element UI和iView压根都不支持)。对我这种没有钛合金狗眼的人来说常常会看歪了。所以自己想禽兽，啊不，亲手尝试一个。仅仅实践最最基本的树形结构的展现、展开、折叠，不包含高级的多选、拖动、自定义渲染等功能。弄完...
jQuery练习 动态添加、删除
qq_44961203的博客
01-01 485
学习使用jQuery每日练习 实现动态添加和删除功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <link rel="stylesheet" type="text/css" href=""> <script type="text/javascript
jQuery 练习
qq_44788518的博客
09-15 159
dom增删改 从左到右，从右到左 <!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>
jQuery-html()、text()、val()方法，jQuery-attr()、prop()方法，JQuery-练习：从左到右、从右到左，JQuery-练习：动态添加和删除记录
qq_46034034的博客
10-23 94
关于DOM操作-增删改查的练习
weixiwo的博客
05-09 733
时隔两个多月，终于学到了DOM操作，下面是个人做的一个练习，适合新手小白 在网页中，html标签，属性，文本，注释，整个文档都是节点 而document文档节点，代表整个网页document,可以获取任意对象 首先我们要了解dom，是如何获取元素节点的 1.getElementById()通过id获取节点 html代码 <button type="button" id="btn">我是一个按钮</button> js代码 var btn=document.getElementByI
第一章-JQUERY-基础
03-19
jQuery提供了方便的DOM操作方法，如`$(selector).append()`用于在元素末尾添加内容，`$(selector).prepend()`用于在元素开头添加内容，`$(selector).html()`和`$(selector).text()`用于设置或获取元素的HTML内容和...
47-jQuery操作BOM和DOM对象
weixin_44614066的博客
04-18 711
一、今天用jQuery来操作DOM和jQ的事件 代码中的js和jQuery文件自己去网上查找 1.鼠标事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ...
JavaWeb - jQuery
sunqianLOL的博客
09-22 409
jQuery <!-- jQuery 介绍 什么是 jQuery？ 顾名思义，也就是 JavaScript 和查询(Query)，它就是辅助 JavaScript 开发的 js 类库。 jQuery 核心思想!!! 它的核心思想是 write less,do more(写的更少，做得更多)，所以它实现了很多浏览器的兼容问题。 jQuery 流行程度 jQuery 现在已经成为
DOM操作下拉选项框左右移动
weixin_40442639的博客
03-17 702
页面： HTML部分 ： <style> #sel{ width: 100px; } #unsel{ width: 100px; } </style> </head> <body> <div> ...
DOM操作（二）对元素的操作（创建，追加，删除）
weixin_34221112的博客
09-25 200
1 创建新的 HTML 元素 (节点) 　　var divDom=document.createElement('div'); 2 添加新元素到尾部 　　element.appendChild(para); 将新元素添加到开始位置 　　para.insertBefore(element,element); 3 移除已存在的元素 　　要移除一个元素，你需要知道该元素的父元素 ...
DOM的操作（增删改查）
weixin_30359021的博客
08-12 383
操作DOM的核心就是增删改查 目录 一、节点创建型API 1.1 createElement 1.2 createTextNode 1.3 cloneNode 1.4 createDocumentFragment 二、页面修改形API（包括删除和添加）（删）（改） 2.1 appendChild(追加为子元素) 2.2 insertBefore(插入...
DOM树操作之节点
alenzzzhang
03-23 312
1，节点的添加 方法：两个例子的代码利用两种方式呈现 （1）appendChild（）： 追加节点为层的最后一个元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加网页元素</title> <scr...
JavaScript中删除元素练习
plannothing的博客
08-10 416
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加删除记录练习</title> <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /> <script type="text/javascript"> /* * 点
jQuery的动态删除和添加
u013313232的博客
11-07 934
jQuery的动态删除和添加 <script type="text/javascript"> //在页面加载完成之后就执行 $(function () { //公用删除 var deleteFun =function () { var $delete = $(this).parent().parent(); var name = $delete.find("td:first").text(); /* * confirm确定弹窗，点击确.
（注释超级详细）jQuery中实现从左到右，从右到左的关键代码理解
CodingLJ
11-14 739
关键代码： <script type="text/javascript"> $(function () { //选中下拉框内容添加到右边,按钮的个数有4个，下标分别为0,1,2,3 $("button:eq(0)").click(function () { // 下拉框的 第一个下拉框，option的选择被选中,下拉框标签由 0 ---> 1 $("select:eq(0) option:selected").appendTo($("select:eq(
移除DOM元素
每天多懂一点点
02-09 1978
在IE中移除容器内的节点，会引起内存泄露，最好是创建一个新的节点，比如div，然后将要删除的节点放入这个div中，再将div的innerHTML清空。其它的浏览器直接removeChild就可以了。 js代码如下： var removeNode = !+"\v1" ? function(){ var d; return function(node){ if(no
第3章 javaScript操作 Dom对象 课后作业：
gz98411的博客
07-17 4775
1，图片轮播 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片轮播&lt;/title&gt; &lt;style&gt; .scroll{width: 360
15天掌握jQuery：从入门到精通(0-5)
作者John Resig创建了jQuery，它是一个功能强大的JavaScript库，简化了网页动态效果的实现和DOM操作。" jQuery是一个广受欢迎的JavaScript库，它的出现极大地简化了前端开发者处理网页交互的方式。"What"部分解释了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值