jQuery实现列表的增加和删除

最新推荐文章于 2021-07-18 14:32:33 发布
最新推荐文章于 2021-07-18 14:32:33 发布
阅读量218 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lihuijuan/p/9183511.html
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>

    </style>
</head>
<body>
    <div>
        <table style="margin: 10px auto;" id="tableList">
            <thead>
                <tr>
                    <th>name</th>
                    <th>price</th>
                    <th>delete</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>a</td>
                    <td>123</td>
                    <td><a href="#">delete</a></td>
                </tr>
                <tr>
                    <td>c</td>
                    <td>3453</td>
                    <td><a href="#">delete</a></td>
                </tr>
            </tbody>
        </table>
    </div>


   <form>
       <table style="margin:0 auto;">
           <tr>
               <td>name</td>
               <td><input type="text" name="name"></td>
           </tr>
           <tr>
               <td>price</td>
               <td><input type="text" name="price"></td>
           </tr>
           <tr>
               <td colspan="2">
                   <input type="submit" value="submit" id="add">
               </td>
           </tr>
       </table>
   </form>

<script src="../js/vendor/jquery-3.2.1.min.js"></script>
<script>
    var $tableList=$("#tableList");
    //tianjia
    $("#add").click(function(){
        var tdName= $("input[name=name]").val();
        var tdPrice = $("input[name=price]").val();
        $("<tr></tr>").append("<td>"+tdName+"</td>")
            .append("<td>"+tdPrice+"</td>")
            .append("<td><a href='#?'>delete</a></td>")
            .appendTo($("#tableList>tbody"))
            .find("a").click(function(){
             $(this).parent().parent().remove();
            });

            $("input[name=name]").val("");
            $("input[name=price]").val("");
        return false;

    })
    //delete
    $("#tableList>tbody a").click(function(){
        $(this).parent().parent().remove();
    })


</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/lihuijuan/p/9183511.html

weixin_30872671
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery列表动态增加和删除
weixin_47803030的博客
11-05 470
HTML代码 <input type="button" value="新增" class="insert"> <table cellspacing="0px" class="a"> <thead> <th><input type="checkbox"></th> <th>分类的ID</th> <th>分类的名称</th> <th>分类的描
Jquery中获取内容和属性、删除元素、添加元素、jQuery遍历----------(遍历、祖先、后代、同胞、过滤)、jQuery - AJAX 简介
qq_44791674的博客
10-05 498
Jquery中获取内容和属性 Jquery拥有可操作HTML元素和属性的强大方法。 常用的方法有： text()/设置或返沪所选元素的文本内容 html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记） val()/返回表单字段的值（理解为value的简写） attr()/设置或返回所选属性的值 text()/设置或返沪所选元素的文本内容&html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记） <!DOMTYPE> <ht
linux脚本jq添加列表,jQuery实现列表的增加和删除功能
weixin_42519826的博客
05-03 219
具体代码如下所示:jQuerynamepricedeletea123deletec3453deletenamepricevar $tableList=$("#tableList");//tianjia$("#add").click(function(){var tdName= $("input[name=name]").val();var tdPrice = $("input[name=price...
jQuery实现列表的动态增加、删除和全选操作
XingKongLiu6的博客
11-16 1671
目录隔行换色CSS代码jQuery代码全选/取消全选删除新增CSS代码HTML代码jQuery代码完整代码页面效果 隔行换色 CSS代码 .odd { background-color: rosybrown; } jQuery代码 //隔行换色 $("tr:odd").addClass("odd"); 全选/取消全选 //设置多选框全选和取消全选事件 $("tr th:first").append("<span id='showStr'></span&gt
jQuery实现表格行的动态增加与删除(改进版)
06-20
jQuery实现表格行的动态增加与删除(改进版)
jQuery动态添加删除移动列表插件
06-10
这是一款实用的jQuery动态添加移动列表插件，jQuery动态添加数据代码，jQuery动态数据代码。
jQuery实现列表的增加和删除功能
10-18
通过这些jQuery技术，我们可以轻松地实现在网页上动态地添加和删除列表项。这种功能对于构建交互式的用户界面非常有用，例如在线购物车、任务管理器或其他需要管理列表的应用程序。理解并掌握这些概念有助于提升网页...
jquery实现增加删除行的方法
10-24
在jQuery中实现增加和删除表格行的功能，是前端开发中常见的需求，特别是在处理动态数据或者交互性较强的应用中。以下是对这个主题的详细说明。 首先，我们来看一下基本的HTML结构，这里是一个包含5行的表格，每行...
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
10-15
在示例2中，同样使用`mouseover`和`mouseout`事件，但这次使用`toggleClass`，使得在鼠标悬停和离开时，`.a`类的状态在添加和删除之间切换，实现类似开关的效果。代码如下： ```javascript $("#d").mouseover...
jquery追加列表项
Ason_haiyu的博客
01-08 1044
$(document).ready(function() { $("#btn2").click(function() { $("ol").append("追加列表项"); }); }); //定义删除的方法 function del(a){ var $td= $(a).parent(); console.log($td); $t
jquery输入框增加列表代码.zip
07-04
jquery输入框增加列表代码是一款在输入框中输入文字，点击添加后，将输入框中的内容动态添加到顶部，效果很不错。
jQuery 列表的修改和添加
watermelon_xi的博客
12-13 2298
昨天分享了删除操作，今天来总结一下添加和删除，略丑勿嫌 由于我一开始就将修改和添加共用一个弹框，这造成了我后面很多错误的产生，导致我的函数结构混乱，无数的嵌套与循环让我改了好久。 先来看代码吧： （1）、添加 第一步：点击添加学员事件$('#addUserIn').on("click",function (){ popup(addUserIn); march();//匹配
jQuery遍历之add()方法
weixin_30815427的博客
08-10 65
jQuery遍历之add()方法 jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？jQuery为此提供add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中 .add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DO...
Jquery动态增加行和删除行并封装成list表单提交
lijian_89的博客
09-16 2628
动态增加表单jquery方法： var i=0; function addtr(){ $("#myTable").append(" "+ " "+ " '"); i=i+1; } 删除行的方法： function delTr(ckb){ //获取选中的复选框，然后循环遍历删除 var ckbs=$("input[name="+ckb+"]:checked"); i
jQuery实现表格的增加、修改、删除、保存。
铦鹞
12-11 5180
实现表格行数的增加以及修改表格内容，同时表格行数可自由拖动（引用了jquery-ui插件）。 1.文件列表 2.实现效果 3.css 实现一个标准的窗体划分，把整个界面分成上下中三部分，然后把中间再分为三块。 ​ .all/*全屏，高度不可为百分比，设置左浮动（全体），颜色区分不同块*/ { width:100%; height:700px; ...
jQuery新增列表
qq_33840688的博客
07-18 306
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script> $(function(){ var $btn = $('#btn') v.
jQuery 操作列表批量删除数据
rainbow_m的博客
02-03 8442
方式一： //判断全选复选框是否选中(全选和取消全选)       $( "#allcbx").bind("click" ,function(){              var ck=$("input[name=allcbx]" ).attr("checked");              if(ck == "checked" ){
JQuery实现网页表格动态增加与删除内容
最新发布
05-25
以下是一个简单的示例，演示如何使用JQuery实现网页表格动态增加和删除内容。 首先，我们需要在HTML文件中引入JQuery库： ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值