纯js的增删改

最新推荐文章于 2019-09-25 09:39:14 发布
最新推荐文章于 2019-09-25 09:39:14 发布
阅读量273 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1135715380/article/details/53336330
版权
<html>
  <head>
    <title>a.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->//引入js

  <script type="text/javascript" src="Jquery/jquery-1.8.2.min.js"></script></head>
  <script type="text/javascript">
     $(function(){
         $("button :eq(0)").click(function(){
             $("#div").show();
         });
         $("button :eq(1)").click(function(){
             $("#div2").show();
             var id=$(":checkbox:checked").parent().parent().children().eq(1).text();
             var name=$(":checkbox:checked").parent().parent().children().eq(2).text();
             $("#gid").val(id);
              $("#gname").val(name);
             
         });
         $("button :eq(2)").click(function(){
             $(":checkbox:checked").parent().parent().remove();
         });
     })
  function add(){
      $("#div").hide();
      var id=$("#id").val();
      var name=$("#name").val();
      $("#table").append("<tr id='tr'><td><input type='checkbox'/></td><td>"+id+"</td><td>"+name+"</td></tr>");
  }
  function update(){
          $("#div2").hide();
          $(":checkbox:checked").parent().parent().children().eq(1).text($("#gid").val());
         $(":checkbox:checked").parent().parent().children().eq(2).text($("#gname").val());
  }
  </script>
  <body>
      <button>添加</button><button>修改</button><button>删除</button>
     <table id="table">
        <Tr>
            <td></td><td>编号</td><td>姓名</td>
        </Tr>
        <Tr>
            <td><input type="checkbox"/></td><td>1001</td><td>aaa</td>
        </Tr>
        <Tr>
            <td><input type="checkbox"/></td><td>1002</td><td>bbb</td>
        </Tr>
        <Tr>
            <td><input type="checkbox"/></td><td>1003</td><td>ccc</td>
        </Tr>
    </table>
    <div id="big">
    <div id="div"  style="display: none;">
        编号：<input type="text" name="id" id="id"/>姓名：<input type="text" name="name" id="name"/><input type="button" value="保存" οnclick="add()" />
    </div>
    <div id="div2"  style="display: none;">
        编号<input type="text" id="gid"/> 姓名：<input type="text" id="gname"/><input type="button" value="修改" οnclick="update()"/>
    </div>
    </div>
  </body>
</html>
qq1135715380
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
纯javascript实现增删改查
jiangyang112233的博客
07-21 1172
效果图： html： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>粤菜字典admin</title> </head> <script type="text/javascript" src="js/js.js" ></script> <body> <table border="1" cel
javascript中方便增删改cookie的一个类
10-27
把jquery.cookie.js改了一下，改成了纯javascript版本，以备我以后项目只需，增加了一个得到页面全部cookie键值的功能
js实现增删改查
12-18
利用原生js实现增删改查操作 附带多样效果，打包分享，仅供参考
js json 增删改查
xiaomin1991222的专栏
01-13 155
使用JS对Json数据的处理，项目遇到需要对Json数据进行相关操作，比如增删改操作，本以为会比较难，网上搜索下，发现还是比较简单的，贴一段代码： [javascript] view plaincopyprint? &lt;script type="text/javascript"&gt;           var json = {               "age":24,   ...
JS数组操作之增删改查
weixin_33720078的博客
08-20 272
JS提供了很多方便操作数组的方法，本文所要分享的就是如何快速对数组进行增、删、改、查。 一、增 1、push() 可接收任意数量的参数，把它们逐个添加至数组末尾，并返回修改后数组的长度。例如： var arr = []; var len = arr.push(1); console.log(arr); //...
JavaScript的增删改
zhang284021445的专栏
03-20 121
[align=center]JavaScript的增删改[/align] javascript的增删改，效果图如下： [img]http://dl.iteye.com/upload/attachment/441316/f88f4e18-3e88-387a-89aa-86adc4f56b77.jpg[/img] 代码如下： addUser.html ...
JS对HTML表格进行增删改操作
11-22
在本项目中，我们需要创建一个HTML页面，包含一个表格用于展示用户信息，并通过JavaScript实现对表格数据的增删改查功能。以下是对这个任务的详细解释： 首先，我们需要创建一个HTML表格来显示用户信息，包括用户名...
前端页面增删改实现
12-21
【前端页面增删改实现】是指在Web应用中，前端用户界面与后台数据库进行交互时，实现对数据的增加（Add）、删除（Delete）和修改（Modify）功能。这一过程通常涉及HTML表单、JavaScript验证、Ajax异步通信以及服务器...
DOM对标签的增删改
08-09
标题中的“DOM对标签的增删改”指的是在Web开发中使用Document Object Model（DOM）来操作HTML或XML文档中的元素。DOM是一种编程接口，它允许开发者通过JavaScript或其他支持的语言来动态更新、添加和删除页面内容。...
extJs 简单的增删改查
04-15
2. **创建存储（Store）**：存储数据，并与模型关联，处理数据的加载、增删改操作。 ```javascript var store = Ext.create('Ext.data.Store', { model: 'User', data: [{ id: 1, name: 'Alice', email: 'alice@...
dTree+JQuery右键菜单（增删改）
12-13
由于项目需要，需要对DTree通过右键菜单进行增删查改，我根据网上的资料和自己的需求进行修改的，希望对大家有所帮助。
dtree_JQuery　增加删除修改功能
11-03
dtree 增加删除修改功能 自测可用． dtree_JQuery实例.动态生成树
jquery dtree 实例 动态实现无限树形菜单(增删改查）
12-13
jquery dtree 实例 无限树形菜单 实现增删改查
我修改的dtree，可以动态增加，修改，删除
07-21
这段时间公司要做一个树，我在网上查了很多关于树的资料，最后选择了dtree，感觉他小巧，而且还挺耐看，但是不支持动态加载，添加，修改，删除，于是自己在网上查资料，也参考别人的，也自己写了一些，最终终于是的dtree可以动态加载，修改，删除了，因为是用在公司里的项目里，所以不能把整个项目传上去，值上传dtree，其实主要还是dtree.prototype.o()这个方法最关键。供大家参考。
dtree菜单终极版,支持无刷新增删改节点
08-23
dtree菜单终极版,支持无刷新增删改节点，非常好的东西。
JS的增删改查
weixin_30788239的博客
05-02 76
1.查 1 <script type="text/javascript"> 2 /** 3 * 查找 已经在html代码中存在的元素 4 */ 5 /** 6 * document.getElementById(elementId) 7 * 作用 查找元素节点 8 * 参数 标签上的id属性 ...
JS增删改查
qq_42265608的博客
09-25 485
插入页面 <form action="InsertRequire.jsp"> 书号：<input type="text" name="BookId"><br> 书名：<input type="text" name="BookName"><br> 售价： <input type="text" name="BookSa...
JS对象中属性的增删改查
dayun555的博客
12-03 2378
对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性 对象的分类：           1.内建对象                 -在ES标准中定义的对象，在任何的ES的实现中都可以使用                 -比如：Math String Number Boolean Function Object...             2.宿主对象           ...
js实现表格的增删改查
weixin_30267691的博客
09-08 646
说在前面的，写给小白白的，大神请绕道~ 今天用原生js写一下动态表格的增删改查，主要是熟悉一下js的DOM操作。 首先，做一个表格，用来显示提交的数据，如图下： 此处，我添加了编号、姓名、密码、生日、地址五个属性，另外加选中、操作两个操作，亲们可以自行添加，布局代码如下： <table class="table table-hover table-bordered"...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值