初学Html5+CSS之用表格创建添加信息表+省市联动+删除
来源:互联网 发布:如何成为淘宝摄影师 编辑:程序博客网 时间:2024/06/07 07:21
效果图
需要导入的包如下
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {
width: 600px;
border: solid 0px;
text-align: center;
display: none;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$("#add").click(function() {
$("table")[0].style.display = "block";
var shengfen = [["西二旗", "西直门"], ["浦东区", "徐汇区"]];
$("#pro").change(function() {
$("#cityx").siblings().remove();
var sheng = $(this).val();//省份对应value
for(var i = 0; i < shengfen[sheng].length; i++) {
var $o = $("<option></option>");//创建option标签
$o.html(shengfen[sheng][i]);
$("#city").append($o);
}
});
var name = $("#name").val();
if(name.length<3)
{
alert("姓名不能小于3");
}
var age = $("#age").val();
var sex = $("#sex").val();
var birth = $("#birth").val();
if(birth=="")
{
alert("请选择生日");
}
var city = $("#city").val();
var tr=$("<tr>");
var td1 = $("<td><input type='checkbox'/></td>");
var td2 = $("<td>").html(name);
var td3 = $("<td>").html(sex);
var td5 = $("<td>").html(birth);
var td6 = $("<td>").html(city);
var td7 = $("<td><button> 删除 </button></td>");
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td5);
tr.append(td6);
tr.append(td7);
$("tbody").append(tr);//tr--->tbody
$("tbody tr:odd").css("background-color", "#EEEEEE");
$("tbody tr:even").css("background-color", "white");
$("td button").click(function() {
$(this).parent().parent().remove();
$("tbody tr:odd").css("background-color", "#EEEEEE");
$("tbody tr:even").css("background-color", "white");
var trs = $("tbody").children("tr");
if(trs.length == 0) {
$("table")[0].style.display = "none";
}
});
});
});
</script>
</head>
<body>
姓名:<input id="name" />
<font> </font>
性别:<select id="sex" style="width: 60px;">
<option value="男">男</option>
<option value="女">女</option>
</select>
<font> </font>
生日:<input id="birth" type="date"/>
<font> </font>
住址:<select id="pro">
<option>---请选择省份</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select>
<select id="city">
<option id="cityx">---请选择城市</option>
</select>
<input type="button" value="添加" id="add" style="background: greenyellow; border-radius: 5px; padding: 5px; width: 90px; margin-left: 50px;" /><br />
<input type="button" style="background: yellow; margin-left: 772px; margin-top: 10px; width: 100px; border-radius: 5px; padding: 5px;" value="全选/反选"/>
<input type="button" style="background: red; margin-top: 10px; margin-left: 15px; width: 100px; border-radius: 5px; padding: 5px;" value="我是删除"/>
<table border="0px solid" background="#999999" style="width: 900px;">
<thead>
<tr style="background: #999999;">
<th><input type="checkbox"/></th>
<th width="240px">姓名</th>
<th width="240px">性别</th>
<th width="240px">生日</th>
<th width="240px">城市</th>
<th width="240px">删除</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
- 初学Html5+CSS之用表格创建添加信息表+省市联动+删除
- 初学Html5+CSS之表格添加用户+删除用户+修改数据+删除全部+批量删除+查询数据+内容判断
- 初学Html5+CSS之用div创建数据表布局+删除+批量删除+全选+内容判断
- 初学Html5+CSS之表单的省级联动
- 全国省市联动表创建
- 二级联动实现省市表单添加删除操作
- 改版之省市联动
- 用html5创建表格
- 添加列表和省市联动
- 二级联动添加表格及删除按钮弹出对话框
- 表格的添加删除加省级联动效果
- SQLserver创建省市县三级联动的建表代码
- css 的表格的添加删除
- ADO.NET之省市联动
- div+css+jq省市联动可扩展
- 用js添加删除表格
- 用ajax实现省市联动
- jQuery之表格添加删除数据
- Android动画深入分析
- Android的Html类分析与扩展
- hdoj 1715 大菲波数
- 安装Flask-Mysqldb
- 素数和回文数
- 初学Html5+CSS之用表格创建添加信息表+省市联动+删除
- Ubuntu-14.04.5搭建Hadoop-2.9.0分布式集群环境
- NOIP 2017 提高组 Day2 T1 奶酪 cheese.cpp
- java编译器原理 javac
- ubuntu 14.04解压zip文件出现乱码
- LeetCode 202. Happy Number
- 我只想很快找份Linux系统相关工作
- Linux进程管理预习笔记
- 事件分发基本实现