Creating Interactive Table - HTML, CSS, JavaScript

Question

My goal is to have my table interactive, and all code within one doc. I don't want to reference JavaScript or CSS outside of the main document, and this may be where my issue is coming from.

It seems like JavaScript isn't working when the buttons are clicked, and I'm not sure what's going on.

Here is my code:

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

Please provide a minimal reproducible example, such that we can observe the behavior. Why are you not using separate files? — Libra
– Libra, Commented Mar 11, 2020 at 19:56
You have your script looking for a table element before there's a table element on the page. Move your script to just before </body> or wrap your code in $(document).ready(function() { ... }); — Heretic Monkey
– Heretic Monkey, Commented Mar 11, 2020 at 19:57
Does this answer your question? why is simple javascript code not running? — Heretic Monkey
– Heretic Monkey, Commented Mar 11, 2020 at 19:59
Yes - I needed to wrap the code in the <script> tag in a function - I'll edit above to show the full working code - Thanks! — Alexis Frisch
– Alexis Frisch, Commented Mar 11, 2020 at 20:57
"My goal is to have ... all code within one doc" just be aware this is considered poor practice. I wouldn't say never do this, but make sure you know why you want to do this. Are you planning on including bootstrap and jquery code in your page? I hope not as that would be a VERY BAD IDEA. If not then you are already importing css and javascript, so why not import some more? — Jon P
– Jon P, Commented Mar 12, 2020 at 2:50

Alexis Frisch · Accepted Answer · 2020-03-11 20:59:56Z

Needed to add a function to the tag

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

Collectives™ on Stack Overflow

Creating Interactive Table - HTML, CSS, JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related