mustmodify · March 11, 2020 20:43
diff --git a/gistfile1.txt b/gistfile1.txt
 <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>
	<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>