Блог

Главная - Вопросы по программированию - Как отредактировать значение массива с помощью jquery?

Как отредактировать значение массива с помощью jquery?

#html #jquery #html-table

#HTML #jquery #html-таблица

Вопрос:

Я пытаюсь отредактировать значения массива с помощью 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!');
}

Теперь моя проблема в том, что если я нажму кнопку редактирования, модальное окно должно появиться и иметь возможность редактировать выбранное значение элемента, данные таблицы и значения массива? Есть идеи?

Комментарии:

1. Можете ли вы сделать свой код работоспособным с помощью html?

2. посетите jsfiddle.net/jreloz/fjwesx96/1

Ответ №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">amp;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>

Метки: