添加新员工
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.border{
width: 700px;
margin: auto auto;
}
.border div:nth-child(1){
margin: 20px 300px;
}
.border div:nth-child(3){
margin: 20px 320px;
}
.border table{
margin: 20px auto;
}
table{
width:400px ;
border-collapse: collapse;
border: 1px black solid;
}
table thead tr th,table tbody tr td{
border: 1px black solid;
text-align: center;
}
table tbody tr td span{
text-decoration: underline;
color: blue;
}
</style>
</head>
<body>
<div class="border">
<div >添加新员工</div>
<div>
<span>name:</span><input type="text" id="name">
<span>email:</span><input type="text" id="email">
<span>salary:</span><input type="text" id="salary">
</div>
<div>
<button id="btn">Submit</button>
</div>
<hr>
<!-- <table border="1" cellspacing="0"> -->
<table>
<thead>
<tr>
<th width="20%">Name</th>
<th width="40%">Email</th>
<th width="20%">Salary</th>
<th width="20%"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td>
<span>Delete</span>
</td>
</tr>
<tr>
<td>jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td>
<span>Delete</span>
</td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom,com</td>
<td>10000</td>
<td>
<span>Delete</span>
</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$name=$("#name").val();
$email=$("#email").val();
$salary=$("#salary").val();
$("tbody").append("<tr><td>"+$name+"</td><td>"+$email+"</td><td>"+$salary+"</td><td><span>Delete</span></td></tr>");
})
});
// 为什么一定要使用监听？
$(document).on("click", "table tbody tr td span", function () {
$(this).parent().parent().remove()
});
// $('span').click(function(){
// $(this).parent().parent().remove()
// })
</script>
</body>
</html>
选择居住地
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>
<table width="400px">
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="radio" name="line" class="radio"></td>
<td width="20%">张三</td>
<td width="20%">男</td>
<td width="40%">四川成都</td>
</tr>
<tr>
<td><input type="radio" name="line" class="radio"></td>
<td width="20%">李四</td>
<td width="20%">女</td>
<td width="40%">四川绵阳</td>
</tr>
<tr>
<td><input type="radio" name="line" class="radio"></td>
<td width="20%">王五</td>
<td width="20%">男</td>
<td width="40%">四川南充</td>
</tr>
<tr>
<td><input type="radio" name="line" class="radio"></td>
<td width="20%">赵六</td>
<td width="20%">男</td>
<td width="40%">四川自贡</td>
</tr>
<tr>
<td><input type="radio" name="line" class="radio"></td>
<td width="20%">陈勇</td>
<td width="20%">男</td>
<td width="40%">四川德阳</td>
</tr>
<tr>
<td><input type="radio" name="line" class="radio"></td>
<td width="20%">罗梅</td>
<td width="20%">女</td>
<td width="40%">四川宜宾</td>
</tr>
</tbody>
</table>
<script>
$('.radio').click(function(){
// 如何进行将原有的颜色还原？
// 答案：将原本的颜色进行重新上色
$('table tbody tr:nth-child(2n+1)').css("background-color","#FFF38F")
$('table tbody tr:nth-child(2n)').css("background-color","#FFFFEE")
var $Tr=$(this).parent().parent();
$Tr.css('background-color','#FF6500');
})
</script>
<style>
.radio{
margin: auto 31px;
}
table{
text-align: center;
border-collapse: collapse;
}
table thead {
background-color: white;
}
table tbody tr:nth-child(2n+1){
background-color: #FFF38F;
}
table tbody tr:nth-child(2n){
background-color: #FFFFEE;
}
table thead tr th,
table tbody tr td{
border: 1px solid black;
}
</style>
</div>
</body>
</html>
多选地区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>
<select id="province">
<option value="0">请选择...</option>
<option value="1">河北省</option>
<option value="2">辽宁省</option>
<option value="3">山东省</option>
</select>
<select id="cities">
</select>
</div>
<script>
var cities=[
["请选择"],
["请选择","石家庄","邯郸","唐山","张家口","廊坊"],
["请选择","沈阳市","大连市","本溪市"],
["请选择","济南市","东营市"]
];
$(document).ready(function($){
for( var i=0;i<cities[0].length;i++){
var option="<option>"+cities[0][i]+"</option>";
$("#cities").append(option);
}
});
$("#province").change(function(){
$("#cities").empty();
var index=$("#province").val();
for( var i=0;i<cities[index].length;i++){
var option="<option>"+cities[index][i]+"</option>";
$("#cities").append(option);
}
});
</script>
</body>
</html>
查询地区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>
<div style="margin: 30px auto;">
<span>查询：</span>
<input type="text" id="check">
</div>
<table width="500px">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td width="50%">张三</td>
<td width="25%">男</td>
<td width="25%">浙江宁波</td>
</tr>
<tr>
<td width="50%">李四</td>
<td width="25%">女</td>
<td width="25">浙江杭州</td>
</tr>
<tr>
<td width="50%">王五</td>
<td width="25%">男</td>
<td width="25%">湖南长沙</td>
</tr>
<tr>
<td width="50%">赵六</td>
<td width="25%">男</td>
<td width="25%">浙江温州</td>
</tr>
<tr>
<td width="50%">Rain</td>
<td width="20%">男</td>
<td width="40%">浙江杭州</td>
</tr>
<tr>
<td width="50%">MAXMAN</td>
<td width="25%">女</td>
<td width="25%">浙江杭州</td>
</tr>
<tr>
<td width="50%">王六</td>
<td width="25%">男</td>
<td width="25%">浙江杭州</td>
</tr>
<tr>
<td width="50%">李字</td>
<td width="25%">女</td>
<td width="25%">浙江杭州</td>
</tr>
<tr>
<td width="50%">李四</td>
<td width="25%">男</td>
<td width="25%">湖南长沙</td>
</tr>
</tbody>
</table>
<script>
$(document).on("change", "#check", function () {
var $select=$('#check').val();
console.log($select)
$('table tbody tr').hide();
// 为什么这个代码就不可以？
// $('table tbody tr').filter('table tbody tr td:contains('+$select+')').css("background-color","white")
$('table tbody tr td:contains('+$select+')').parent().show()
console.log("通过了吗")
})
</script>
<style>
.radio{
margin: auto 31px;
}
table{
text-align: center;
border-collapse: collapse;
border:1px solid black;
}
table thead tr{
background-color: white;
}
table tbody tr:nth-child(2n+1){
background-color: #FFF38F;
}
table tbody tr:nth-child(2n){
background-color: #FFFFEE;
}
table tbody tr td,
table thead tr th{
border:1px solid black;
}
</style>
</div>
</body>
</html>
扫一扫
46
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
