会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132358个问题
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解 301楼
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解 302楼
JAVA 全系列/第五阶段:JavaWeb开发/Ajax技术详解(旧) 305楼
JAVA 全系列/第五阶段:JavaWeb开发/Ajax技术详解(旧) 306楼
JAVA 全系列/第五阶段:JavaWeb开发/XML技术 308楼
JAVA 全系列/第五阶段:JavaWeb开发/Web实战案例 309楼
JAVA 全系列/第五阶段:JavaWeb开发/XML技术 310楼

image.png

<%--
  Created by IntelliJ IDEA.
  User: CYF
  Date: 2022/8/13
  Time: 7:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script>
      $(function() {
        //初始化用户数据
        getData();
        //添加用户
        $("#add").click(function () {
          addOrUpdateUser("addUser");

        });
        //更新用户
        $("#update").click(function () {
          addOrUpdateUser("updateUser");

        })


        function getData() {
          $.getJSON("user.do", {flag: "getData"}, function (result) {
            listUser(result);

          });
        }

        //获取页面用户输出数据
        function addOrUpdateUser(flag) {
          var userid = $("#id").val();
          var username = $("#username").val();
          var password = $("#password").val();
          var salary = $("#salary").val();
          var birthday = $("#birthday").val();

          var data = {
            userid: userid,
            username: username,
            password: password,
            salary: salary,
            birthday: birthday,
            flag: flag,

          };
          $.get("user.do", data, function (result) {
            alert(result)
            location.reload();
          })
        }

        function preUpdateUser(userid) {
          var arr = new Array();
          //遍历选择行中的用户数据
          $("#" + userid).closest("tr").children().each(function (index, ele) {
            if (index <= 4) {
              arr[index] = ele.innerText;
            }

          })
          //设置编辑区域的用户数据
          $("#id").val(arr[0])
          $("#id").val("readonly", true)
          $("#username").val(arr[1])
          $("#password").val(arr[2])
          $("#salary").val(arr[3])
          $("#birthday").val(arr[4])


        }


        //遍历用户数据,拼接成html
        function listUser(obj) {

          var str = ""
          $.each(obj, function () {
            str += "<tr align='center'>" +
                    "<td id='" + this.id + "'>" + this.id + "</td>" +
                    "<td id='" + this.username + "'>" + this.username + "</td>" +
                    "<td id='" + this.password + "'>" + this.password + "</td>" +
                    "<td id='" + this.salary + "'>" + this.salary + "</td>" +
                    "<td id='" + this.birthday + "'>" + this.birthday + "</td>" +
                    "<td> <a href='#' onclick='preUpdateUser(" + this.id + ")' c>更新</a>&nbsp;&nbsp;<a href='#'>删除</a></td></tr>";
          })
          $("#tBody").prepend(str)

        }
      }


    </script>
  </head>
  <body>
  <div>
    <table align="center" width="60%" border="1">
      <tr>
        <td>ID:</td>
        <td><input type="text" name="id" id="id"/></td>
        <td>姓名:</td>
        <td><input type="text" name="username" id="username"/></td>
        <td>密码:</td>
        <td><input type="text" name="password" id="password"/></td>
      </tr>
      <tr>
        <td>收入:</td>
        <td><input type="text" name="salary" id="salary"/></td>
        <td>出生日期:</td>
        <td><input type="text" name="birthday" id="birthday"/></td>
        <td colspan="2"></td>
      </tr>
      <tr align="center">
        <td colspan="6">
          <input type="button" value="添加用户" id="add" />
          <input type="button" value="更新用户" id="update"/>
        </td>
      </tr>
    </table> <hr/>
    <table align="center" width="60%" bgcolor="" border="1" id="myTable">
      <thead>
      <tr align="center">
        <td>ID</td>
        <td>姓名</td>
        <td>密码</td>
        <td>收入</td>
        <td>生日</td>
        <td>操作</td>
      </tr>
      </thead>
      <tbody id="tBody"></tbody>
    </table>
  </div>
  </body>
</html>

这是什么问题呀

JAVA 全系列/第五阶段:JavaWeb开发/Ajax技术详解(旧) 312楼
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解 313楼
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解 314楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637