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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
js实现随机点名小功能
Aug 17 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
React diff算法的实现示例
Apr 20 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
php中namespace及use用法分析
2016/12/06 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
如何使用angularJs
2017/05/08 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
Python网络编程 Python套接字编程
2017/09/13 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
python循环输出三角形图案的例子
2019/11/22 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
理工科学生的自我评价
2013/12/15 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
医学专业大学生求职信
2014/07/12 职场文书
政协调研汇报材料
2014/08/15 职场文书
报到证办理个人委托书
2014/10/06 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
MySQL创建定时任务
2022/01/22 MySQL