如何使用 jquery 编辑数组值？

Question

我正在尝试使用 jquery 编辑数组值。这就是我所做的。

从模式中，每次我单击“添加项目”按钮时，它都会将值推送到数组中，然后将数据附加到表中

var iteminfo = {
    "row": 'row' + cnt,
    "make": make,
    "body": body,
    "cabin": cabin,
    "horsepower": horsepower,
    "wheels": wheels,
    "chassis": chassis,
    "engine": engine,
    "remarks": remarks,
    "shipmenttag": shipmenttag
};
trucksarray.push(iteminfo);


//append to table:
$("#truckstable > tbody").prepend(<tr><td>.....</td></tr>);

我的 html 表格如下所示：

现在我可以使用以下代码从数组中删除表格行和相应的数据：

//removing the table row
$("#truckstable").on('click', '.remrow', function () {
    var id = $(".remrow").attr("id");
    $(this).parent().parent().remove();
    removeitem(id)
});

//removing array item
function removeitem(row) {
    const itemToRemoveIndex = trucksarray.findIndex(function (item) {
        return item.row === row;
    });
    if (itemToRemoveIndex !== -1) {
        trucksarray.splice(itemToRemoveIndex, 1);
    }
    toastr.warning('Item removed!');
}

现在，我的问题是，如果我单击编辑按钮，应该会弹出一个模式并能够编辑选定的项目值、表格数据和数组值？有什么想法吗？

Answer 1

您可以将data-* 提供给您的编辑按钮，即：data-id="row1"..etc 然后单击此按钮获取data-id 值并使用filter 过滤已创建的 JSON 数组仅获取row == data-id 的数据。

现在，一旦你得到数组值，使用.val("yourfromarray") 将这些值放入模态框的输入框中。然后，单击save 按钮从输入框中获取值并循环遍历您的 JSON 数组 并使用新值更新数组的值。最后将这些更新的值添加到 trs 中。

演示代码：

var cnt = 0;
var trucksarray = [];

$('#BtnAddTruck').on('click', function() {
  var make = $('#tmake').val();
  var body = $('#tbody').val();
  var cabin = $('#tcabin').val();
  var horsepower = $('#thorsepower').val();
  var wheels = $('#twheels').val();
  var chassis = $('#tchassis').val();
  var engine = $('#tengine').val();
  var remarks = $('#tremarks').val();
  var shipmenttag = 'Truck';


  cnt = cnt + 1;

  var iteminfo = {
    "row": 'row' + cnt,
    "make": make,
    "body": body,
    "cabin": cabin,
    "horsepower": horsepower,
    "wheels": wheels,
    "chassis": chassis,
    "engine": engine,
    "remarks": remarks,
    "shipmenttag": shipmenttag
  };

  trucksarray.push(iteminfo);
//added here `id` to tr and `data-id` to edit button
  $("#truckstable > tbody").
  prepend("<tr id='trow" + cnt + "'>" +
    "<td>" + make + " " + body + " " + cabin + " " + horsepower + " " + wheels +
    "</td>" +
    "<td>" + chassis + "</td>" +
    "<td>" + engine + "</td>" +
    "<td>" + remarks + "</td>" +
    "<td>" +
    "    <button class='btn-primary edit' data-toggle='modal' data-target='#myModal' data-id='row" + cnt + "'>Edit</button>" +
    "    <button class='remrow btn-danger' id='row" + cnt +
    "'>delete</button>" +
    "</td>" +
    "</tr>"
  );
  //clearmodalinput();
  $(".empty_k input").val("");
  //toastr.info('Item added!');
  console.log(trucksarray)
  
});
var id;//delcare this globally
//on click of edit
$(document).on('click', '.edit', function() {
  id = $(this).data('id');//get id
  console.log(id)
  //filter json array and get value only where match
  var trucks = $(trucksarray)
    .filter(function(i, n) {
      return n.row === id;
    });
    //put value inside input in modal
  $('.make').val(trucks[0].make);
  $('.body').val(trucks[0].body);
  $('.cabin').val(trucks[0].cabin);
  $('.horsepower').val(trucks[0].horsepower);
  $('.wheels').val(trucks[0].wheels);
  $('.chassis').val(trucks[0].chassis);
  $('.engine').val(trucks[0].engine);
  $('.remarks').val(trucks[0].remarks);
});
//click on save button 
$(".save").click(function() {
//loop through array
  $(trucksarray).each(function() {
    if (this.row == id) {
    //creplace value inside array
      this.horsepower = $('.horsepower').val();
      this.make = $('.make').val();
      this.remarks = $('.remarks').val();
      this.engine = $('.engine').val();
      this.chassis = $('.chassis').val();
      this.cabin = $('.cabin').val();
      this.body = $('.body').val();
      this.wheels = $('.wheels').val();

      return false;//got it stop loop 
    }
  });
  replace_values(); //replace table datas
})

function replace_values() {
//get values
  var make = $('.make').val();
  var body = $('.body').val();
  var cabin = $('.cabin').val();
  var horsepower = $('.horsepower').val();
  var wheels = $('.wheels').val();
  var chassis = $('.chassis').val();
  var engine = $('.engine').val();
  var remarks = $('.remarks').val();
  //replace trs values 
  $("#t" + id).html("<td>" + make + " " + body + " " + cabin + " " + horsepower + " " + wheels +
    "</td>" +
    "<td>" + chassis + "</td>" +
    "<td>" + engine + "</td>" +
    "<td>" + remarks + "</td>" +
    "<td>" +
    "    <button class='btn-primary edit' data-toggle='modal' data-target='#myModal' data-id='" + id + "'>Edit</button>" +
    "    <button class='remrow btn-danger' id='" + id +
    "'>delete</button>" +
    "</td>")



}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="empty_k">
<input type="text" id="tmake">
<input type="text" id="tbody">
<input type="text" id="tcabin">
<input type="text" id="thorsepower">
<input type="text" id="twheels">
<input type="text" id="tchassis">
<input type="text" id="tengine">
<input type="text" id="tremarks">
<button id="BtnAddTruck">Add</button>
</div>
<div class="table-responsive">
  <table class="table table-bordered" id="truckstable">
    <thead>
      <tr>
        <th scope="col">Description</th>
        <th scope="col">Chassis</th>
        <th scope="col">Engine</th>
        <th scope="col">Remarks</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</div>

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Edit..</p>
        tmake : <input type="text" class="make"><br/> tbody : <input type="text" class="body"> <br/>tcabin : <input type="text" class="cabin"> <br/>thorsepower :<input type="text" class="horsepower"> <br/>twheels : <input type="text" class="wheels"><br/>        tchassis :
        <input type="text" class="chassis">
        <br/> tengine :<input type="text" class="engine"><br/> tremarks : <input type="text" class="remarks">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default save" data-dismiss="modal">Save</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>