用js实现类似留言板功能

最新推荐文章于 2023-12-12 14:40:14 发布

前端小灰灰

最新推荐文章于 2023-12-12 14:40:14 发布

阅读量279

点赞数 3

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/dongjianhui15/article/details/130034283

版权

该系统使用HTML和CSS构建用户界面，JavaScript处理数据驱动的交互。用户能添加、查看、删除和修改学生信息。点击‘发布’按钮将学生信息存入数组，列表自动更新。删除和修改功能通过点击按钮触发，修改功能将信息填充到隐藏的输入框，保存时更新数组并刷新列表。

摘要由CSDN通过智能技术生成

html代码

<div id="send">
      <input type="text" name="" id="" />
      <input type="text" name="" id="" />
      <input type="button" name="" id="" value="发布" />
    </div>

    <div id="update" style="display: none">
      <input type="text" name="" id="" />
      <input type="text" name="" id="" />
      <input type="button" name="" id="" value="保存" />
    </div>

    <table class="table table-hover">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td>zhangsan</td>
          <td>19</td>
          <td>
            <button>删除</button>
            <button>修改</button>
          </td>
        </tr> -->
      </tbody>
    </table>

css代码

 // 数据驱动页面

      // 数组存储 页面中要显示的内容
      var stuList = [];
      /* 
        1-发布学生信息 - 点击的按钮的 获取学生信息 创建 obj 添加 stuList--调用列表功能
        2-列表功能    stuList-tr-》tbody
        3-删除功能    点击删除按钮的时候 删除stuList 元素   调用列表功能
        4-修改功能    点击的修改按钮的时候，把要修改的信息 展示到输入框中，
            点击保存 根据输入框的值修改 数组中元素--调用列表功能
      */
      //   1-发布学生信息 - 点击的按钮的 获取学生信息 创建 obj 添加 stuList
      let sendIpts = document.querySelectorAll("#send input");
      sendIpts[2].onclick = function () {
        var stuName = sendIpts[0].value;
        var stuAge = sendIpts[1].value;

        // stuAge: stuAge
        //属性名：变量  变量的值作为属性值
        var obj = { stuAge: stuAge, stuName: stuName };
        stuList.push(obj);

        loadList();

        // /清空输入框
        sendIpts[0].value = "";
        sendIpts[1].value = "";
      };

      // 2-列表功能    stuList-tr-》tbody
      function loadList() {
        var str = "";
        stuList.forEach(function (v, i) {
          str += `<tr>
                    <td>${v.stuName}</td>
                    <td>${v.stuAge}</td>
                    <td>
                        <button onclick="delHandle(${i})">删除</button>
                        <button onclick="updateHandle(${i})">修改</button>
                    </td>
                </tr>`;
        });
        document.querySelector("tbody").innerHTML = str;
      }
      //        3-删除功能    点击删除按钮的时候 删除stuList 元素   调用列表功能
      function delHandle(i) {
        //i 要删除元素的下标
        stuList.splice(i, 1);
        loadList();
      }

      //   4-修改功能    点击的修改按钮的时候，把要修改的信息 展示到输入框中，
      function updateHandle(i) {
        let update = document.querySelector("#update");
        update.style.display = "block";

        //要修改的元素-- i 是他的下标
        var obj = stuList[i];
        console.log(obj);
        //修改的元素 信息 展示到输入框

        var updateIpts = document.querySelectorAll("#update input");
        updateIpts[0].value = obj.stuName;
        updateIpts[1].value = obj.stuAge;

        // 点击保存的时候  获取输入框的值，修改数组中那个元素 obj的属性 ---列表
        updateIpts[2].onclick = function () {
          //获取输入框的值，修改数组中那个元素 obj的属性 ---列表
          obj.stuName = updateIpts[0].value;
          obj.stuAge = updateIpts[1].value;
          loadList();
          update.style.display = "none";
        };
      }

实现的效果就是可以存储学生信息，也可以进行增删改查的操作，和留言板功能类似。