[英]Javascript and CSS Embed into HTML Not Working
我在這里有點新,所以如果我做錯任何事,請糾正我。
基本上,我嘗試創建一個“任務表”,在其中,除了能夠按照他們的同意編輯任務之外,用戶還可以添加更多任務。 我已經編寫了一些表格(並感謝Ash Blue提供了基本模板),但是遇到了一些問題。
首先,如果將鼠標懸停在“停止”或“暫停”按鈕上,您將看到它們左側的按鈕也將起作用。 接下來,“添加任務”和“導出任務”按鈕不起作用。 這是他們應該工作的: CodePen。 最后,我還沒有對此進行編碼,但是額外行上的“開始/時間”時間框需要具有不同的變量,否則,當單擊一行上的開始按鈕時,所有行的所有秒表都會啟動。 抱歉,這還不太清楚,但是如果您聽不清楚,我將嘗試更詳細地說明。
這是當前代碼:
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://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>
<div class="container">
<div id="table" class="table-editable">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<tr>
<th>#</th>
<th>Assignment Name</th>
<th>Start / End</th>
<th>Time Elapsed</th>
<th>Suggested Time</th>
<th>Controls</th>
<th></th>
<th></th>
</tr>
<tr>
<td contenteditable="true">1</td>
<td contenteditable="true">Geometry</td>
<td contenteditable="true">Start / End</td>
<td contenteditable="true">Elapsed</td>
<td contenteditable="true">25 min</td>
<td>
<span class="glyphicon glyphicon-play play">
<span class="
glyphicon glyphicon-pause pause">
<span class="glyphicon glyphicon-stop stop">
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span><span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
</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>
<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;
}
.play {
color: #209E00;
cursor: pointer;
}
.play:hover {
color: #5FCF00;
}
.pause {
color: #F17400;
cursor: pointer;
}
.pause:hover {
color: #FF9E01;
}
.stop {
color: #700;
cursor: pointer;
}
span.stop:hover, span.stop:active {
color: #f00;
}
</style>
如果以后在同一張桌子上確實遇到任何問題,我是否還要發表另一個問題? 還是我應該編輯這篇文章?
您只需要關閉span標簽:
<span class="glyphicon glyphicon-play play"></span>
<span class="glyphicon glyphicon-pause pause"></span>
<span class="glyphicon glyphicon-stop stop"></span>
我認為其他兩個按鈕都工作正常。 可能是您隱藏的tr應該是這個樣子?
<tr class="hide">
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td>
<span class="glyphicon glyphicon-play play"></span>
<span class="glyphicon glyphicon-pause pause"></span>
<span class="glyphicon glyphicon-stop stop"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
</td>
</tr>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.