jQuery——表格添加数据
1、遮罩层宽高100%，position，不占位
2、注册a标签的删除事件，用on()方法，以方法可以动态添加，之前js需要利用冒泡属性（父标签注册事件，子标签冒泡，target===li触发事件）
3、$(".add input:eq(1)").prop("checked")?$(".add input:eq(1)").val() : $(".add input:eq(2)").val()---需要括号括起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} .mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
position: absolute;
display: none;
} .add {
width: 300px;
height: 250px;
padding-left: 100px;
padding-top: 50px;
background-color: #fff;
margin: 200px auto;
font: 400 20px "simsun";
position: relative;
} .add input {
margin: 10px;
} .add span {
position: absolute;
right: 0;
top: 0;
width: 30px;
height: 30px;
text-align: center;
font: 500 30px/30px "simsun";
background-color: #cccccc;
} .add button {
width: 70px;
height: 25px;
margin: 20px 0 0 150px;
} table {
border: 1px solid #ccc;
border-collapse: collapse;
text-align: center;
font: 500 20px "simsun";
margin: 100px auto;
} th, td {
width: 100px;
border: 1px solid #ccc;
} a {
text-decoration: none;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
var arr = [
{"name": "王杰", "gender": "男", "age": 19},
{"name": "王花", "gender": "女", "age": 19},
{"name": "王明", "gender": "男", "age": 19}
];
for (var i = 0; i < arr.length; i++) {
$("tbody").append($("<tr><td>" + arr[i].name + "</td><td>" + arr[i].gender + "</td><td>" + arr[i].age + "</td><td><a href='javascript:;'>删除</a></td></tr>"));
}
$("tbody").on("click", "a", function () {
$(this).parent().parent().remove();
});
$("button").click(function () {
$(".mask").show();
});
$(".add span").click(function () {
$(".add input").val("");
$(".add input:checked").attr("checked", false);
$(".mask").hide();
});
$(".add button").click(function () {
//$(".add input:eq(1)").prop("checked")?$(".add input:eq(1)").val() : $(".add input:eq(2)").val()---需要括号括起来
console.log($(".add input:eq(1)").prop("checked"));
$("tbody").append($("<tr><td>" + $(".add input:eq(0)").val() + "</td><td>" + ($(".add input:eq(1)").prop("checked") ? $(".add input:eq(1)").val() : $(".add input:eq(2)").val()) + "</td><td>" + $(".add input:eq(3)").val() + "</td><td><a href='javascript:;'>删除</a></td></tr>"));
$(".add input").val("");
$(".add input:checked").attr("checked", false);
$(".mask").hide();
});
});
</script>
</head>
<body>
<div class="mask">
<div class="add">
<span>×</span>
姓名<input type="text"><br>
性别<input type="radio" name="gender" value="男">男<input type="radio" name="gender" value="女">女<br>
年龄<input type="text"><br>
<button>提交</button>
</div>
</div>
<button>添加数据</button>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<!--<tr>-->
<!--<td>王杰</td>-->
<!--<td>男</td>-->
<!--<td>19</td>-->
<!--<td><a href="javascript:;">删除</a></td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>王杰</td>-->
<!--<td>男</td>-->
<!--<td>19</td>-->
<!--<td><a href="javascript:;">删除</a></td>-->
<!--</tr>-->
</tbody>
</table>
</body>
</html>
jQuery——表格添加数据的更多相关文章
- 用JSON数据向已定义列的表格添加数据行
其实添加方式和在MVC中动态读取JSON数据创建表格一样,只不过一个是完整表格添加,一个是从表格中间添加.不详细说明了. <div> <table class="table ...
- 利用jquery表格添加一行并在每行第一列大写字母显示实现方法
表格添加一行并在每行第一列大写字母显示jquery实现方法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...
- vue+element 给表格添加数据，页面不实时刷新的问题
由于页面加载时,使用了keep-alive,keep-alive具有数据缓存作用,当在添加页面添加成功时,返回主页面没有立即更新.数据有缓存. 解决办法如下: 将获取数据列表的方法放到activate ...
- C#使用Command将dataGrideView表格内数据与数据库交互
本文主要介绍通过Command类使用SQL插入指令insert与查询指令select将dataGrideView表格内添加至数据库,与从数据库读出数据存放在dataGrideView表格中. C#制作 ...
- 利用jquery动态添加和删除表格的一行，并且保存单行数据
开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...
- jquery表格动态增删改及取数据绑定数据完整方案
一 前言 上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...
- Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- ligerui_实际项目_003：form中添加数据，表格(grid)里面显示，最后将表格(grid)里的数据提交到servlet
实现效果: "Form"中填写数据,向本页"Grid"中添加数据,转换成Json数据提交,计算总和,Grid文本框可编辑,排序 图片效果: 总结: //disp ...
- Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
随机推荐
- jQuery动态添加表格1
用jquery的append方法在指定行的后面新增一行tr,会把新增的行的html追加到指定行的html里面 content +="<tr><td>123</t ...
- Linux下汇编语言学习笔记77 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- IBOutlet loadView UIButton的subview数量 UIWebView
IBOutlet声明的插座变量和属性一起使用的时候,在.m文件调用的是属性. 在loadView方法中获取view属性会产生循环引用问题并导致内存溢出. Control+E到行尾,Control+A到 ...
- 关于Git的简单使用
新电脑git push一直出问题,到现在也没有解决,但是一些git的命令还是有用的,就先记下来吧.(下图就是没解决的报错) 一.上传本地项目到git 1.初始化git git init 2.配置用户名 ...
- 11、Java并发性和多线程-Java内存模型
以下内容转自http://ifeve.com/java-memory-model-6/: Java内存模型规范了Java虚拟机与计算机内存是如何协同工作的.Java虚拟机是一个完整的计算机的一个模型, ...
- Node.js 博客实例（三）添加文件上传功能
原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 For ...
- ITK Configuring and Building in VisualStudio及hello world程序编译
1. ITK Configuring and Building in VisualStudio With Visual Studio 2010 on Windows 7 (32-bit): Launc ...
- Vim 经常使用快捷键及键盘图
Vim经常使用的快捷键 h - 光标左移一个字符 j - 光标下移一个字符 k - 光标上移一个字符 l - 光标右移一个字符 下移15行 - 15j Ctrl + f - 屏幕向下移动一页 ...
- linux文档权限
1.登录 root 用户:su - mac一开始进入创建的用户是具有管理员权限的用户,但是密码却不是进入 root 用户的密码,可以使用 sudo su - 免密进入 root 用户. 2.退出 ro ...
- 破解IntelliJ IDEA 2017
一.下载地址 http://www.jetbrains.com/idea/ 二.下载破解jar包 http://idea.lanyus.com/ 2.1 将下载好的jar包放在IDEA的bin文件下 ...