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

Question

我的目标是让我的表格具有交互性，并且在一个文档中包含所有代码。 我不想在主文档之外引用 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>

Answer 1

需要给标签添加一个函数

<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>

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

问题描述

1 个解决方案

解决方案1
0 2020-03-11 20:59:56

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

问题描述

1 个解决方案

解决方案1 0 2020-03-11 20:59:56

解决方案1
0 2020-03-11 20:59:56