jq中创建表格及删除事件

最新推荐文章于 2021-12-28 19:46:56 发布
最新推荐文章于 2021-12-28 19:46:56 发布
阅读量483 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mrzhaoplus/article/details/78511834
版权
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>创建表及删除</title>
  <style type="text/css">
     table{
      width: 400px;
        text-align: center;
     
     }
  </style>
  <script src="js/jquery-1.11.1.min.js"></script>
  <script>
   $(function(){
    //点击事件后
    $("#tj").click(function(){
     //获取输入框
     var name=$("#name").val();
     var age=$("#age").val();
     var bir=$("#bir").val();
     //在创建新的一行
     var mtr=$("<tr></tr>");
     var mtd1=$("<td></td>").html(name);
     var mtd2=$("<td></td>").html(age);
     var mtd3=$("<td></td>").html(bir);
     var mtd4=$("<td><button>删除</button></td>");
     //将每一列添加到这一行
     mtr.append(mtd1);
     mtr.append(mtd2);
     mtr.append(mtd3);
     mtr.append(mtd4);
     //将这一行添加到表中
     $("table").append(mtr);
     //点击删除按钮时，找到tr删除
     $("td button").click(function(){
      $(this).parent().parent().remove();
     })
     
     
    });
    
    
    
    
    
   })
  </script>
  
  
 </head>
 <body>
     姓名:<input type="text" id="name" />
     年龄:<input type="text" id="age" />
     生日:<input type="text" id="bir" />
     <button id="tj">添加</button>
  <table border="1px">
     <tr>
      <td>姓名</td>
      <td>年龄</td>
      <td>生日</td>
      <td>操作</td>
     </tr>
  </table>
  
  
  
  
 </body>
