Блог

Главная - Вопросы по программированию - Сохранение ввода из модального в одну из трех разных таблиц

Сохранение ввода из модального в одну из трех разных таблиц

#javascript

#javascript

Вопрос:

У меня есть 3 таблицы в div, которые я хочу сделать редактируемыми. Внизу каждой таблицы есть кнопка «добавить», которая открывает модальный (все они открывают один и тот же модальный). У меня есть следующий JS для добавления новых строк:

Как мне заставить JS узнать, в какую из трех таблиц добавить строку? У меня есть три таблицы: acc_table1, acc_table2, acc_table3. Я попробовал «var table = document.getElementById(«acc_table» no);» что не сработало.

   if (tit.innerHTML === "Add Account"){
          var table = document.getElementById("acc_table1");
          var row = table.insertRow(0);
          var cell1 = row.insertCell(0);
          var cell2 = row.insertCell(1);
  cell1.innerHTML = document.getElementById("modal_type").value;
  cell2.innerHTML = document.getElementById("modal_price").value;
}

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

1. в каждой таблице есть кнопка для открытия одного и того же модального. затем нажмите кнопку сохранить идентификатор таблицы в переменной, а затем, когда вы захотите добавить значение в таблицу, используйте эту переменную

2. Я добавил скрытую переменную, которая обновляется при открытии модального с помощью table = e.target.parentElement.parentElement.parentElement; и document.getElementById('table_num').value = table.getAttribute('id'); — это кажется правильным?

3. Я не знаю. У меня нет вашего html, чтобы знать, что такое e.target.parentElement.parentElement.parentElement однако мой ответ ниже не требует скрытого элемента. Я могу дополнительно объяснить свой ответ, если вы не можете понять, как использовать.

Ответ №1:

Вы можете сделать это, учитывая контекст, в котором нажата кнопка. Мы можем использовать Node.previousElementSibling() или Element.closest() для поиска соответствующей таблицы (в зависимости от структуры вашего DOM), в которую должна быть вставлена новая строка. В этом случае вам не нужно будет передавать параметры / аргументы обратному вызову, Что потребует от вас отслеживания новых идентификаторов и т. Д.

Если ваш <button> элемент находится сразу после <table> элемента, то вы можете использовать e.target.previousElementSibling для выбора <table> интересующего элемента, когда событие щелчка запускается на элементе button:

 document.querySelectorAll('.addAccount').forEach(function(el) {
  el.addEventListener('click', function(e) {
    // Table element is immediately before button
    var table = e.target.previousElementSibling;
    
    // Perform sanity check before proceeding
    if (!table || !table.matches('table'))
      return;
    
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = document.getElementById("modal_type").value;
    cell2.innerHTML = document.getElementById("modal_price").value;
  });
});  
 <input type="text" id="modal_type" value="MODAL_TYPE" />
<input type="text" id="modal_price" value="MODAL_PRICE" />

<h1>Table 1</h1>
<table>
  <tbody></tbody>
</table>
<button type="button" class="addAccount">Add account</button>

<h1>Table 2</h1>
<table>
  <tbody></tbody>
</table>
<button type="button" class="addAccount">Add account</button>

<h1>Table 3</h1>
<table>
  <tbody></tbody>
</table>
<button type="button" class="addAccount">Add account</button>

В качестве альтернативы, если ваш <button> элемент заключен в тот же родительский элемент (скажем, <div> элемент), вы можете использовать комбинацию Element.closest() и Element.querySelector() , чтобы найти таблицу в том же родительском элементе. Опять же, идентификатор не требуется, и все основано на контекстной информации из иерархии DOM:

 document.querySelectorAll('.addAccount').forEach(function(el) {
  el.addEventListener('click', function(e) {
    // Table element is immediately before button
    var table = e.target.closest('.wrapper').querySelector('table');

    // Perform sanity check before proceeding
    if (!table)
      return;

    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = document.getElementById("modal_type").value;
    cell2.innerHTML = document.getElementById("modal_price").value;
  });
});  
 <input type="text" id="modal_type" value="MODAL_TYPE" />
<input type="text" id="modal_price" value="MODAL_PRICE" />

<hr />

<div class="wrapper">
  <button type="button" class="addAccount">Add account</button>
  <p>Random text here</p>
  <h1>Table 1</h1>
  <table>
    <tbody></tbody>
  </table>

</div>

<div class="wrapper">
  <h1>Table 2</h1>
  <table>
    <tbody></tbody>
  </table>
  <p>Random text here</p>
  <button type="button" class="addAccount">Add account</button>
</div>

Ответ №2:

Вы можете использовать переменную для хранения нужного идентификатора таблицы, чтобы использовать ее, когда вы хотите сохранить данные в таблице.

Что-то вроде примера ниже

 var tableId = "";
function openModalFunction(selectedTableId){
  tableId = selectedTableId;
}
 
 
function saveDataToTable(){
  var table = document.getElementById(tableId);
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "cell 1";
  cell2.innerHTML = "cell 2";
 }  
 <table id="acc_table1">
<thead><tr><th colspan=2>Table 1</th></tr></thead>
<tfoot>
<tr>
<th colspan=2>
<button onclick="openModalFunction('acc_table1')">table one</button>
</th>
</tr>
</tfoot>
</table>
<hr>
<table id="acc_table2">
<thead><tr><th colspan=2>Table 1</th></tr></thead>
<tfoot>
<tr>
<th colspan=2>
<button onclick="openModalFunction('acc_table2')">table two</button>
</th>
</tr>
</tfoot>
</table>

<hr>

<button onclick="saveDataToTable()">Save</button>