略懂前端 2021-09-17 02:36 采纳率: 0%
浏览 36
已结题

关于#javascript，jQuery#的问题：删除之前必须刷新页面，否则删除键不起作用


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./jquery.min.js"></script>
  </head>

  <body>
    <!-- 发布留言并存储到本地
    要求1：点击提交按钮，让用户输入的内容分别加入到表格对应的列表中
    要求2：点击每一行的删除按钮，能删除当前行
    要求3：刷新页面时能保留当前的页面效果（数据状态不会消失）
    要求4：代码规范 -->
    <div style="margin-bottom: 15px">
      <input type="text" id="username" placeholder="请输入姓名" />
      <input type="text" id="age" placeholder="请输入性别" />
      <input type="text" id="sex" placeholder="请输入年龄" />
      <input type="button" value="提交" id="btn" />
    </div>
    <table border="1" width="540">
      <thead>
        <tr>
          <td>姓名</td>
          <td>性别</td>
          <td>年龄</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      // 要求1：点击提交按钮，让用户输入的内容分别加入到表格对应的列表中
      var list = [];
      getList();
      $("#btn").on("click", function () {
        // 判断输入框是否有只有空格
        if (
          $("#username").val().trim() !== "" &&
          $("#age").val().trim() !== "" &&
          $("#sex").val().trim() !== ""
        ) {
          // 向数组中追加最新数据
          list.push({
            username: $("#username").val(),
            age: $("#age").val(),
            sex: $("#sex").val(),
          });
          // 追加完数据，清空输入框
          $("#username").val("");
          $("#age").val("");
          $("#sex").val("");
          // 将数组中的数据转为字符串形式并存在本地
          localStorage.setItem("lc_list", JSON.stringify(list));
          getList();
        } else {
          alert("请补充");
        }
      });
   
      // 封装数据展示函数
      function getList() {
        // 获取存在本地的字符串数据存给 l_list
        var l_list = localStorage.getItem("lc_list");
        // 将字符串转为数组形式,也可以和上面合并一步完成
        list = JSON.parse(l_list);
        // 每次展示数据时,先清空原有的数据
        $("tbody").empty();
        // 将数组中数据渲染到页面展示
        for (var i = 0; i < list.length; i++) {
          var tr = $(
            "<tr><td>" +
              list[i].username +
              "</td><td>" +
              list[i].age +
              "</td><td>" +
              list[i].sex +
              '</td><td class="dlt">' +
              "删除" +
              "</td></tr>"
          );
          $("tbody").append(tr);
        }
      }
      // 点击删除按钮,对应内容删除
      $(".dlt").on("click", function () {
        // 获取点击按键所对应的序号
        var n = $(this).parent().index();
        // 删除对应的数据
        list.splice(n, 1);
        // 重新获取数组存储本地
        localStorage.setItem("lc_list", JSON.stringify(list));
        // 将本地数据显示
        getList();
      });
    </script>
  </body>
</html>
  • 写回答

1条回答 默认 最新

  • 普通网友 2021-09-17 09:09
    关注

    你说的不起作用是指怎样？

    不是很理解；

    常规来说， 你给button 设置了监听事件，那么就会响应。
    怎么会无效呢？

    评论

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 9月24日
  • 创建了问题 9月17日

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！