Jquery实现table表格行的添加、删除
类别:Web前端 浏览量:210
时间:2015-11-20 Jquery实现table表格行的添加、删除
Jquery实现table表格行的添加、删除一、效果图
二、实现代码
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
// 全部选择的点击事件
$("input[name='chkall']").click(function(){
$("input[name='chked']").attr("checked", this.checked);
});
});
var row_cur_index = 0;// 插入行的当前索引
/**添加新行*/
function addNew(){
var row_id = "tr" + row_cur_index;// 所插入行的id
var row_obj = "<tr id='"+row_id+"'><td><input type='checkbox' class='ck_class' name='chked' value='' /></td><td><input type='text' name='newRow"+row_cur_index+"' /> <a href='#' onclick='delRow("+row_id+")'>删除</a></td></tr>";
$("#topRow").before(row_obj); // 插入行
row_cur_index = row_cur_index + 1;
}
/**将文本框值赋给同一行对应的复选框*/
function setValue(row_index, value){
var row_id = "#tr" + row_index;
$(row_id).find(":checked").val(value);
}
/**删除行对象*/
function delRow(row_id){
$(row_id).remove(); // 删除匹配row_id的元素
}
function doSubmit(frm){
/**判断复选框是否有选*/
if($("input[name='chked']:checked").size() == 0){
alert("选择不能少于一项");
return false;
}
try {
$("tr[id^='tr']").each(function(){
var tmp_row_index = this.id.substring(2); // 当前行索引
if($("#tr"+tmp_row_index).find(":checkbox").attr("checked")){
var patrn = /^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$/;
var input_value = $("input[name='newRow"+tmp_row_index+"']").val(); // 文本框值
setValue(tmp_row_index, this.value);
if(input_value == "") throw "Err1";
if (!patrn.test(input_value)) throw "Err2";
}
});
} catch (e) {
if(e == "Err1")
alert("添加的地址不能为空!");
if(e == "Err2")
alert("请输入正确的邮件地址!");
return false;
}
return true;
}
</script>
</head>
<body>
<form method="post" action="" onsubmit="return doSubmit(this)">
<table id="tbl" border="1" cellpadding="4" style="border-collapse: collapse" width="100%">
<tr>
<td><input type="checkbox" name='chkall' />全部选择</td>
<td>
<a href="#" onclick="addNew()">添加新地址</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chked" value="@email">
</td>
<td>@email</td>
</tr>
<tr id="topRow">
<td colspan="2">
<input type="submit" value="提交" name="B1">
</td>
</tr>
</table>
</form>
</body>
</html>
标签:table
您可能感兴趣
- mysql中使用show table status 查看表信息
- ASP.NET合并两个相关联的DataTable
- console.table调试JSON对象或字符串
- vuetable表格合并(vue-table实现添加和删除)
- sql server创建的表在哪(浅析SQL Server授予了CREATE TABLE权限但是无法创建表)
- python中如何清空列表数据(Python批量删除只保留最近几天table的代码实例)
- sqlserver查询信息表(SQL Server中Table字典数据的查询SQL示例代码)
- ant design 的vue批量操作(ant desing vue table 实现可伸缩列的完整例子)
- sql server 2014配置文件路径(SQL Server 2012 FileTable 新特性详解)
- datatable和list的转换
- html5中table属性(Html5之自定义属性data-,dataset)
- mysql 建表命令注释(mysql alter table命令修改表结构实例详解)
- 使用border-collapse设置table边框
- html中table怎么用(详解CSS的table-layout属性的用法)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- hashtable的javascript实现
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
- 刚红就耍大牌,《琉璃》角色滤镜碎一地,心疼工作人员(琉璃角色滤镜碎一地)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
- 《祝卿好》台词又土又甜,就喜欢这么直接的恋爱(祝卿好台词又土又甜)
- 大女主 汤唯垂青电视圈,搭档朱亚文出演《大明皇妃孙若微传》(汤唯垂青电视圈)
- 红色代表什么(红色代表什么情感和含义)
热门推荐
- linux中dir命令怎么用(Linux sar命令使用方法及代码实例解析)
- python旅游(详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?)
- laravel获取访问来路的函数(Laravel实现搜索的时候分页并携带参数)
- react跳转页面并传参数(react 跳转后路由变了页面没刷新的解决方案)
- js弹出新窗口被拦截的解决方法
- php考试复习题(php+mysql开发的最简单在线题库在线做题系统完整案例)
- python 微信发天气信息(python微信聊天机器人改进版定时或触发抓取天气预报、励志语录等,向好友推送)
- mysql的复制原理(浅析MySQL的WriteSet并行复制)
- laravel查询限制输出设置(laravel 获取某个查询的查询SQL语句方法)
- laravel自定义使用方法(Laravel使用Queue队列的技巧汇总)