</html>
黑暗中的鬼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中点击按钮创建表格
ln201009的博客
05-16 1840
1、我们先说单个元素的创建，在一个div盒子里创建一个a标签，我们就需要先写入一个按钮和一个div盒子。如下图所示，要实现的功能就是点击按钮在盒子内创建一个表格。 2、我们想要的功能需要通过jQuery来实现，所以先引入一个jQuery的插件，然后写一个script标签来写jQuery代码块。 3、首先我们先写一个页面加载事件，在jQuery中的页面加载事件是一个$符号然后一个小括号，小括号里面写function。 4、我们创建表格首先就需要先创建一个存储表格数据的数.
jQuery创建表格
gulanga5的博客
07-08 1684
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>创建表格练习</title> <style type="text/css"> body{padding-left:15px;font-size:20px;} table{ border:1px solid #0099FF; width:70%; border-collapse:collapse
jq之事件绑定和事件删除
weixin_44474200的博客
03-23 346
事件绑定通过bind来实现，如给p标签追加一个click事件，写法如下： $("p").bind("click",function(){ }) 他还有一种简写，就是 $("p").click(function(){ }) 事件删除就是unbind： $("p").click(function(){ $("p").unbind("click") }) 触发一次以后移除了事件，后面就不好用了 ...
jquery的表单事件
xuexizhe88的博客
08-22 1222
表单事件是web开发中常用的事件，以jquery为例，梳理一下jquery的表单事件。 1、blur事件 为元素，失去焦点的时候触发的。 2、focus事件 为元素，获取焦点的时候触发的。 3、change事件 ，和的值都是可以发生改变的，可以通过change事件监听元素改变的动作， input元素：监听input中value值的变化，当value改变时，失去焦点后触发c
表格事件，表格删除行
weixin_34357267的博客
03-08 95
$th = $("<th>增加的列头</th>"); $col = $("<td>增加的列</td>"); $("#tab1>thead>tr").append($th); $("#tab1>tbody>tr").append($col); $("#tab1 tr :last-child").remove(); ...
jQuery实现用户信息表格的添加和删除功能
10-19
当用户点击“添加”按钮时，我们获取表单中的输入值，然后创建一个新的表格行，并将其插入到`<tbody>`元素中。 ```javascript $(function () { $("#btn_submit").click(function () { var usernameVal = $("#...
基于jquery的动态创建表格的插件
12-13
废话少说直接进入主题， 表格功能: 1、添加 2、删除 3、获取值 4、动态填充数据 5、动态设置焦点 6、键盘左右上下键控制单元格焦点 7、单元格添加正则验证功能 WebForm4.aspx 代码如下: <%@ Page Language=”...
jQuery动态生成表格及右键菜单功能示例
10-20
1. **DOM操作**：通过`insertRow`和`insertCell`方法动态创建表格元素。 2. **事件处理**：使用`.live`（在较新版本的jQuery中，通常推荐使用`.on`）绑定鼠标事件，如`mouseover`、`mouseleave`和`mousedown`。 3. *...
jQuery实现列表的增加和删除功能
10-18
7. **动态DOM操作**：在添加新行时，我们创建了一个新的`<tr>`元素，并立即为其添加了删除事件监听器。这意味着即使在页面加载后添加的元素，也可以响应删除操作。 通过这些jQuery技术，我们可以轻松地实现在网页上...
jquery 追加tr和删除tr示例代码
10-26
当用户点击这个元素（在本例中是一个链接）时，将触发一个函数，该函数负责创建新的表格行并将其追加到表格中。首先，我们创建一个空字符串 `$str` 用于构建新行的 HTML 代码： ```javascript $str=''; $str+=...
Jquery 事件绑定 | 移除事件
ruilin521314
06-11 447
移除事件 unbind(type [,data]) //data是要移除的函数 $('#btn').unbind("click"); //移除click $('#btn').unbind(); //移除所有 对于只需要触发一次的，随后就要立即解除绑定的情况，用one() $('#btn').one("click",function(){.......}); 模拟操作 可以...
jQuery实现添加删除记录
yuanmomoya的博客
08-29 1556
实现删除（询问是否删除），和添加 其中最重要的是//动态给a标签委派事件 没有学动态前，我们添加完员工后再去删除，这时在添加完员工后又添加了删除事件，但是也带来的多次绑定删除事件。实例中的注释的代码可以看出，也可亲自试一下 还有就是事件绑定的迭代 用到的CSS @CHARSET "UTF-8"; #total { width: 450px; margin-left: a...
jQuery_json创建表格
大脸猫~
06-26 688
解析json动态生成表格 HTML结构： &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;td&gt;学生&lt;/td&gt; &lt;td&gt;学号&lt;/td&gt; &lt;td&gt;成绩&lt;/td&gt;
jQuery动态创建表格
Anthony_1223的博客
10-22 2518
&lt;table&gt;     &lt;thead&gt;         &lt;th&gt;序号&lt;/th&gt;         &lt;th&gt;姓名&lt;/th&gt;         &lt;th&gt;性别&lt;/th&gt;         &lt;th&gt;地址&lt;/th&gt;     &
JQuery动态创建表格
xcx010321的博客
12-28 1695
<style> table {border: 1px solid #ccc; border-collapse: collapse; } th,td { border: 1px solid #ccc; color: #000; padding: 10px } th { background-color: ...
JQuery动态添加表格tr td
jqdfTiTan的博客
09-27 1万+
功能：ajax获取后台返回数据给table动态添加tr/td html： ajax：var year = $('#year').val();//下拉框数据 var province= $('#province').val();//下拉框数据 $('table tbody').html(''); $.ajax({ url:"/Plan/sendJson.html",
jquery移除click事件
热门推荐
weixin_41228949的博客
10-18 3万+
首先，在html重定义click事件有两种方式，针对这两种方式有两种移除click事件的方法 1、第一种定义click时间的方法是在标签内部加上onclick的属性如下 &lt;input id = "demoId" type="button" onclick="demoFunction();" value="单击事件"/&gt; 针对这种定义方式，onclick是input标签的一个属性，...
jq 点击事件增加表格
最新发布
05-11
您可以使用 jQuery 的 click() 方法来添加点击事件，并使用 append() 方法将表格添加到页面上。以下是一个示例： ... ...添加行 ... // 添加点击事件 ...新行将被添加到表格的 tbody 中，而不是表头 thead 中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值