<html>
<head>
<style type="text/css">
.odd{ background-color:#FFF38F;}
.even{ background-color:#FFFFEE; }
.selection{background-color:#FF6500; }
table
{
border-spacing: 0;
margin-right: auto;
margin-left: auto;
}
th, td
{
border: 1px solid #000;
font-size: 12px;
font-weight: normal;
text-align: center;
vertical-align: middle;
height: 20px;
}
</style>
</head>
<body>
<table id="table1" >
<tr>
<th style="width: 50px;"></th>
<th style="width: 50px;">姓名 </th>
<th style="width: 50px;">性别</th>
<th style="width: 160px;">暂住地</th>
</tr>
<tr id="td2">
<td> <input type="radio" name="rd" value="td2"/></td>
<td>张三</td>
<td>男</td>
<td>四川成都</td>
</tr>
<tr id="td3">
<td> <input type="radio" name="rd" value="td3" /></td>
<td>李四</td>
<td>女</td>
<td>四川德阳</td>
</tr>
<tr id="td4">
<td> <input type="radio" name="rd" value="td4" /></td>
<td>王五</td>
<td>女</td>
<td>四川南充</td>
</tr>
<tr id="td5">
<td> <input type="radio" name="rd" value="td5" /></td>
<td>赵六</td>
<td>男</td>
<td>四川绵阳</td>
</tr>
<tr id="td6">
<td> <input type="radio" name="rd" value="td6" /></td>
<td>陈勇</td>
<td>男</td>
<td>四川德阳</td>
</tr>
<tr id="td7">
<td> <input type="radio" name="rd" value="td7" /></td>
<td>罗梅</td>
<td>女</td>
<td>四川宜宾</td>
</tr>
</table>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#table1 tr:odd").addClass("odd");
$("#table1 tr:even").addClass("even");
$('input:radio[name="rd"]').click(function(){
$("input[type='radio']").each(function () {
if ($(this).is(":checked")) {
$("#table1 tr:odd").attr({
"class" : "odd"
})
$("#table1 tr:even").attr({
"class" : "even"
})
$("#"+$("input[name='rd']:checked").val()).attr({
"class" : "selection"
})
}
});
});
})
</script>
</html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<style type="text/css">
.odd{ background-color:#FFF38F;}
.even{ background-color:#FFFFEE; }
.selection{background-color:#FF6500; }
body{
height:90%;width:40%;
position:fixed;
top:0;right:0;bottom:0;left:0;
margin:auto;
}
table
{
border-spacing: 0;
}
th, td
{
border: 1px solid #000;
font-size: 12px;
font-weight: normal;
text-align: center;
vertical-align: middle;
height: 20px;
}
.checbox{
margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div>
<div class="checbox">
<label>查询:</label>
<input type="text" value="" id="check_input" >
</div>
<table id="table1" >
<tr>
<th style="width: 50px;">姓名 </th>
<th style="width: 50px;">性别</th>
<th style="width: 160px;">暂住地</th>
</tr>
<tr name="a">
<td>张三</td>
<td>男</td>
<td>四川成都</td>
</tr>
<tr name="a">
<td>李四</td>
<td>女</td>
<td>四川德阳</td>
</tr>
<tr name="a">
<td>王五</td>
<td>女</td>
<td>四川南充</td>
</tr>
<tr name="a">
<td>赵六</td>
<td>男</td>
<td>四川绵阳</td>
</tr>
<tr name="a">
<td>蒋七</td>
<td>男</td>
<td>四川内江</td>
</tr>
<tr name="a">
<td>蔡八</td>
<td>男</td>
<td>四川简阳</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
$("#table1 tr:odd").addClass("odd");
$("#table1 tr:even").addClass("even");
$("#check_input").keyup(function() {
var text=$("#check_input").val();
$("tr[name='a']").hide();
$("tr[name='a']").filter(":contains('" + text + "')").show();
})
})
</script>
</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>
<style>
select {
border: 1px solid ;
}
</style>
</head>
<body>
<!-- for属性用于指定该标签所对应的表单元素的 id 值
for属性是用于将 <label> 标签与表单元素关联起来的 -->
<label for="province">请选择省份:</label>
<select id="province">
<option value="">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangdong">广东</option>
</select>
<label for="city">请选择城市:</label>
<select id="city">
<option value="">请选择</option>
</select>
</body>
<!-- 级联选择思路,当用户选择了某一个特定省份,
我们就将该省份得城市拼接进去 -->
<script src="./js/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() {
$('#province').change(function() {
var selectedProvince = $("#province").val();
if (selectedProvince === 'beijing') {
$('#city').html('<option value="">请选择</option><option value="dongcheng">东城区</option><option value="xicheng">西城区</option><option value="chaoyang">朝阳区</option>');
} else if (selectedProvince === 'shanghai') {
$('#city').html('<option value="">请选择</option><option value="huangpu">黄浦区</option><option value="xuhui">徐汇区</option><option value="changning">长宁区</option>');
} else if (selectedProvince === 'guangdong') {
$('#city').html('<option value="">请选择</option><option value="guangzhou">广州市</option><option value="shenzhen">深圳市</option><option value="zhuhai">珠海市</option>');
} else {
$('#city').html('<option value="">请选择</option>');
}
});
});
</script>
</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>
<style>
fieldset {
text-align: center;
border: 1px solid black);
}
input {
margin-top: 30px;
margin-bottom: 20px;
}
table{
margin: auto;
border: 1px solid rgb(198, 176, 176);
border-collapse: collapse;
}
tr{
border: solid;
border-collapse: collapse;
}
th{
border: solid;
}
td{
border: solid;
}
</style>
</head>
<body>
<form id="inputData">
<!-- <fieldset>标签,将表单中的一组相关字段分组在一起。 -->
<!-- <legend>与<fieldset>标签一起搭配使用,用于定义表单的标题 -->
<fieldset>
<legend>添加新员工</legend>
name:<input type="text" id="name" />
email:<input type="text" id="email" />
salary:<input type="text" id="salary" /><br/>
<input type="button" value="Submit" id="submit" />
</fieldset>
</form>
<table id="data">
<tr>
<th>Name</th>
<th>Mmail</th>
<th>salary</th>
<th></th>
</tr>
</table>
</body>
<script src="/js/jquery-3.1.1.min.js"></script>
<script>
$("#submit").click(function(){
console.log("点击了提交按钮!");
let name = $("#name").val();
let email = $("#email").val();
let salary = $("#salary").val();
console.log(name+" "+email+" "+salary);
let data = "<tr id='del'>"
+"<td>"+name+"</td>"
+"<td>"+email+"</td>"
+"<td>"+salary+"</td>"
+"<td><a id='del' href='#' onClick='clickA()'>Delete</a></td></tr>";
$("#data").append(data);
});
function clickA(){
$("#del").remove();
}
</script>
</html>