我的目标是让我的表格具有交互性，并且所有代码都在一个文档中。我不想在主文档之外引用 JavaScript 或 CSS，这可能是我的问题的根源。
单击按钮时 JavaScript 似乎不起作用，我不确定发生了什么。
这是我的代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
<script>
$(function(){
var TABLE = $("table");
$(".table-add").click(function() {
console.log('adding');
var clone = TABLE
.find("tr.hide")
.clone(true)
.removeClass("hide table-line");
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;
$row.prev().before($row.get(0));
});
$(".table-down").click(function() {
var $row = $(this).parents("tr");
$row.next().after($row.get(0));
});
})
</script>
<style>
@import "compass/css3";
.table-editable {
position: relative;
.glyphicon {
font-size: 20px;
}
}
.table-remove {
color: #700;
cursor: pointer;
}
.table-up, .table-down {
color: #007;
cursor: pointer;
}
.table-add {
color: #070;
cursor: pointer;
position: absolute;
top: 8px;
right: 0;
}
</style>
<body>
<div class="container">
<h1>HTML5 Editable Table</h1>
<div id="table" class="table-editable">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<tr>
<th>Outcomes</th>
<th>Implementation/Sensors</th>
<th>Alert Type</th>
<th>Responder/Contact Info</th>
</tr>
<tr>
<td contenteditable="true">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</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">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</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>
最佳答案
需要向标签添加功能
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
<script>
$(function(){
var TABLE = $("table");
$(".table-add").click(function() {
console.log('adding');
var clone = TABLE
.find("tr.hide")
.clone(true)
.removeClass("hide table-line");
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;
$row.prev().before($row.get(0));
});
$(".table-down").click(function() {
var $row = $(this).parents("tr");
$row.next().after($row.get(0));
});
})
</script>
<style>
@import "compass/css3";
.table-editable {
position: relative;
.glyphicon {
font-size: 20px;
}
}
.table-remove {
color: #700;
cursor: pointer;
}
.table-up, .table-down {
color: #007;
cursor: pointer;
}
.table-add {
color: #070;
cursor: pointer;
position: absolute;
top: 8px;
right: 0;
}
</style>
<body>
<div class="container">
<h1>HTML5 Editable Table</h1>
<div id="table" class="table-editable">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<tr>
<th>Outcomes</th>
<th>Implementation/Sensors</th>
<th>Alert Type</th>
<th>Responder/Contact Info</th>
</tr>
<tr>
<td contenteditable="true">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</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">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</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>
关于javascript - 创建交互式表格 - HTML、CSS、JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60643587/