|
|
@@ -0,0 +1,361 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>用户列表</title>
|
|
|
+</head>
|
|
|
+<style>
|
|
|
+
|
|
|
+ table,tr, td, th{
|
|
|
+ border: 1px solid black;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
|
|
+<body>
|
|
|
+<!-- 序号 姓名 密码 学校 性别 地址 电话 学生表 -->
|
|
|
+<h1>用户列表</h1>
|
|
|
+<table cellspacing="0px" cellpadding="0px">
|
|
|
+ <tr>
|
|
|
+ <th>序号</th>
|
|
|
+ <th>姓名</th>
|
|
|
+ <th>密码</th>
|
|
|
+ <th>学校</th>
|
|
|
+ <th>性别</th>
|
|
|
+ <th>地址</th>
|
|
|
+ <th>电话</th>
|
|
|
+ <th>操作</th>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="number">1</td>
|
|
|
+ <td>张三</td>
|
|
|
+ <td>123123</td>
|
|
|
+ <td>黑龙江大学</td>
|
|
|
+ <td>男</td>
|
|
|
+ <td>北京</td>
|
|
|
+ <td>15555555555</td>
|
|
|
+ <td>
|
|
|
+ <a href="#" class="del" onclick="del(this)" >删除</a>
|
|
|
+ <a href="#" class="edit" >修改</a>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+</table>
|
|
|
+
|
|
|
+<hr>
|
|
|
+<table border="1px">
|
|
|
+ <thead><h1>用户信息</h1></thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>用户名：</td>
|
|
|
+ <td><input type="text" name="username" placeholder="请输入用户名" ></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>密码：</td>
|
|
|
+ <td><input type="password" name="password" placeholder="请输入面膜" ></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>性别：</td>
|
|
|
+ <td>
|
|
|
+ <input type="radio" name="sex" value="0" >女
|
|
|
+ <input type="radio" name="sex" value="1" checked >男
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>学校：</td>
|
|
|
+ <td>
|
|
|
+ <select name="school" id="school" >
|
|
|
+ <option value="1">---请选择---</option>
|
|
|
+ <option value="2">---黑大---</option>
|
|
|
+ <option value="3">---理工---</option>
|
|
|
+ <option value="4">---黑工程---</option>
|
|
|
+ </select>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>地址：</td>
|
|
|
+ <td><input type="text" name="address" placeholder="请输入地址" ></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>电话：</td>
|
|
|
+ <td><input type="tel" name="phone" placeholder="请输入电话" ></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="2">
|
|
|
+ <button id="btn" type="submit" >添加</button>
|
|
|
+
|
|
|
+ <button id="btnEdit" type="submit" >确认修改</button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+</table>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
|
|
+<script>
|
|
|
+
|
|
|
+ //获取value值信息
|
|
|
+ function addUser(){
|
|
|
+ //获取用户名
|
|
|
+ let username = document.getElementsByName("username")[0].value;
|
|
|
+
|
|
|
+ let password = document.getElementsByName("password")[0].value;
|
|
|
+
|
|
|
+ //console.log(username)
|
|
|
+ let sex = document.getElementsByName("sex");
|
|
|
+
|
|
|
+ let sexElement = "";
|
|
|
+ for (let i = 0; i < sex.length ; i++) {
|
|
|
+ if (sex[i].checked){
|
|
|
+ sexElement = sex[i].value == 0 ? "女" : "男";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //console.log(sexElement)
|
|
|
+
|
|
|
+ //获取学校
|
|
|
+ //school
|
|
|
+ let school = document.getElementById("school");
|
|
|
+
|
|
|
+ //console.log(school.value)
|
|
|
+
|
|
|
+ /*
|
|
|
+ <option value="1">---请选择---</option>
|
|
|
+ <option value="2">---黑大---</option>
|
|
|
+ <option value="3">---理工---</option>
|
|
|
+ <option value="4">---黑工程---</option>
|
|
|
+ */
|
|
|
+
|
|
|
+ let schoolName = "";
|
|
|
+ if (school.value=="1"){
|
|
|
+ alert("请选择学校")
|
|
|
+ return;
|
|
|
+ }else if(school.value=="2"){
|
|
|
+ schoolName = "黑大"
|
|
|
+ }else if(school.value=="3"){
|
|
|
+ schoolName = "理工"
|
|
|
+ }else if(school.value=="4"){
|
|
|
+ schoolName = "黑工程"
|
|
|
+ }
|
|
|
+
|
|
|
+ let address = document.getElementsByName("address")[0].value;
|
|
|
+ let phone = document.getElementsByName("phone")[0].value;
|
|
|
+
|
|
|
+ //拼接 innerHtml
|
|
|
+
|
|
|
+ let tableElement = document.getElementsByTagName("table")[0];
|
|
|
+
|
|
|
+ let length = tableElement.children.length;
|
|
|
+ //console.log(length)
|
|
|
+
|
|
|
+ //"+(length+1)+"
|
|
|
+
|
|
|
+ let trStr = "<tr>\n" +
|
|
|
+ " <td class='number' >"+(length+1)+"</td>\n" +
|
|
|
+ " <td>"+username+"</td>\n" +
|
|
|
+ " <td>"+password+"</td>\n" +
|
|
|
+ " <td>"+schoolName+"</td>\n" +
|
|
|
+ " <td>"+sexElement+"</td>\n" +
|
|
|
+ " <td>"+address+"</td>\n" +
|
|
|
+ " <td>"+phone+"</td>\n" +
|
|
|
+ " <td>\n" +
|
|
|
+ " <a href=\"#\" class=\"del\" onclick=\"del(this)\" >删除</a>\n" +
|
|
|
+ " <a href=\"#\" class=\"edit\" >修改</a>\n" +
|
|
|
+ " </td>\n" +
|
|
|
+ " </tr>";
|
|
|
+
|
|
|
+ //table添加
|
|
|
+ tableElement.innerHTML += trStr;
|
|
|
+
|
|
|
+ //添加事件
|
|
|
+ addOnClickEvent();
|
|
|
+ }
|
|
|
+
|
|
|
+ document.getElementById("btn").onclick = addUser;
|
|
|
+
|
|
|
+
|
|
|
+ /*
|
|
|
+ 删除
|
|
|
+ */
|
|
|
+ function del(t){
|
|
|
+ //获取父元素
|
|
|
+ //t.parentElement.parentElement.remove();
|
|
|
+ }
|
|
|
+
|
|
|
+ /*
|
|
|
+ 添加之后 清空添加列表
|
|
|
+ */
|
|
|
+
|
|
|
+ /*
|
|
|
+ 修改操作
|
|
|
+
|
|
|
+ 回显 td内容 innerText 文本
|
|
|
+
|
|
|
+ 难点：
|
|
|
+ 单选和多选的回显
|
|
|
+
|
|
|
+ 替换
|
|
|
+ 后者先删除 后添加方式
|
|
|
+
|
|
|
+ */
|
|
|
+
|
|
|
+ /*
|
|
|
+ 添加点击事件
|
|
|
+ */
|
|
|
+ function addOnClickEvent(){
|
|
|
+
|
|
|
+
|
|
|
+ let dels = document.getElementsByClassName("del");
|
|
|
+
|
|
|
+ for (let i = 0; i < dels.length ; i++) {
|
|
|
+ dels[i].onclick = delThis;
|
|
|
+ }
|
|
|
+
|
|
|
+ let edit = document.getElementsByClassName("edit");
|
|
|
+
|
|
|
+ for (let i = 0; i < edit.length ; i++) {
|
|
|
+ edit[i].onclick = editThis;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /*
|
|
|
+ 删除
|
|
|
+ */
|
|
|
+ function delThis(){
|
|
|
+ this.parentElement.parentElement.remove();
|
|
|
+ console.log(this)
|
|
|
+ }
|
|
|
+
|
|
|
+ //修改序号标识
|
|
|
+ let editNumber = 0;
|
|
|
+
|
|
|
+ /*
|
|
|
+ 修改回显
|
|
|
+ */
|
|
|
+ function editThis(){
|
|
|
+ //console.log(this)
|
|
|
+ //获取tr
|
|
|
+ let tr = this.parentElement.parentElement;
|
|
|
+
|
|
|
+ let td1 = tr.children[0].innerText;
|
|
|
+
|
|
|
+ editNumber = td1;
|
|
|
+
|
|
|
+ let td2 = tr.children[1].innerText;
|
|
|
+ let td3 = tr.children[2].innerText;
|
|
|
+ let td4 = tr.children[3].innerText;
|
|
|
+ let td5 = tr.children[4].innerText;
|
|
|
+ let td6 = tr.children[5].innerText;
|
|
|
+ let td7 = tr.children[6].innerText;
|
|
|
+
|
|
|
+
|
|
|
+ //回显
|
|
|
+ document.getElementsByName("username")[0].value = td2;
|
|
|
+ document.getElementsByName("password")[0].value = td3 ;
|
|
|
+
|
|
|
+ //回显学校信息
|
|
|
+ let school = document.getElementById("school");
|
|
|
+
|
|
|
+ let schoolNumber = "";
|
|
|
+ if (td4=="黑大"){
|
|
|
+ schoolNumber="2"
|
|
|
+ }else if(td4=="理工"){
|
|
|
+ schoolNumber = "3"
|
|
|
+ }else if(td4=="黑工程"){
|
|
|
+ schoolNumber = "4"
|
|
|
+ }else{
|
|
|
+ schoolNumber = "1"
|
|
|
+ }
|
|
|
+
|
|
|
+ //获取
|
|
|
+ for (let i = 0; i < school.children.length; i++) {
|
|
|
+ if (school[i].value == schoolNumber){
|
|
|
+ school[i].selected = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //回显性别信息
|
|
|
+ let sex = document.getElementsByName("sex");
|
|
|
+
|
|
|
+ let sexElement = "";
|
|
|
+ //男是1 女是0
|
|
|
+ let s = td5 == "男" ? "1" : 0;
|
|
|
+ console.log(s)
|
|
|
+ for (let i = 0; i < sex.length ; i++) {
|
|
|
+ if (sex[i].value == s){
|
|
|
+ sex[i].checked = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ document.getElementsByName("address")[0].value = td6;
|
|
|
+ document.getElementsByName("phone")[0].value = td7;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //修改保存
|
|
|
+ function editSave(){
|
|
|
+ let td1s = document.getElementsByClassName("number");
|
|
|
+
|
|
|
+ for (let i = 0; i < td1s.length; i++) {
|
|
|
+ if (td1s[i] == editNumber){
|
|
|
+ //构建新tr 替换td1s[i]
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function buildTr(){
|
|
|
+ //获取用户名
|
|
|
+ let username = document.getElementsByName("username")[0].value;
|
|
|
+ let password = document.getElementsByName("password")[0].value;
|
|
|
+ let sex = document.getElementsByName("sex");
|
|
|
+ let sexElement = "";
|
|
|
+ for (let i = 0; i < sex.length ; i++) {
|
|
|
+ if (sex[i].checked){
|
|
|
+ sexElement = sex[i].value == 0 ? "女" : "男";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //获取学校
|
|
|
+ let school = document.getElementById("school");
|
|
|
+ let schoolName = "";
|
|
|
+ if (school.value=="1"){
|
|
|
+ alert("请选择学校")
|
|
|
+ return;
|
|
|
+ }else if(school.value=="2"){
|
|
|
+ schoolName = "黑大"
|
|
|
+ }else if(school.value=="3"){
|
|
|
+ schoolName = "理工"
|
|
|
+ }else if(school.value=="4"){
|
|
|
+ schoolName = "黑工程"
|
|
|
+ }
|
|
|
+
|
|
|
+ let address = document.getElementsByName("address")[0].value;
|
|
|
+ let phone = document.getElementsByName("phone")[0].value;
|
|
|
+
|
|
|
+ //构建tr
|
|
|
+ let tr = document.createElement("tr");
|
|
|
+ tr.append(" <tr>\n" +
|
|
|
+ " <td class=\"number\">1</td>\n" +
|
|
|
+ " <td>张三</td>\n" +
|
|
|
+ " <td>123123</td>\n" +
|
|
|
+ " <td>黑龙江大学</td>\n" +
|
|
|
+ " <td>男</td>\n" +
|
|
|
+ " <td>北京</td>\n" +
|
|
|
+ " <td>15555555555</td>\n" +
|
|
|
+ " <td>\n" +
|
|
|
+ " <a href=\"#\" class=\"del\" onclick=\"del(this)\" >删除</a>\n" +
|
|
|
+ " <a href=\"#\" class=\"edit\" >修改</a>\n" +
|
|
|
+ " </td>\n" +
|
|
|
+ " </tr> ")
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //调用
|
|
|
+ addOnClickEvent()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
xerga