Блог

Главная - Вопросы по программированию - Как я могу добавлять информацию в разные таблицы только с помощью одной функции?

Как я могу добавлять информацию в разные таблицы только с помощью одной функции?

#javascript #html #jquery #css

Вопрос:

У меня есть 2 таблицы (в будущем я добавлю еще). В обеих таблицах есть кнопка, которая открывает один и тот же модальный режим. Модальный имеет ввод и поле выбора.

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

НО: входные данные теперь добавляются только в первую таблицу (таблица Apple). Я хотел, чтобы, когда я нажимаю кнопку «Нажмите здесь, чтобы запустить модальную»на банановой таблице, информация внутри модальной таблицы добавлялась в банановую таблицу, а не в яблочную таблицу.

Как я могу это сделать? Я хочу добавить больше таблиц в будущем (с той же функцией кнопки, которая открывает тот же модальный режим). Как я могу это сделать, не сообщая своему js-коду точное место, куда он должен добавить информацию?

Может быть, кнопки на столе каким-то образом замечают, на каком столе он был нажат? И поэтому он может автоматически добавлять информацию в правильную таблицу?

Не стесняйтесь запускать код:)

 const modal = document.querySelector(".modal");
const triggers = document.querySelectorAll(".trigger");
const closeButton = document.querySelector(".close");

function toggleModal() {
  modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
  if (event.target === modal) {
    toggleModal();
  }
}
triggers.forEach(function(x) {
  x.addEventListener("click", toggleModal);
});
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);




function add() {
  const inputs = [...document.getElementById('inputs').querySelectorAll("textarea")]; // takes textarea
  const selection = [...document.getElementById('inputs').querySelectorAll("select")]; // takes select

  if (isFormValid(inputs)) {
    const table = document.getElementById('table')
    const newRowIdx = table.rows.length
    const rowId = `row_${newRowIdx}_${Date.now()}`
    const row = table.insertRow(newRowIdx)
    row.id = rowId

    inputs.forEach((input, idx) => { //add cell
      const cell = row.insertCell(idx)
      cell.appendChild(formatInputValue(input))
    })

    selection.forEach((input, idx) => { //add cell
      const cell = row.insertCell(idx)
      cell.appendChild(formatInputValue(input))
    })
  }





  const actionCell = row.insertCell()

  resetInputs(inputs)

}

function formatInputValue(input) {
  return document.createTextNode(input.value)
}


function isFormValid(inputs) {
  return inputs.filter(input => input.value === "").length === 0;
}

function resetInputs(inputs) {
  inputs.forEach(input => input.value = "")
} 
 .modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem 1.5rem;
  width: 24rem;
  border-radius: 0.5rem;
}

.close-button {
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: lightgray;
}

.close-button:hover {
  background-color: darkgray;
}

.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
} 
 <table id="table" border="2" class="fruitTable">
  <tr>
    <th colspan="2">Apple
      <button class="trigger">Click here to trigger the modal!</button></th>
  </tr>
</table>

<table id="table" border="2" class="mitarbeiterTabelle">
  <tr>
    <th colspan="2">Banana
      <button class="trigger">Click here to trigger the modal!</button></th>
  </tr>
</table>


<div id="myModal" class="modal">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close close-button" data-dismiss="modal">amp;times;</button>
      <h4 class="modal-title">Add fruit</h4>
    </div>
    <div class="modal-body">
      <table id="inputs">
        <tr>
          <th><label for="gebaeude-geraete">Choose Fruit:*</label></th>
          <td>
            <select type="text" required>
              <option value="" selected disabled>Fruit</option>
              <option>Fruit 1</option>
              <option>Fruit 2</option>
          </td>
        </tr>
        <tbody>
          <tr>
            <th><label>More information:*</label></th>
            <td><textarea type="text" id="information" placeholder="More details" required></textarea>
          </tr>
        </tbody>
      </table>
      <div>
        <button class="submit" id="button" onclick="add()">Add</button>
      </div>
    </div>
  </div>
</div>

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

1. id должно быть уникальным developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

2. вы имеете в виду часть const table = document.getElementById(«таблица») , верно? Но я не хочу всегда изменять/расширять свой код js при добавлении новой таблицы. Есть ли другой способ?

3. Используйте общий класс для таблиц и повторите цикл document.querySelectorAll('.myTableClass')

4. Вы должны сохранить идентификатор таблицы в переменной при открытии модального, а затем использовать его в getElementById .

Ответ №1:

Вам нужно указать уникальный идентификатор для каждой таблицы, а затем запросить этот идентификатор.

 <table id="table-apples"></table>
<table id="table-bananas"></table>
 
 
let activeTableId = null;

function toggleModal(event) {
  activeTableId = event.target.closest('table').id
  // rest
}

function windowOnClick(event) {
  if (event.target === modal) {
    toggleModal();
    activeTableId = null;
  }
}

function add() {
  const table = document.getElementById(activeTableId);
  // rest
}
Метки: