将删除按钮添加到表格
Posted
技术标签:
【中文标题】将删除按钮添加到表格【英文标题】：Add remove buttons to table 【发布时间】：2018-11-26 03:50:34 【问题描述】：正在为将 Firebase 数据附加到表的类分配作业。我想为每个项目添加一个“X”删除按钮，因为它已添加到表中，但似乎无法使其正常工作。任何建议都会很棒..
database.ref().on("child_added", function(childSnapshot)
var trainName = childSnapshot.val().name;
var destination = childSnapshot.val().place;
var firstTrain = childSnapshot.val().firstTrain;
var trainFreq = childSnapshot.val().frequency;
var firstTimeConverted = moment(firstTrain, "HH:mm").subtract(1, "years");
console.log(firstTimeConverted);
var currentTime = moment();
console.log("CURRENT TIME: " + moment(currentTime).format("HH:mm"));
var diffTime = moment().diff(moment(firstTimeConverted), "minutes");
console.log("DIFFERENCE IN TIME: " + diffTime);
var tRemainder = diffTime % trainFreq;
console.log(tRemainder);
var minsTillTrain = trainFreq - tRemainder;
console.log("MINUTES TILL TRAIN: " + minsTillTrain);
var nextTrain = moment().add(minsTillTrain, "minutes");
console.log("ARRIVAL TIME: " + moment(nextTrain).format("HH:mm"));
var nextTrainFormated = moment(nextTrain).format("HH:mm");
var newTrain = "<tr><td>" + trainName + "</td><td>" + destination + "</td><td>" + trainFreq + "</td><td>" + nextTrainFormated + "</td><td>" + minsTillTrain + "</td></tr>";
$("table tbody").append(newTrain);
);
【问题讨论】：
请张贴您的html 请同时发布应该在单击 X 时调用的函数。 添加了 html 和完整的 javascript 【参考方案1】：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Train Scheduler</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-
FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>
<container>
<div class="jumbotron jumbotron-fluid" id="appHeader">
<div class="container" id="headerContents">
<h1 class="display-4" id="appName">[Railtime]</h1>
<p class="lead">Plan your trip with <i id="rail">rail</i>time updates!</p>
<img src="assets/images/train.png" id="trainImg">
</div>
</div>
<div class="card" style="width: 70rem;" id="scheduleCard">
<div class="card-header" id="scheduleHeader">Current Train Schedule</div>
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Train Name</th>
<th scope="col">Destination</th>
<th scope="col">Frequency (min)</th>
<th scope="col">Next Arrival</th>
<th scope="col">Minutes Away</th>
</tr>
</thead>
<tbody id="schedule">
</tbody>
</table>
</div>
<div class="card" style="width: 70rem;" id="formCard">
<div class="card-header" id="addHeader">Add Train</div>
<form>
<div class="form-group">
<label><b>Train Name</b></label>
<input type="text" class="form-control" id="trainName">
</div>
<div class="form-group">
<label><b>Destination</b></label>
<input type="text" class="form-control" id="destination">
</div>
<div class="form-group">
<label><b>First Train Time (hh:mm - am/pm)</b></label>
<input type="time" class="form-control" id="trainTime">
</div>
<div class="form-group">
<label><b>Frequency (min)</b></label>
<input type="number" class="form-control" id="trainFreq">
</div>
<button type="submit" class="btn" id="submitBtn">Submit</button>
</form>
</div>
<div class="row" id="footer">
<div class="col-12">
<p id="backToTop">Back to top</p>
</div>
</div>
</container>
<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script>
<script type="text/javascript" src="assets/javascript/main.js"></script>
</body>
</html>
【讨论】：
【参考方案2】：$(document).ready(function()
// add remove button feature
// add auto refresh feature
var config =
apiKey: "AIzaSyBsZbpqIkUvURSKGWiukwE7HemufIVurN0",
authDomain: "train-schedule-e2835.firebaseapp.com",
databaseURL: "https://train-schedule-e2835.firebaseio.com",
projectId: "train-schedule-e2835",
storageBucket: "train-schedule-e2835.appspot.com",
messagingSenderId: "551724273577"
;
firebase.initializeApp(config);
var database = firebase.database();
$('#submitBtn').on('click', function(event)
event.preventDefault();
var trainName = $('#trainName').val().trim();
var destination = $('#destination').val().trim();
var firstTrain = $('#trainTime').val().trim();
var trainFreq = $('#trainFreq').val().trim();
var trainUpdate =
name: trainName,
place: destination,
firstTrain: firstTrain,
frequency: trainFreq
database.ref().push(trainUpdate);
$('form')[0].reset();
);
database.ref().on("child_added", function(childSnapshot)
var trainName = childSnapshot.val().name;
var destination = childSnapshot.val().place;
var firstTrain = childSnapshot.val().firstTrain;
var trainFreq = childSnapshot.val().frequency;
var firstTimeConverted = moment(firstTrain, "HH:mm").subtract(1, "years");
console.log(firstTimeConverted);
var currentTime = moment();
console.log("CURRENT TIME: " + moment(currentTime).format("HH:mm"));
var diffTime = moment().diff(moment(firstTimeConverted), "minutes");
console.log("DIFFERENCE IN TIME: " + diffTime);
var tRemainder = diffTime % trainFreq;
console.log(tRemainder);
var minsTillTrain = trainFreq - tRemainder;
console.log("MINUTES TILL TRAIN: " + minsTillTrain);
var nextTrain = moment().add(minsTillTrain, "minutes");
console.log("ARRIVAL TIME: " + moment(nextTrain).format("HH:mm"));
var nextTrainFormated = moment(nextTrain).format("HH:mm");
var newTrain = "<tr><td>" + trainName + "</td><td>" + destination + "</td><td>" + trainFreq + "</td><td>" + nextTrainFormated + "</td><td>" + minsTillTrain + "</td></tr>";
$("table tbody").append(newTrain);
);
$('#backToTop').on('click', function(e)
e.preventDefault();
$('html, body').animate(scrollTop:0, '500');
);
);
【讨论】：
以上是关于将删除按钮添加到表格的主要内容，如果未能解决你的问题，请参考以下文章