Created
March 11, 2020 20:43
-
-
Save mustmodify/e6b534cd828e6cd2ba03bd1c9bbf45c5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment