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 相关文章推荐
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
微信小程序实现拼图小游戏
Oct 22 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的一个基础知识 表单提交
2011/07/04 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
js字符编码函数区别分析
2008/06/05 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
python绘制直线的方法
2018/06/30 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
中专自荐信
2013/10/13 职场文书
文明礼仪标语
2014/06/13 职场文书
学生吸烟检讨书
2014/09/14 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书