-4
我試圖將從codepen提取的可編輯css表更改爲有點不同的東西。但是，我無法簡單地獲取HTML5，CSS，JS和JQuery部件。這是鏈接：http://codepen.io/ashblue/pen/mCtuA。結合HTML5，CSS和JS
我已將以下代碼粘貼到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>
的CSS代碼：
@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;
}
而且JS代碼：
// 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);
});
});
我在做什麼錯？
乾杯:)
你想做什麼？你想用這些代碼實現什麼？ – enguerranws 2015-02-23 10:44:09
分享你得到什麼錯誤 – 2015-02-23 10:44:29
你做錯的主要事情並不能解釋你想要達到的目標。 – charliefortune 2015-02-23 10:45:42