Question

处理将firebase数据附加到表的类的赋值。我想添加一个＆＃39; X＆＃39;删除每个项目的按钮，因为它已添加到表格中，但似乎无法使其生效。任何建议都会很棒..

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);

});

Answer 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" 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>

Answer 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');

});

}）;

向表中添加删除按钮

2 个答案: