Combine HTML5, CSS and JS

Question

I'm trying to change an editable css table extracted from codepen to something a little bit different. However, I'm having trouble simply getting the HTML5, CSS, JS and JQuery parts to work. This is the link: http://codepen.io/ashblue/pen/mCtuA.

I have pasted the below codes into dreamweaver cs6. Basically the problem is that when I open up the html file I am unable to use any of the add, remove, move functions. I can only edit the name and value entries and am able to see the boostrap components, but they do not function. I'm assuming I only need to open the HTML file as I've linked the CSS and JS within it.

Also, I'm running a local apache client and opening the html file from local host.

The HTML code is:

<!DOCTYPE html>
<html lang"en">
<head>
    <meta charset="utf-8">
    <title>...</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="csspart.css" />
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="jspart.js"></script>
</head>

<body>
<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>Name</th>
        <th>Value</th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <td contenteditable="true">Stir Fry</td>
        <td contenteditable="true">stir-fry</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>
</body>
</html>

The CSS code is:

@charset "utf-8";
/* CSS Document */

.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;
}

The JS code is:

// JavaScript Document

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));
});

What am I doing wrong?

Cheers :)

Did you include all of the source files? Such as jQuery and underscore.js? — Mark C.
– Mark C., Commented Feb 23, 2015 at 13:05
in your provided url, find JS settings and check used libraries. — ViliusL
– ViliusL, Commented Feb 23, 2015 at 13:10
On codepen. at the top of each language editor => do you see the small Gear icons next to HTML, CSS, and JS? Click those gears and it shows you external files the author is using. In this case, jQuery, bootstrap.js, and underscore.js. Your code is basically HTML that is being manipulated by JavaScript, so if you aren't sure why it isn't working I would include all of the references as you get started. — Mark C.
– Mark C., Commented Feb 23, 2015 at 13:11

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

All your js code, you should wrap it with doc ready block and make sure you have loaded the jQuery library before your js script:

<script src="jquery.min.js"></script>

and in your js file do this:

$(function(){
    // put all your code in here.
});

just noticed:

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery-1.11.2.min.js"></script>

You have referenced different versions of jQuery and you are loading jQuery ui library before the actual jQuery library.

So the suggestion is to remove the older one and use the latest version of jquery and the order should be:

<script src="jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

If you have locally served the jquery library then omit the ver - 1.8.x.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 23, 2015 at 13:05

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vish Over a year ago

That seems to be an accident. Should I remove the first one? Or remove more than one? What should I leave?

Jai Over a year ago

@Vish with your js code seems that you don't need ui library so you can remove it. and if you have jquery library at root of your project then you can use jquery1.11 as you are using.

Jai Over a year ago

@Vish and yet you have to wrap your code within the doc ready block as suggested.

Vish Over a year ago

Cheers, I've changed everything as you've suggested and its working now. Much appreciated

Collectives™ on Stack Overflow

Combine HTML5, CSS and JS

1 Answer 1

just noticed:

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

just noticed:

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related