A Pen by Mustafa Zidan.

HTML5-Editable-Table.markdown

HTML5 Editable Table

Create and edit an HTML5 table without the use of a library. Uses HTML5's contenteditable and minimal JavaScript.

Forked from Ash Blue's Pen HTML5 Editable Table.

Using Foundation instead of bootstrap

A Pen by Mustafa Zidan on CodePen.

License.

index.html

<div class="container">
  <h1>HTML5 Editable Table</h1>
  <p>Through the powers of <strong>contenteditable</strong> and some simple jQuery you can easily create a custom editable table. No need for a robust JavaScript library anymore these days.</p>
  
  <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 width="4%"></th>
        <th>Name</th>
        <th>Description</th>
        <th width="4%" ></th>
      </tr>
      <tr>
        <td>
          <span class="table-up"> <i class="fa fa-angle-up"></i></span>
          <span class="table-down"><i class="fa fa-angle-down"></i></span>
        </td>
        <td contenteditable="true">Item name</td>
        <td contenteditable="true">Item Description</td>
        <td>
          <span class="table-remove">
            <i class="fa fa-times"></i>
          </span>
        </td>
        
      </tr>
      <!-- This is our clonable table line -->
      <tr class='hide'>
        <td contenteditable="true">Editable Field</td>
        <td contenteditable="true">Editable Field</td>
        <td>
          <span class="table-remove">
            <i class="fa fa-times"></i>
          </span>
        </td>
        <td>
          <span class="table-up"> <i class="fa fa-angle-up"></i></span>
          <span class="table-down"><i class="fa fa-angle-down"></i></span>
        </td>
      </tr>
    </table>
  </div>
  
  <button id="submit-button" class="btn btn-primary">Submit</button>
  <p id="json"></p>
</div>

script.coffee

$TABLE = $("#table")
$BTN = $("#submit-button")
$EXPORT = $("#json")
$(".table-add").click ->
  $clone = $TABLE.find("tr.hide").clone(true).removeClass("hide table-line")
  $TABLE.find("table").append $clone
  return

$(".table-remove").click ->
  $(this).parents("tr").detach()
  return

$(".table-up").click ->
  $row = $(this).parents("tr")
  return  if $row.index() is 1 # Don't go above the header
  $row.prev().before $row.get(0)
  return

$(".table-down").click ->
  $row = $(this).parents("tr")
  $row.next().after $row.get(0)
  return


# A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop
jQuery.fn.shift = [].shift
$BTN.click ->
  $rows = $TABLE.find("tr:not(:hidden)")
  headers = []
  data = []
  
  # Get the headers (add special header logic here)
  $($rows.shift()).find("th:not(:empty)").each ->
    headers.push $(this).text().toLowerCase()
    return

  
  # Turn all existing rows into a loopable array
  $rows.each ->
    $td = $(this).find("td")
    h = {}
    
    # Use the headers from earlier to name our hash keys
    headers.forEach (header, i) ->
      h[header] = $td.eq(i).text()
      return

    data.push h
    return

  
  # Output the result
  $EXPORT.text JSON.stringify(data)
  return

style.scss

.table-editable {
  position: relative;  
}

.table-remove {
  color: #700;
  cursor: pointer;
  text-align: right;
  &: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;
  }
}