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 相关文章推荐
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
vue 项目中使用Loading组件的示例代码
Aug 31 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 set_error_handler()函数使用详解(示例)
2013/11/12 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
Javascript引用指针使用介绍
2012/11/07 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
Python算法应用实战之栈详解
2017/02/04 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
Python实现的计数排序算法示例
2017/11/29 Python
python 读取文件并替换字段的实例
2018/07/12 Python
python判断数字是否是超级素数幂
2018/09/27 Python
Python判断telnet通不通的实例
2019/01/26 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
机电专业个人求职信范文
2013/12/30 职场文书
住宅质量保证书
2014/04/29 职场文书
数控机床专业自荐信
2014/05/19 职场文书
开工仪式策划方案
2014/05/23 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
读书笔记格式
2015/07/02 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js