个人中心
gpt4 book ai didi

javascript - 创建交互式表格 - HTML、CSS、JavaScript

转载 作者：行者123 更新时间：2023-11-28 03:05:34 25 4
gpt4 key购买 nike

我的目标是让我的表格具有交互性，并且所有代码都在一个文档中。我不想在主文档之外引用 JavaScript 或 CSS，这可能是我的问题的根源。

单击按钮时 JavaScript 似乎不起作用，我不确定发生了什么。

这是我的代码:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>

    <script>

      $(function(){
        var TABLE = $("table");

        $(".table-add").click(function() {
          console.log('adding');

          var clone = TABLE
            .find("tr.hide")
            .clone(true)
            .removeClass("hide table-line");

          TABLE.append(clone);
        });

        $(".table-remove").click(function() {
          $(this)
            .parents("tr")
            .detach();
        });

        $(".table-up").click(function() {
          var $row = $(this).parents("tr");
          if ($row.index() === 1) return;
          $row.prev().before($row.get(0));
        });

        $(".table-down").click(function() {
          var $row = $(this).parents("tr");
          $row.next().after($row.get(0));
        });
      })
    </script>

       <style>
            @import "compass/css3";

                .table-editable {
                  position: relative;

                  .glyphicon {
                    font-size: 20px;
                  }
                }

                .table-remove {
                  color: #700;
                  cursor: pointer;

                }

                .table-up, .table-down {
                  color: #007;
                  cursor: pointer;

                }

                .table-add {
                  color: #070;
                  cursor: pointer;
                  position: absolute;
                  top: 8px;
                  right: 0;
                }
          </style>


  <body>
    <div class="container">
    <h1>HTML5 Editable Table</h1>


    <div id="table" class="table-editable">
      <span class="table-add glyphicon glyphicon-plus"></span>
      <table class="table">
        <tr>
          <th>Outcomes</th>
          <th>Implementation/Sensors</th>
          <th>Alert Type</th>
          <th>Responder/Contact Info</th>
        </tr>
        <tr>
          <td contenteditable="true">Outcome</td>
          <td contenteditable="true">Sensor</td>
          <td contenteditable="true">Alert</td>
          <td contenteditable="true">Contact</td>
          <td>
            <span class="table-remove glyphicon glyphicon-remove"></span>
          </td>
          <td>
            <span class="table-up glyphicon glyphicon-arrow-up"></span>
            <span class="table-down glyphicon glyphicon-arrow-down"></span>
          </td>
        </tr>
        <!-- This is our clonable table line -->
        <tr class="hide">
          <td contenteditable="true">Outcome</td>
          <td contenteditable="true">Sensor</td>
          <td contenteditable="true">Alert</td>
          <td contenteditable="true">Contact</td>
          <td>
            <span class="table-remove glyphicon glyphicon-remove"></span>
          </td>
          <td>
            <span class="table-up glyphicon glyphicon-arrow-up"></span>
            <span class="table-down glyphicon glyphicon-arrow-down"></span>
          </td>
        </tr>
      </table>
    </div>
  </div>

  </body>

最佳答案

需要向标签添加功能

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>

    <script>

      $(function(){
        var TABLE = $("table");

        $(".table-add").click(function() {
          console.log('adding');

          var clone = TABLE
            .find("tr.hide")
            .clone(true)
            .removeClass("hide table-line");

          TABLE.append(clone);
        });

        $(".table-remove").click(function() {
          $(this)
            .parents("tr")
            .detach();
        });

        $(".table-up").click(function() {
          var $row = $(this).parents("tr");
          if ($row.index() === 1) return;
          $row.prev().before($row.get(0));
        });

        $(".table-down").click(function() {
          var $row = $(this).parents("tr");
          $row.next().after($row.get(0));
        });
      })
    </script>

       <style>
            @import "compass/css3";

                .table-editable {
                  position: relative;

                  .glyphicon {
                    font-size: 20px;
                  }
                }

                .table-remove {
                  color: #700;
                  cursor: pointer;

                }

                .table-up, .table-down {
                  color: #007;
                  cursor: pointer;

                }

                .table-add {
                  color: #070;
                  cursor: pointer;
                  position: absolute;
                  top: 8px;
                  right: 0;
                }
          </style>


  <body>
    <div class="container">
    <h1>HTML5 Editable Table</h1>


    <div id="table" class="table-editable">
      <span class="table-add glyphicon glyphicon-plus"></span>
      <table class="table">
        <tr>
          <th>Outcomes</th>
          <th>Implementation/Sensors</th>
          <th>Alert Type</th>
          <th>Responder/Contact Info</th>
        </tr>
        <tr>
          <td contenteditable="true">Outcome</td>
          <td contenteditable="true">Sensor</td>
          <td contenteditable="true">Alert</td>
          <td contenteditable="true">Contact</td>
          <td>
            <span class="table-remove glyphicon glyphicon-remove"></span>
          </td>
          <td>
            <span class="table-up glyphicon glyphicon-arrow-up"></span>
            <span class="table-down glyphicon glyphicon-arrow-down"></span>
          </td>
        </tr>
        <!-- This is our clonable table line -->
        <tr class="hide">
          <td contenteditable="true">Outcome</td>
          <td contenteditable="true">Sensor</td>
          <td contenteditable="true">Alert</td>
          <td contenteditable="true">Contact</td>
          <td>
            <span class="table-remove glyphicon glyphicon-remove"></span>
          </td>
          <td>
            <span class="table-up glyphicon glyphicon-arrow-up"></span>
            <span class="table-down glyphicon glyphicon-arrow-down"></span>
          </td>
        </tr>
      </table>
    </div>
  </div>

  </body>

关于javascript - 创建交互式表格 - HTML、CSS、JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60643587/

25 4 0
文章推荐： javascript - Node/Puppeteer : trying to get all links using selector, 获取结果属性
文章推荐： jquery - 配置jQuery的彩色动画效果
文章推荐： c++ - 在堆上创建的对象不是全局的？
文章推荐： javascript - 使用 NPM glob，如何更改脚本实际所在的目录？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com