一个简单的基于jQuery的留言板

最新推荐文章于 2024-04-19 17:05:38 发布

宝儿呀

最新推荐文章于 2024-04-19 17:05:38 发布

阅读量544

点赞数 1

本文链接：https://blog.csdn.net/fengya1112/article/details/118879561

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #input {
        width: 500px !important;
        display: inline;
      }
      li {
        list-style: none;
        background-color: lightblue;
        width: 500px;
        height: 30px;
        line-height: 30px;
        margin-bottom: 20px;
      }
      .box {
        width: 800px;
        margin: 0 auto;
      }

      a {
        text-decoration: none;
        color: lightcoral;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <input
        type="text"
        name=""
        id="input"
        placeholder="请输入要留言的内容"
        class="form-control"
      />
      <button class="btn btn-success">确定</button>
      <ul></ul>
      <input type="checkbox" name="" class="chkAll" />全选
      <a href="#" class="delchk">删除已选</a>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $(function () {
        $('button').click(function () {
          let value = $('input').val();
          let html = `
          <li>
            <input type="checkbox" class="chk">${value} <a href="javascript:" class="edit">编辑</a>    <a href='javascript:' class="del">删除</a>
            </li>
          `;
          $('ul').append(html);
          $('input').val('');
        });
        $('ul').on('click', 'li .del', function () {
          console.log(1);
          $(this).parents('li').remove();
        });
        $('ul').on('click', 'li .edit', function () {
          $(this).parents('li').html(`

            <input type="text" name="" id="" placeholder="请输入要留言的内容" />
            `);
          $('input').keydown(function (e) {
            if (e.keyCode === 13) {
              $(this)
                .parents('li')
                .html(
                  `
                <input type="checkbox" class="chk">${$(this).val()}
                <a href="javascript:" class="edit">编辑</a>    <a href='javascript:' class="del">删除</a>
                `
                );
            }
          });
        });
        $('.chkAll').click(function () {
          $('.chk').prop('checked', $(this).prop('checked'));
          console.log($(this).prop('checked'));
        });
        $('.delchk').click(function () {
          $('input:checked').parents('li').remove();
        });
      });
    </script>
  </body>
</html>

宝儿呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
一个简单的基于jQuery的留言板

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
复制链接

扫一扫