webdesignberlin/complete file.html

## complete file.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Editable Table</title>
<link rel="stylesheet prefetch" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.table-editable {
  position: relative;
}
.table-editable .glyphicon {
  font-size: 20px;
}

.table__remove {
  color: #700;
  cursor: pointer;
}
.table__remove:hover {
  color: #f00;
}

.table__up, .table__down {
  color: #007;
  cursor: pointer;
}
.table__up:hover, .table__down:hover {
  color: #00f;
}

.table__add {
  color: #070;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 0;
}
.table__add:hover {
  color: #0b0;
}

</style>
</head>

<body>

<div class="container">
  <h1>Editable Table</h1>

  <ul>
    <li>An editable table that exports a hash array. Dynamically compiles rows from headers</li>
    <li>Simple / powerful features such as add row, remove row, move row up/down.</li>
  </ul>

  <div id="table" class="table-editable">
    <span class="table__add glyphicon glyphicon-plus"></span>
    <table class="table">
      <tr>
        <th>Name</th>
        <th>Value</th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <td contenteditable="true">Frontend</td>
        <td contenteditable="true">blubb</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>

  <button id="export-btn" class="btn btn-primary">Export Data</button>
  <p id="export"></p>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>-->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>-->
<script>
var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');

$('.table__add').click(function () {
  var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
  $TABLE.find('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; // Don't go above the header
  $row.prev().before($row.get(0));
});

$('.table__down').click(function () {
  var $row = $(this).parents('tr');
  $row.next().after($row.get(0));
});

// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;

$BTN.click(function () {
  var $rows = $TABLE.find('tr:not(:hidden)');
  var headers = [];
  var data = [];

  // Get the headers (add special header logic here)
  $($rows.shift()).find('th:not(:empty)').each(function () {
    headers.push($(this).text().toLowerCase());
  });

  // Turn all existing rows into a loopable array
  $rows.each(function () {
    var $td = $(this).find('td');
    var h = {};

    // Use the headers from earlier to name our hash keys
    headers.forEach(function (header, i) {
      h[header] = $td.eq(i).text();
    });

    data.push(h);
  });

  // Output the result
  $EXPORT.text(JSON.stringify(data));
});
</script>
</body>
</html>

## html.html
<div class="container">
  <h1>Editable Table</h1>

  <ul>
    <li>An editable table that exports a hash array. Dynamically compiles rows from headers</li>
    <li>Simple / powerful features such as add row, remove row, move row up/down.</li>
  </ul>

  <div id="table" class="table-editable">
    <span class="table__add glyphicon glyphicon-plus"></span>
    <table class="table">
      <tr>
        <th>Name</th>
        <th>Value</th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <td contenteditable="true">Frontend</td>
        <td contenteditable="true">blubb</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>

  <button id="export-btn" class="btn btn-primary">Export Data</button>
  <p id="export"></p>
</div>

## js.js
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>-->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>-->
<script>
var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');

$('.table__add').click(function () {
  var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
  $TABLE.find('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; // Don't go above the header
  $row.prev().before($row.get(0));
});

$('.table__down').click(function () {
  var $row = $(this).parents('tr');
  $row.next().after($row.get(0));
});

// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;

$BTN.click(function () {
  var $rows = $TABLE.find('tr:not(:hidden)');
  var headers = [];
  var data = [];

  // Get the headers (add special header logic here)
  $($rows.shift()).find('th:not(:empty)').each(function () {
    headers.push($(this).text().toLowerCase());
  });

  // Turn all existing rows into a loopable array
  $rows.each(function () {
    var $td = $(this).find('td');
    var h = {};

    // Use the headers from earlier to name our hash keys
    headers.forEach(function (header, i) {
      h[header] = $td.eq(i).text();
    });

    data.push(h);
  });

  // Output the result
  $EXPORT.text(JSON.stringify(data));
});
</script>

## scss.scss
.table-editable {
  position: relative;

  .glyphicon {
    font-size: 20px;
  }
}

.table__remove {
  color: #700;
  cursor: pointer;

  &:hover {
    color: #f00;
  }
}

.table__up,
.table__down {
  color: #007;
  cursor: pointer;

  &:hover {
    color: #00f;
  }
}

.table__add {
  color: #070;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 0;

  &:hover {
    color: #0b0;
  }
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Editable Table</title>
	<link rel="stylesheet prefetch" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<style>
	.table-editable {
	position: relative;
	}
	.table-editable .glyphicon {
	font-size: 20px;
	}

	.table__remove {
	color: #700;
	cursor: pointer;
	}
	.table__remove:hover {
	color: #f00;
	}

	.table__up, .table__down {
	color: #007;
	cursor: pointer;
	}
	.table__up:hover, .table__down:hover {
	color: #00f;
	}

	.table__add {
	color: #070;
	cursor: pointer;
	position: absolute;
	top: 8px;
	right: 0;
	}
	.table__add:hover {
	color: #0b0;
	}

	</style>
	</head>

	<body>

	<div class="container">
	<h1>Editable Table</h1>

	<ul>
	<li>An editable table that exports a hash array. Dynamically compiles rows from headers</li>
	<li>Simple / powerful features such as add row, remove row, move row up/down.</li>
	</ul>

	<div id="table" class="table-editable">
	<span class="table__add glyphicon glyphicon-plus"></span>
	<table class="table">
	<tr>
	<th>Name</th>
	<th>Value</th>
	<th></th>
	<th></th>
	</tr>
	<tr>
	<td contenteditable="true">Frontend</td>
	<td contenteditable="true">blubb</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>

	<button id="export-btn" class="btn btn-primary">Export Data</button>
	<p id="export"></p>
	</div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<!--<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>-->
	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	<!--<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>-->
	<script>
	var $TABLE = $('#table');
	var $BTN = $('#export-btn');
	var $EXPORT = $('#export');

	$('.table__add').click(function () {
	var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
	$TABLE.find('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; // Don't go above the header
	$row.prev().before($row.get(0));
	});

	$('.table__down').click(function () {
	var $row = $(this).parents('tr');
	$row.next().after($row.get(0));
	});

	// A few jQuery helpers for exporting only
	jQuery.fn.pop = [].pop;
	jQuery.fn.shift = [].shift;

	$BTN.click(function () {
	var $rows = $TABLE.find('tr:not(:hidden)');
	var headers = [];
	var data = [];

	// Get the headers (add special header logic here)
	$($rows.shift()).find('th:not(:empty)').each(function () {
	headers.push($(this).text().toLowerCase());
	});

	// Turn all existing rows into a loopable array
	$rows.each(function () {
	var $td = $(this).find('td');
	var h = {};

	// Use the headers from earlier to name our hash keys
	headers.forEach(function (header, i) {
	h[header] = $td.eq(i).text();
	});

	data.push(h);
	});

	// Output the result
	$EXPORT.text(JSON.stringify(data));
	});
	</script>
	</body>
	</html>
	.table-editable {
	position: relative;

	.glyphicon {
	font-size: 20px;
	}
	}

	.table__remove {
	color: #700;
	cursor: pointer;

	&:hover {
	color: #f00;
	}
	}

	.table__up,
	.table__down {
	color: #007;
	cursor: pointer;

	&:hover {
	color: #00f;
	}
	}

	.table__add {
	color: #070;
	cursor: pointer;
	position: absolute;
	top: 8px;
	right: 0;

	&:hover {
	color: #0b0;
	}
	}