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

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);
});

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery LigerUI 使用教程表格篇(1)

    jQuery LigerUI 使用教程表格篇(1)

    第一个例子 简介 ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序.分页.多表头.固定列等等. 支持本地数据和服务器数据(配置data或者url) 支持排序和分页(包括Javascript排序和分页) 支持列的"显示/隐藏" 支持多表头 支持固定列 支持明细行 支持汇总行 支持单元格模板 支持编辑表格(三种编辑模式,单元格编辑.行编辑.明细编辑) 支持树表格 支持分组 代码 首先引入基本的css和js文件 复制代码 代码如下

  • 使用JS操作页面表格，元素的一些技巧

    (一) ie .firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChile方法也不管用.下面是我就三种浏览器测试的结果: insertRow IE6 :支持,而且默认参数为-1,默认添加到最后 FireFox :支持,但部支持默认参数 Opera :支持,支持默认参数,默认添加到最前 AppendChild IE6 :不支持 FireFox :支持,但增加TR后不影响ROWS O

  • JavaScript对表格或元素按文本，数字或日期排序的方法

    本文实例讲述了JavaScript对表格或元素按文本,数字或日期排序的方法.分享给大家供大家参考.具体实现方法如下: // Sorting table columns correctly by text, number or date. There are other // versions, plugins, etc., for this but they either are restricted to specific // date formats, or require EVERY r

  • jQuery EasyUI API 中文文档 - DataGrid数据表格

    扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'

  • javascript实现对表格元素进行排序操作

    javascript实现对表格元素进行排序操作

    我们在上网中都能看到很多能够排序的,如大小.时间.价格等 现在我们也试一下排序功能: 排序的函数代码:里面含有点击之后排序--还原,和排升序和降序. function sortAge(){ //对年龄进行排序,要先进行获得每一行对象,然后对象对象中的第一个(从0 开始)的大小进行排序 var tabNode = document.getElementById("tabid"); var rows0 = tabNode.rows; var rows1 = []; //现将元素拷贝一份出来

  • jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

    扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults. 依赖 datagrid 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').treegrid({ url:'treegrid_data.json', treeField:'name', columns:[[ {title:'Task Name',field:'name'

  • js操作table元素实现表格行列新增、删除技巧总结

    本文实例讲述了js操作table元素实现表格行列新增.删除的方法.分享给大家供大家参考,具体如下: /************ TableTool.js ****************************************************************************************************************** **********************************************************

  • jQuery EasyUI中对表格进行编辑的实现代码

    jQuery EasyUI中对表格进行编辑的实现代码

    效果图: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&

  • jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults,用 $.fn.combogrid.defaults 重写了 defaults . 依赖 combo datagrid 用法 复制代码 代码如下: <select id="cc" name="dept" style="width:250px;"></select> 复制代码 代码如下: <input id="cc

  • 原生JS操作网页给p元素添加onclick事件及表格隔行变色

    原生JS操作网页给p元素添加onclick事件及表格隔行变色

    1. 给网页中的所有p元素添加onclick事件: 复制代码 代码如下: <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.

随机推荐