初学Html5+CSS之用表格创建添加信息表+省市联动+删除
2017-11-19 19:43
218 查看
效果图
需要导入的包如下
代码如下
<!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>
需要导入的包如下
代码如下
<!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>
相关文章推荐
- 使用jQuery动态创建一个表格(根据用户输入的内容添加一行数据,并且能逐行删除)
- 二级联动添加表格及删除按钮弹出对话框
- 二级联动实现省市表单添加删除操作
- js 创建 table 动态添加删除表格行(转)
- 表格的添加删除加省级联动效果
- JS动态添加删除表格
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
- js动态添加删除表格行
- JavaScript 动态添加删除表格行
- [表格全功能演示(包括添加,删除,移动,单元格选择,行选择等)]
- mysql数据库的表创建,删除及增删改查和建表之后添加主外键
- Jqurey实现下拉框改变动态添加和删除表格
- mongodb 集合创建、集合数据添加和集合删除
- JS动态添加删除表格行
- Android应用添加(创建)和删除及判断是否存在桌面快捷方式
- 动态添加/删除表格的一行我的办法
- jQuery实现的简单动态添加、删除表格功能示例
- 节点操作-创建并添加&删除节点&替换&克隆节点
- 链表创建添加删除
- angular jQuery css html混合table表格查询 排序 添加 删除 隔行换色