使用node和jQuery从Json中删除表行(无数据库)

时间:2017-11-26 16:21:48

标签: javascript jquery json node.js

我试图弄清楚如何在点击删除按钮时从Json数组中删除字段。我对此很陌生,似乎无法弄清楚如何实现这一目标。以下是从JSON文件中提取数据的简单表:

A simple table that pulls the data from a JSON file

以下是代码:

$(".task_box").on("click", function(evt){ 
    $("#task_table").show();
    $.getJSON("db.json", function(data) { 
      $.each(data, function(key,value) {
        console.log("Get Json data worked");
        task = data;
        var row = $('<tr><td>'  + task.box1[0].taskName+ '</td><td>'
                                + task.box1[0].time + '</td><td>'
                                + task.box1[0].location + '</td><td>' + '<button type="button" class="btn btn-warning">Delete</button>')
        $('#task_table').append(row);
  });
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
          <div class="col-lg-12 col-md-12">
            <div class="tasks_list">
                  <table id="task_table" class="tableStyle" >
                      <tr>
                        <th>Task Name</th>
                        <th>Time</th>
                        <th>Location</th>  
                        </tr>
                      </table>
                  </div>
               </div>
        </div>

我需要以某种方式更新和删除节点的表内容,任何人都可以帮助我实现这一目标吗?还有更好的方法来获取我的数组?这对我来说运行得不太好。

我一直在学习Node大约不到一个星期,我真的无法理解这一点。

1 个答案:

答案 0 :(得分:0)

您可以使用类来设置每个按钮,而不是单击每个按钮,然后将事件绑定到表并使用jquery删除最接近的tr。

首先改变:

'<button type="button" class="btn btn-warning">Delete</button>'

'<button type="button" class="btn btn-warning delete">Delete</button>'

然后将其绑定到表

$('table').on('click','tr a.delete',function(e){
  e.preventDefault();
  $(this).closest('tr').remove();
});