程序员界的彭于晏
2021-09-17 02:36
采纳率: 0%
浏览 24
已结题

关于#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条回答 默认 最新

  • kk1924 2021-09-17 09:09

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

    不是很理解;

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

    打赏 评论

相关推荐 更多相似问题