Add remove buttons to table

Question

Working on an assignment for class that appends firebase data to a table. I'd like to add an 'X' delete button to each item as it is added to the table but can't seem to get it to work. Any suggestions would be great..

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

});

});

Add remove buttons to table

Question

2 answers

solution1
0 2018-06-16 17:43:25

solution2
0 2018-06-16 17:47:15

Add remove buttons to table

Question

2 answers

solution1 0 2018-06-16 17:43:25

solution2 0 2018-06-16 17:47:15

solution1
0 2018-06-16 17:43:25

solution2
0 2018-06-16 17:47:15