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
您可能感兴趣
- vuetable表格合并(vue-table实现添加和删除)
- datatable linq查询
- table 细边框
- html5中table属性(Html5之自定义属性data-,dataset)
- Linq操作Datable
- csstable元素设置(CSS设置table下tbody的滚动条的实现)
- jquery操作table
- docker容器临时网络连接(Docker与iptables及实现bridge方式网络隔离与通信操作)
- .Net中Immutable(不可变)集合
- datatable添加行列
- html中table怎么用(详解CSS的table-layout属性的用法)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- mysql语句详解(详解记录MySQL中lower_case_table_names的坑)
- table表格嵌套,边框重叠变粗的解决
- sql server 2014配置文件路径(SQL Server 2012 FileTable 新特性详解)
- hashtable的javascript实现
- 吉善缘《聚宝金蟾》金蟾招财摆件 三足全铜蟾蜍客厅店铺开业礼品(吉善缘聚宝金蟾金蟾招财摆件)
- 招财化煞神兽,金蟾变了(招财化煞神兽金蟾变了)
- 26岁杨紫的白素贞遇上24岁鞠婧祎,哪个最美(26岁杨紫的白素贞遇上24岁鞠婧祎)
- 鞠婧祎和杨紫两种风格的女生,你心里谁比较美(鞠婧祎和杨紫两种风格的女生)
- 三千年第一美女鞠婧祎出演白素贞pk杨紫,颜值胜赵雅芝王祖贤(三千年第一美女鞠婧祎出演白素贞pk杨紫)
- 成都轨道交通13号线一期工程最新进展(成都轨道交通13号线一期工程最新进展)
热门推荐
- css3 图片边框(css3图片边框border-image的用法)
- mysql中常用的三种存储引擎的区别(MySQL 存储过程的优缺点分析)
- 国内优惠的云服务器租用多少钱(云服务器租用的价格怎么算?)
- dedecms默认模板目录(DEDECMS 5.7 将data目录迁移后,网站地图无法打开和更新的解决方法)
- 部署ssis包提示更改保护级别(SSIS 延迟验证方法)
- vue在html里面怎么展示图片(v-html渲染组件问题)
- python中生成字符串序列(python实现字符串加密 生成唯一固定长度字符串)
- 用python简单实现登录功能(使用python的pexpect模块,实现远程免密登录的示例)
- html5复选框属性教程(HTML5单选框、复选框、下拉菜单、文本域的实现代码)
- js获取上个月第一天和最后一天
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9