Question

我正在创建一个表，我从json文件中获取数据，并为用户提供添加，更新和删除以及搜索选项的选项。表中的每件事情都很好。但它有一些错误，比如当我在表中添加行并单击更新按钮时，它不会更新，而更新按钮的其余部分正在工作。其他的错误是当我在搜索输入中搜索时，我只能搜索输入项目名称，但我想搜索项目名称，地点或时间。以下是我目前的代码。

HTML：

<form>
    <div class="form-group">
        <div class="row">
            <div class="col-md-3 col-sm-3 col-xs-3">
                <input type="text" class="form-control input_style" id="item" placeholder="Enter the Item name">
            </div>
        <div class="col-md-3 col-sm-3 col-xs-3">
           <input type="text" class="form-control input_style" id="place" placeholder="Enter the Place">
        </div>
        <div class="col-md-3 col-sm-3 col-xs-3">
            <input type="text" class="form-control input_style" id="time" placeholder="Enter the time">
        </div>
        <div class="col-md-3 col-sm-3 col-xs-3">
            <button type="button" class="btn btn-primary add-row" value="Add Row"> Add Row</button>
        </div>
    </div>
    </div>
</form>

<table class="table" id="myTable">
    <thead>
        <tr class="header">
          <th>Item</th>
            <th>Place</th>
            <th>Time</th>
            <th>Action</th>
        </tr>
    </thead>
     <tbody></tbody>
</table>

JS文件：

$(document).ready(function () {
var tr;



 //Display table data
for (var i = 0; i < json.length; i++) {
    tr = $('<tr/>');
    tr.append("<td contenteditable='true'>" + json[i].Item + "</td>");
    tr.append("<td contenteditable='false'>" + json[i].Place + "</td>");
    tr.append("<td contenteditable='false'>" + json[i].Time + "</td>");
    tr.append("<td><div class='edit_button' data-value='Update' value='Update' class='edit'>Update</div>  &nbsp;| &nbsp; <span class='delete' value='Delete' onclick='delete_row(this)'>Delete</span></td>");
    $('.table').append(tr);
}

 //add row in table
  $(".add-row").click(function(){
    var item = $("#item").val();
    var place = $("#place").val();
    var time = $("#time").val();
    var markup = "<tr><td>" + item + "</td><td>" + place + "</td><td>" + time + "</td><td><div class='edit_button' value='Update' class='edit'>Update &nbsp;</div> | &nbsp; <span class='delete' value='Delete' onclick='delete_row(this)'>Delete</span></td></tr>";
    if($('#item, #place, #time').val() == ''){
      alert('Input can not be left blank');
    }else{
        $("table tbody").append(markup);
        $('#item, #place, #time').closest('form').find("input[type=text]").val("");
    }
});

//edit row in the table
$('.edit_button').click(function () {
    var $this = $(this);
    var tds = $this.closest('tr').find('td').filter(function() {
        return $(this).find('.edit_button').length === 0;
    });
    if ($this.data('value') === 'Update') {
       $this.data('value', 'Save');
       $this.html('Save');
       tds.prop('contenteditable', true);
       tds.focus();
    } else {
       $this.data('value', 'Update');
       $this.html('Update');
       tds.prop('contenteditable', false);
    }

});
});

请有人告诉我哪里出错了吗？

添加行时不会在表中发生更新（bug）

0 个答案: