实验目的及要求：
- 掌握Jquery页面初始化方法
- 掌握Jquery的选择器的基本使用
- 掌握Jquery对DOM 的基本操作
- 掌握vue的基础用法
实验内容：
说明：所有实验内容可选择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>experiment4-1</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$("tr:not(:first):odd").addClass("evenRow");
$("tr:not(:first):even").addClass("oddRow");
$("tr:not(:first)").click(function(){
$(this).addClass("choose").siblings().removeClass("choose");
$(this).find("input").prop("checked","true");
});
});
</script>
<style>
td {
border: #000 solid 1px;
text-align: center;
padding-right: 20px;
padding-left: 20px;
}
table {
position:fixed;
width:400px;
height: 250px;
padding: 0px;
margin-left: 40%;
border: 1px solid black;
border-collapse: collapse;
}
table tr{
margin: -10px;
padding: -10px;
}
table tr td {
border: 1px solid black;
text-align: center;
}
table tr th {
border: 1px solid black;
text-align: center;
}
.oddRow{
background-color: #FFF38F;
}
.evenRow{
background-color: #FFFFEE;
}
.choose{
background-color: #FF6500;
}
</style>
</head>
<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>
</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>experiment4-2</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("tr:odd").css("background", "#FFF38F");
$("tr:even").css("background", "#FFFFEE");
$("tr:eq(0)").css("background", "#FFFFFF");
$("input").on("input",function() {
var text=$("input").val();
$(".class").parent().hide();
$(".class").filter(":contains("+text+")").parent().show();
});
});
</script>
<style>
table {
border-collapse: collapse;
margin: auto;
}
td {
border: #000 solid 1px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
}
#ftd{
font-weight: bold;
}
input{
border: #000 solid 3px;
}
</style>
</head>
<body>
<div>
<center><b >查询:</b><input type="text"></center>
<table>
<tr id="ftd">
<td>姓名</td>
<td>性别</td>
<td>暂住地</td>
</tr>
<tr>
<td class="class">张三</td>
<td>男</td>
<td>四川成都</td>
</tr>
<tr>
<td class="class">李四</td>
<td>女</td>
<td>四川绵阳</td>
</tr>
<tr>
<td class="class">王五</td>
<td>男</td>
<td>四川南充</td>
</tr>
<tr>
<td class="class">陈六</td>
<td>男</td>
<td>四川自贡</td>
</tr>
<tr>
<td class="class">陈勇</td>
<td>男</td>
<td>四川德阳</td>
</tr>
<tr>
<td class="class">罗梅</td>
<td>女</td>
<td>四川宜宾</td>
</tr>
<tr>
<td class="class">Rain</td>
<td>女</td>
<td>四川宜宾</td>
</tr>
<tr>
<td class="class">MAXMAN</td>
<td>女</td>
<td>四川宜宾</td>
</tr>
<tr>
<td class="class">王六</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
</table>
</div>
</body>
</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>experiment4-3</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
select{
height: 20px;
}
</style>
</head>
<body>
<center>
<select id="province">
<option value="0">请选择</option>
<option value="1">河北省</option>
<option value="2">辽宁省</option>
<option value="3">山东省</option>
</select>
<select id="cities">
</select>
<script>
var cities=[
["请选择"],
["请选择","石家庄","邯郸","唐山","张家口","廊坊"],
["请选择","沈阳市","大连市","鞍山市","抚顺市","本溪市"],
["请选择","济南市","青岛市","淄博市","枣庄市","东营市"]
];
$("#province").change(function(){
$("#cities").empty();//清空上一项
var index=$("#province").val();
for( var i=0;i<cities[index].length;i++){
var newoption="<option>"+cities[index][i]+"</option>";
$("#cities").append(newoption);
}
});
</script>
</center>
</body>
</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>experiment4-4</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#mit").click(function(){
console.log(1);
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>"+"<span> Delete </span>"+"</td>"+
+"</tr>");
$("span").click(function(){
$(this).parent().parent().remove();
});
});
});
</script>
<style>
#div1 {
text-align: center;
margin: 20px;
}
#div2 {
text-align: center;
margin: 20px auto;
}
#tr1{
border: #bab6aa solid 2px;
}
span{
text-decoration:underline blue;
color: blue;
}
table {
border-collapse: collapse;
margin: 20px auto;
}
td {
border: #bab6aa solid 2px;
}
</style>
</head>
<body>
<div id="div1">
<font>添加新员工</font>
</div>
<center>
name:<input id="name" type="text">
email:<input id="email" type="text">
salary:<input id="salary" type="text"></br>
</center>
<div id="div2">
<input id="mit" type="button" value="Submit">
</div>
<table id="table">
<tr #id="tr1">
<td>Name</td>
<td>Email</td>
<td>salary</td>
<td></td>
</tr>
</table>
</body>
</html>
260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
