1.使用jquery或vue实现如下界面效果：
提示：
- 奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500
- 选中行时，设置单选框选中状态
- 运行截图
- 代码：
<!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 text="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<style>
table {
width: 500px;
margin: auto;
height: 200px;
border: 1px solid black;
border-collapse: collapse;
}
td,th {
border: 1px solid black;
text-align: center;
}
.even {
background-color: #FFF38F;
}
.odd {
background-color: #FFFFEE;
}
.selected {
background-color: #FF6500;
}
</style>
<body>
<table>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
<tr>
<td>
<input type="radio" name="radio"></td>
<td>张三</td>
<td>男</td>
<td>四川成都</td>
</tr>
<tr>
<td><input type="radio" name="radio"></td>
<td>李四</td>
<td>女</td>
<td>四川绵阳</td>
</tr>
<tr>
<td><input type="radio" name="radio"></td>
<td>王五</td>
<td>男</td>
<td>四川南充</td>
</tr>
<tr>
<td><input type="radio" name="radio"></td>
<td>赵六</td>
<td>男</td>
<td>四川自贡</td>
</tr>
<tr>
<td><input type="radio" name="radio"></td>
<td>陈勇</td>
<td>男</td>
<td>四川德阳</td>
</tr>
<tr>
<td><input type="radio" name="radio"></td>
<td>罗梅</td>
<td>女</td>
<td>四川宜宾</td>
</tr>
</table>
</body>
<script>
$(function() {
$("tr:not(:first):odd").addClass("odd");
$("tr:not(:first):even").addClass("even");
$("tr:not(:first)").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
$(this).find("input").prop("checked","true");
});
});
</script>
</html>
2.使用jquery或vue实现内容过滤，效果如下图所示：
提示：
- Jquery中提供了filter方法进行过滤，如$("选择器").filter(内容过滤器)
- 搜索过程中可先隐藏hide所有数据行，满足条件的行进行显示show（）
- 运行截图
- 代码：
<!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 text="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<style>
div {
width: 500px;
margin: auto;
height: 30px;
}
table {
width: 500px;
margin: auto;
border-collapse: collapse;
border: 1px solid black;
}
td,th {
width: 500px;
height: 25px;
border: 1px solid black;
text-align: center;
}
.even {
background-color: #FFF38F;
}
.odd {
background-color: #FFFFEE;
}
.selected {
background-color: #FF6500;
}
</style>
<body>
<div>
查询：
<input type="text" id = 'textQuery'>
</div>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
<tr>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王六</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>李字</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
</table>
</body>
<script>
$("tr:not(:first):odd").addClass("odd");
$("tr:not(:first):even").addClass("even");
$("#textQuery").keyup(function(){
$("tr:not(:first)").hide().filter(":contains("+$('#textQuery').val()+")").show();
});
</script>
</html>
3.使用 JQuery或vue 实现级联选择框，界面实现效果参考如下图。
运行截图
代码：
<!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 text="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<body>
<select onchange="show(this.value)" align="center" margin=0>
<option>请选择...</option>
<option value="1">河北省</option>
<option value="2">辽宁省</option>
<option value="3">山东省</option>
</select>
<select >
<option>请选择...</option>
</select>
</body>
<script>
function show(num){
$("select:last").html("<option >请选择...</option>");
var arr=new Array();
arr[1] =["石家庄","邯郸","唐山","张家口","廊坊"];
arr[2] =["大连"];
arr[3] =["济南"];
var nums=arr[num];
$.each(nums,function(){
var temp="<option>"+this+"</option>";
$("select:last").append(temp);
})
}
$(document).ready(function(){
$("select option").hover(function(){
$("option").css("bgcolor","blue");
});
});
</script>
</html>
4.使用Jquery或vue实现将输入数据添加至表格中，通过点击Delete可删除所在行数据。
运行截图：
代码：
<!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 text="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<style>
fieldset {
border: 0px;
text-align: center;
border-bottom: 1px solid black;
}
input {
margin-top: 10px;
margin-bottom: 10px;
}
table {
margin-top: 40px;
margin-left: 600px;
border-collapse: collapse;
width: 330px;
}
td,th {
border: 2px solid grey;
padding: 5px;
}
.delete {
text-decoration: underline;
color: blue;
}
</style>
<body>
<form action="">
<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>
<thead>
<tr>
<th style="width: 60px;">Name</th>
<th style="width: 140px;">Email</th>
<th style="width: 62px;">Salary</th>
<th style="width: 65px;"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td id="delete" class="delete">Delete</td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td id="delete" class="delete">Delete</td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td id="delete" class="delete">Delete</td>
</tr>
</tbody>
</table>
</body>
<script>
$(function() {
$("#submit").click(function() {
if (($("#name").val().trim() != "") && ($("#email").val().trim() != "") && ($("#salary").val().trim() != "")) {
var name = $("#name").val();
var email = $("#email").val();
var salary = $("#salary").val();
$("table")
.append("<tr><td>" + name + "</td><td>" + email + "</td><td>" + salary + "</td>" +
"<td id='delete' class='delete'>Delete</td></tr>");
$("#name").val('');
$("#email").val('');
$("#salary").val('');
}
$("tr>.delete").click(function() {
$(this).parent().remove();
});
});
});
</script>
</html>
扫一扫
3581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
