jQuery实现表格元素动态创建功能


Posted in Javascript onJanuary 09, 2017

Jquery实现表格元素的动态创建,本质是通过构造一个Dom Node节点,并且拼接到表格的Dom树上的子叶位置。

HTML正文:

用户:<input type="text" id="user"/>
邮箱:<input type="text" id="mail"/>
手机:<input type="text" id="phone"/>
<br>
<button id="b1">添加</button><br>
<table border=1 id="table">
<tr><td>user</td><td>mail</td><td>phone</td><td>operation</td></tr>
<tr><td>zhangsan</td><td>aaa@qq.com</td><td>25652463</td><td><a href="##">delete</a></td></tr>
</table>

Javascript处理代码:

$("#b1").click(function(){
var $user=$("#user");
var $mail=$("#mail");
var $phone=$("#phone");

//组装对象
$tr=$("<tr></tr>");
$td1=$("<td></td>");
$td1.text($user.val());

$td2=$("<td></td>");
$td2.text($mail.val());

$td3=$("<td></td>");
$td3.text($phone.val());

$td4=$("<td></td>");

$href=$("<a></a>");
$href.attr("href","##");
$href.text("delete");
$td4.append($href);

$href.click(function(){
if(window.confirm("确定删除?")){
 //这里使用this表示当前事件绑定对象---? $(this)不能用$(href)代替,否则会认为每次都是最新对象,原有对象的行为不能保存
 $(this).parent().parent().remove(); 
}else{
 return;
}
});

$("#table").append($tr);
 $tr.append($td1);
 $tr.append($td2);
 $tr.append($td3);
 $tr.append($td4);
});

效果图:

jQuery实现表格元素动态创建功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
input输入密码变黑点密文的实现方法
Jan 09 #Javascript
微信小程序 css使用技巧总结
Jan 09 #Javascript
详解Jquery Easyui的验证扩展
Jan 09 #Javascript
Javascript blur与click冲突解决办法
Jan 09 #Javascript
简单实现jQuery级联菜单
Jan 09 #Javascript
prototype与__proto__区别详细介绍
Jan 09 #Javascript
jQuery实现二维码扫描功能
Jan 09 #Javascript
You might like
浅谈电磁辐射对健康的影响
2021/03/01 无线电
php入门小知识
2008/03/24 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
PHP数组函数知识汇总
2016/05/12 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
keras实现多种分类网络的方式
2020/06/11 Python
python从PDF中提取数据的示例
2020/10/30 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
初中生学习的自我评价
2013/11/14 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
网络技术专业求职信
2014/02/18 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书