Javascript 结合HTML5、CSS和JS_Javascript_Jquery_Css_Html

Javascript 结合HTML5、CSS和JS

javascript jquery css html

Javascript 结合HTML5、CSS和JS,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我正在尝试将从codepen提取的可编辑css表更改为稍微不同的内容。然而，我很难让HTML5、CSS、JS和JQuery部分正常工作。这是链接：我已将以下代码粘贴到dreamweaver cs6中。基本上，问题是当我打开html文件时，表上没有添加、删除、上下移动和CSS样式。这是一个简单的HTML表，我可以在其中编辑名称，但仅此而已。我假设我只需要打开HTML文件，因为我已经链接了CSS和JS 另外，我正在运行一个本地apache客户端，并从本地主机打开html文件 HTML代码是： &l

我正在尝试将从codepen提取的可编辑css表更改为稍微不同的内容。然而，我很难让HTML5、CSS、JS和JQuery部分正常工作。这是链接：

我已将以下代码粘贴到dreamweaver cs6中。基本上，问题是当我打开html文件时，表上没有添加、删除、上下移动和CSS样式。这是一个简单的HTML表，我可以在其中编辑名称，但仅此而已。我假设我只需要打开HTML文件，因为我已经链接了CSS和JS

另外，我正在运行一个本地apache客户端，并从本地主机打开html文件

HTML代码是：

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

JS代码是：

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

// JavaScript Document

var $TABLE = $('#table');
var $BTN = $('#export-btn');

$('.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);
  });
});

我做错了什么

干杯：）

从您的问题来看，似乎您已经厌倦了从codepen复制代码并创建自己的HTML页面。如果是这种情况，您确定您拥有所有必需资产的副本

在html文件中，jQuery的副本应位于html文件的同一文件夹中

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

另一个JS文件也可能有不正确的文件名“.JS.JS”

<script type="text/javascript" src="jspart.js.js"></script>

要显示箭头，您需要向项目中添加引导图标

你想干什么？你想用这些代码实现什么？分享你得到了什么错误你做错的主要事情是没有解释你想实现什么。“我做错了什么？”-为什么不告诉我们？描述应该发生的事情和实际发生的事情。请参阅道歉，第一次询问堆栈溢出。我应该说得更清楚些。我已经编辑了原始帖子。jQuery文件与HTML文件位于同一文件夹中。我已经更改了文件名，并删除了额外的.cs和.js。我仍然得到一个只有可编辑名称和值的普通HTML页面。您是否通过控制台收到错误消息？（firefox中的F12）好的，我认为您需要在代码中添加引导CSS框架。它似乎是默认添加到codepen中的。我已经编辑了我的答案，将其包括在内。引导组件现在可见。但它们不起作用。