最近做一个项目,需要对表格进行增行和删行。

研究了一下jquery操作dom的方法和事件委托原理,下面是我编写的例子,源码传上,欢迎高手指点。

功能:

支持在指定行下面增行;

支持删行指定行;

增行、删行后自动计算序号;使用table背景设置表格边框;

代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
body{
font-size: 16px;
}
a{
text-decoration:none;
}
div.wrap{
width:%;
margin: auto;
}
table.list{
background-color: black;
width:%;
}
table.list td,table.list th{
background-color: white;
width:%;
line-height: 2em;
}
.hidden{
display:none;
}
.center{
text-align: center;
}
.orange{
color:orange;
}
a:hover{
color:blue;
font-weight: bold;
}
</style>
</head>
<body>
<div class="wrap">
<div class="list">
<h1 class="center">表格插件</h1>
<p class="orange">支持增行、删行</p>
<table class="list" >
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>成绩</th>
<th><a href="#" class="add">增行</a></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="trmodle hidden">
<td class="center"></td>
<td>
<select name="" id="">
<option value="">张三</option>
<option value="">李四</option>
<option value="">王五</option>
<option value="">赵五</option>
</select>
</td>
<td><input type="text" value="" /></td>
<td class="center"><a href="#" class="add">增行</a></td>
<td class="center"><a href="#" class="del">删行</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
//使用事件委托:解决新增元素事件绑定问题
$("table.list").on("click",function(e){
//console.log(e);
var v = e.target||srcElement;
if(v.nodeName.toLowerCase()=="a"){
//增行
if(v.className=="add"){
//复制模板行数据
var n = "<tr>"+$(".trmodle").eq().clone().html()+"</tr>";
//找到父级元素中的tr,然后在后面增加增行
$(v).parent().parent().after(n);
setIndex();
}
//删行
if(v.className=="del"){
$(v).parent().parent().remove();
setIndex();
}
}
});
});
//组织序号
function setIndex() {
var t = $("table.list tr");
t.each(function () {
$(this).children("td").eq().text($(this).index());
})
}
</script>
</html>

效果图:

aaarticlea/png;base64,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" alt="" />

表格(table) 插件:支持当前行增行、删除。使用事件委托的更多相关文章

  1. Web开发——HTML基础(HTML表格 <table>)

    参考: 表格属性参考:http://www.w3school.com.cn/tags/tag_table.asp 目录: 1.举例 2.表格 2.1 表格属性 2.2 表格的表头 2.3 表格中的空单 ...

  2. 好用的自适应表格插件-bootstrap table (支持固定表头)

    最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...

  3. FineUI大版本升级,外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架

    这是一篇很长的文章,在开始正文之前,请允许我代表目前排名前 20 中唯一的 .Net 开源软件 FineUI 拉下选票: 投票地址: https://code.csdn.net/2013OSSurve ...

  4. QRowTable表格控件-支持hover整行、checked整行、指定列排序等

    目录 一.开心一刻 二.嘴一嘴 三.效果展示 四.浅谈实现 五.自定义数据源 1.data函数 2.flags函数 六.自定义视图 1.目的 2.问题分析 七.测试 八.相关文章 原文链接:QRowT ...

  5. Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等

    目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 ...

  6. [转]响应式表格jQuery插件 – Responsive tables

    本文转自:http://www.shejidaren.com/responsive-tables-for-bootstrap-3.html 这个Responsive tables jQuery插件依赖 ...

  7. FooTable高级的响应式表格jQuery插件

    FooTable是一个高级jQuery插件,允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格.它可以将HTML表转换成可扩展的响应式表格,且通过单击某一行即可将该行数据隐藏 ...

  8. HTML——表格table标签,tr或者td

    表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...

  9. jQuery html表格排序插件:tablesorter

    ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...

随机推荐

  1. CodeSmith 模版

    <%@ CodeTemplate Language="C#" TargetLanguage="C#" Src="" Inherits= ...

  2. Oracle查询指定某一天数据,日期匹配

    在做一个功能的时候,需要在oracle数据库中查询指定某一天的数据. 如果是简单的当前日期前后几天,也好办 AND TO_CHAR(Rct.Creation_Date, 'YYYY-MM-DD')=t ...

  3. linux系统学习笔记:无死角理解保存的设置用户ID,设置用户ID位,有效用户ID,实际用户ID

    一.基本概念 实际用户ID(RUID):用于标识一个系统中用户是谁,一般是在登录之后,就被唯一的确定,就是登录的用户的uid. 有效用户ID(EUID):用于系统决定用户对系统资源的权限,也就是说当用 ...

  4. phpStudy速度慢的解决办法

    1.修改mysql数据库链接地址为ip地址127.0.0.1. 2.使用最新版本,这个坑了我好久时间.

  5. Nginx 配置指令的执行顺序(六)

    前面我们在 (五) 中提到,在一个 location 中使用 content 阶段指令时,通常情况下就是对应的 Nginx 模块注册该 location 中的“内容处理程序”.那么当一个 locati ...

  6. android 手势滑动

    1.概述, 两次都是画曲线统计图用到手势滑动.左滑动,右滑动曲线图翻页 2.直接上代码 3.注: 第一次使用的时候是implement了 OnTouchListener 接口,是在画图布局上layou ...

  7. C# 线程池异步调用

    许多应用程序使用多个线程,但这些线程经常在休眠状态中耗费大量的时间来等待事件发生.其他线程可能进入休眠状态,并且仅定期被唤醒以轮询更改或更新状态信息,然后再次进入休眠状态.为了简化对这些线程的管理,. ...

  8. 【C++第二课】---C到C++的函数升级

    C++中对C语言在函数使用方面做了很大的升级 一﹑内联函数 1.C++中推荐使用内联函数来替代宏片段代码 2.C++中使用关键字inline声明内联函数 例如: inline int func(int ...

  9. Ubuntu下Eclipse搭建ARM开发环境

    第一步:安装JRE 和 Eclipse 详细步骤请参考:http://blog.csdn.net/ex_net/article/details/7251664 第二步:安装arm-linux-gcc ...

  10. C#基础:事件(一) 【转】

    前面简要介绍了委托的基本知识,包括委托的概念.匿名方法.Lambda表达式等,现在讲讲与委托相关的另一个概念:事件. 事件由委托定义,因为事件的触发方(或者说发布方)并不知道事件的订阅方会用什么样的函 ...