将删除按钮添加到表格

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

);

);

【讨论】:

以上是关于将删除按钮添加到表格的主要内容,如果未能解决你的问题,请参考以下文章

协助表格添加行中的值并使用按钮删除它们。使用 jQuery

表视图,如何将删除按钮放在前面?

从 Tableview 的第 0 部分中删除按钮

从数据库 Django 向表中添加删除原始按钮

将按钮数组添加到适当的表格行

如何将按钮样式的单元格添加到 iPhone 应用程序的表格视图中?