处理将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);
});
答案 0 :(得分:0)
<!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" alt="train" 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>
答案 1 :(得分:0)
$(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');
});
});