<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.js"></script>
<script>
function aa() {
var name = $("#name").val();
var sex = $("#sex option:selected").text();
var date = $("#date").val();
var pro = $("#pro option:selected").text();
var city = $("#city option:selected").text();
$("table").append("<tr><td><input type='checkbox' name='ck'></td><td>" + name + "</td><td>" + sex + "</td><td>" + date +"</td><td>" + pro+"-" +city+"</td><td><button onclick='ff(this)'>删除</button></td></tr>");
}
function ff(a){
$(a).parent().parent().remove();
}
function ckall(e){
var es= $(":input[name='ck']");
for(var i=0;i<es.length;i++){
es[i].checked=e.checked;
}
}
function quanxuan(){
var ckss=$("input[name='ck']")
for(var i in ckss) {
if (ckss[i].checked==false) {
ckss[i].checked=true;
} else{
ckss[i].checked=false;
}
}
}
function piliang(){
var checks=$(":checked[name=ck]");
if (checks.length==0) {
alert("请至少选择一条删除!");
return;
}
for(var i in checks){
checks[i].parentNode.parentNode.remove();
}
}
$(function() {
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);}});});
</script>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body style="margin: 0 auto;">
<div> 名字<input id="name"> 性别<select id="sex"><option>男</option><option>女</option></select> 出生日期<input type="date" id="date">
地址<select id="pro"><option>---请选择省份</option><option value="0">北京市</option><option value="1">河北省</option><option value="2">河南省</option></select>
<select id="city"><option id="cityx">---请选择城市</option></select><button onclick="aa()">添加</button><br/> <button onclick="quanxuan()">全选/返选</button> <button onclick="piliang()">批量删除</button></div>
<div>
<table style="padding: 1px;width: 700px;margin-top: 5px;" border="1">
<tr style="background-color: #919191;">
<td><input type="checkbox" name="chee" onchange="ckall(this)"></td>
<td>名字</td>
<td>性别</td>
<td>日期</td>
<td>地址</td>
<td>操作</td>
</tr>
</table>
</div>
</body>
</html>
相关文章
- C#操作dataGridView添加数据库中数据,删除dataGridView中的数据
- MySql cmd 命令行模式操作数据库 添加查询 修改 删除 ( 表 字段 数据)
- 使用vue动态在列表中添加或者删除某一行
- ES创建索引库/创建映射/文档操作(添加文档、搜索文档、更新文档、删除文档)/使用IK分词器/映射(映射字段类型)
- 删除文件夹右键菜单“添加到Windows Media Player 列表”和“使用Windows Media Player播放”
- MySQL之数据库和表的基本操作(建立表、删除表、向表中添加字段)
- 表格的一些原生js操作(隔行变色,高亮显示,添加删除,搜索)
- 原生js实现类的添加和删除,以及对数据的add和update、view ,ajax请求 ,页面离开的操作
- iOS回顾笔记(09) -- Cell的添加、删除、更新、批量操作
- MVC5 网站开发之六 管理员 2、添加、删除、重置密码、修改密码、列表浏览