目录
1、多选框互移
①、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select</title>
</head>
<body>
<div id="oneBox" style="width: 600px; height: 400px; margin: 40px auto; border: 2px solid black">
<span style = "float: left;">
<font color="green" face ="宋体">已有商品</font><br/>
<select multiple="multiple" style="width: 100px; height: 200px;" id="left">
<option class = "op01">iPhone6S</option>
<option class = "op01">小米4</option>
<option class = "op01">锤子TZ</option>
</select>
<p><a href="#" style="padding-left: 20px;"id="selectOneToRight"> >> </a></p>
<p><a href="#" style="padding-left: 20px;"id="selectAllToRight"> >>> </a></p>
</span>
<span style = "float: right;">
<font color="red" face ="宋体">未有商品</font><br/>
<select multiple="multiple" style="width: 100px; height: 200px;" id="right">
<option>三星Note3</option>
<option>华为6s</option>
</select>
<p><a href="#" style="padding-left: 20px;"id="selectOneToLeft"> << </a></p>
<p><a href="#" style="padding-left: 20px;"id="selectAllToLeft"> <<< </a></p>
</span>
</div>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script>
/* 1. 选中单击去右边 */
$("#selectOneToRight").click(function () {
$("#left option:selected").appendTo($("#right"));
});
/* 双击去右边 */
$(".op01").dblclick(function () {
$("#left option:selected").appendTo($("#right"));
$(".op01").dblclick(function () {
$("#right option:selected").appendTo($("#left"));
});
});
/* 2. 单击全部去右边 */
$("#selectAllToRight").click(function () {
$("#left option").appendTo($("#right"));
});
/* 3. 选中单击去左边 */
$("#selectOneToLeft").click(function () {
$("#right option:selected").appendTo($("#left"));
});
/* 4. 单击全部去左边 */
$("#selectAllToLeft").click(function () {
$("#right option").appendTo($("#left"));
});
</script>
</body>
</html>②、实现效果图
2、表格修改
①、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<tr>
<td id="zhuji01">mysql-001</td>
<td id="ip01">10.10.8.10</td>
<td id="port01">15379</td>
<td><a id ="regdit01" href="#">编辑</a></td>
</tr>
<tr>
<td id="zhuji02">redls-001</td>
<td id="ip02">10.10.9.10</td>
<td id="port02">16379</td>
<td><a id="regdit02" href="#">编辑</a></td>
</tr>
<tr>
<td id="zhuji03">monitor-001</td>
<td id="ip03">10.10.10.10</td>
<td id="port03">17379</td>
<td><a id="regdit03" href="#">编辑</a></td>
</tr>
</table>
<div id="regdit" style="width: 300px;height: 200px; margin: 200px auto; background-color: cornflowerblue">
<table style="margin: 0 auto; padding-top: 30px">
<tr>
<td>主机名：</td>
<td> <input id="zhuji" type="text" style="width: 100px;" /></td>
</tr>
<tr>
<td> ip地址：</td>
<td> <input id="ip" type="text" style="width: 100px;" /></td>
</tr>
<tr>
<td>端口号：</td>
<td><input id="port" type="text" style="width: 100px;" /></td>
</tr>
<tr>
<td></td>
<td>
<button type="submit" id="submit">确认</button>
<button type="button" id="cancel">取消</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script>
$("#regdit").hide();
// 第1个
$("#regdit01").click(function () {
$("#regdit").show();
$("#zhuji").val( $("#zhuji01").text());
$("#ip").val($("#ip01").text());
$("#port").val($("#port01").text());
// 点击确认 之后 修改表格中的数据
$("#submit").click(function () {
$("#zhuji01").text( $("#zhuji").val());
$("#ip01").text( $("#ip").val());
$("#prot01").text( $("#port").val());
});
});
// 2
$("#regdit02").click(function () {
$("#regdit").show();
$("#zhuji").val( $("#zhuji02").text());
$("#ip").val($("#ip02").text());
$("#port").val($("#port02").text());
// 点击确认 之后 修改表格中的数据
$("#submit").click(function () {
$("#zhuji02").text( $("#zhuji").val());
$("#ip02").text( $("#ip").val());
$("#prot02").text( $("#port").val());
});
});
// 3
$("#regdit03").click(function () {
$("#regdit").show();
$("#zhuji").val( $("#zhuji03").text());
$("#ip").val($("#ip03").text());
$("#port").val($("#port03").text());
// 点击确认 之后 修改表格中的数据
$("#submit").click(function () {
$("#zhuji03").text( $("#zhuji").val());
$("#ip03").text( $("#ip").val());
$("#prot03").text( $("#port").val());
});
});
// 隐藏div
$("#cancel").click(function () {
$("#regdit").hide();
});
</script>
</body>
</html>②、实现效果图
3、会员注册基本样式
①、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>register</title>
<style>
td{
border: 1px solid red;
width: 33%;
}
.title{
color: white;
}
</style>
</head>
<body>
<table width="100%" style="border: 1px solid black; height: 40px;">
<tr>
<td></td>
<td></td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
<div style="width: 100%; height: 40px; background-color: #C75450;">
<a class="title">首页</a>
<a class="title">电脑办公</a>
<a class="title">手机数码</a>
<a class="title">孕婴保健</a>
<a class="title">鞋靴箱包</a>
</div>
<div style="width:500px;height:500px; border: 1px solid black; margin: 30px auto; ">
<table width = "80%" style="text-align: center; margin: 60px auto;" >
<tr>
<td colspan="2">
<p><strong>会员注册</strong></p>
</td>
</tr>
<tr>
<td style="width: 30%;">用户名</td>
<td style="width: 70%;">
<input style="float:left" type="text" value = "admin">
</td>
</tr>
<tr>
<td style="width: 30%;">密码</td>
<td style="width: 70%;">
<input style="float:left" type="password" />
</td>
</tr>
<tr>
<td style="width: 30%;">确认密码</td>
<td style="width: 70%;">
<input style="float:left" type="password" />
</td>
</tr>
<tr>
<td style="width: 30%;">email</td>
<td style="width: 70%;">
<input style="float:left" type="email" />
</td>
</tr>
<tr>
<td style="width: 30%;">姓名</td>
<td style="width: 70%;">
<input style="float:left" type="text" />
</td>
</tr>
<tr>
<td style="width: 30%;">籍贯</td>
<td style="width: 70%;">
<select style="float:left" >
<option select="selected">请选择</option>
<option>山东省</option>
<option>安徽省</option>
</select>
<select style="float:left" >
<option select="selected">请选择</option>
</select>
</td>
</tr>
<tr>
<td style="width: 30%;">姓名</td>
<td style="width: 70%;">
<input style="float:left" type="text" />
</td>
</tr>
<tr>
<td style="width: 30%;">出生日期</td>
<td style="width: 70%;">
<input style="float:left" type="text" />
</td>
</tr>
<tr>
<td style="width: 30%;">验证码</td>
<td style="width: 70%;">
<input style="float:left" type="text" />
<img src=".../">
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">注册</button>
</td>
</tr>
</table>
</div>
</body>
</html>②、实现效果图
3265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
