Skip to content

Instantly share code, notes, and snippets.

@mustmodify
Created March 11, 2020 20:43

Revisions

  1. mustmodify created this gist Mar 11, 2020.
    119 changes: 119 additions & 0 deletions gistfile1.txt
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,119 @@
    <HTML>
    <head>
    <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>

    </head>
    <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">Untitled</td>
    <td contenteditable="true">undefined</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>