Динамически добавлять / редактировать таблицу HTML Строки таблицы - PullRequest
Новая
       9

Динамически добавлять / редактировать таблицу HTML Строки таблицы

0 голосов
/ 30 ноября 2018

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

Здесьмоя текущая таблица, и я хочу создать «расширенный» параметр, который позволяет добавлять другие детали для каждой строки

simple table

Так что, если вы нажмете «расширенный», он будетрасширить до этих функций, а также позволяет добавлять или удалять дополнительные строки

expanded table

Вот код таблицы, к которой я пытаюсь получить расширенное представление: 

<table border="0" align="center" cellpadding="5" cellspacing="0">
  <tbody>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Hourly Rate</th>
      <th>Contract Until</th>
      <th>Advanced Details</th>
    </tr>
    <tr>
      <td bgcolor="#F2F2F2" style="text-align: center">John</td>
      <td bgcolor="#F2F2F2" style="text-align: center">Smith</td>
      <td bgcolor="#F2F2F2" style="text-align: center">$
      <input type="number" name="number57" id="number57"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date" id="date"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button" id="button" value="Advanced"></td>
    </tr>
	      <tr>
      <td bgcolor="#F2F2F2" style="text-align: center">&nbsp;</td>
      <td bgcolor="#F2F2F2" style="text-align: center">
        <label for="select">Project ID:</label>
        <select name="select" id="select">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select></td>
      <td bgcolor="#F2F2F2" style="text-align: center">$
        <input type="number" name="number57" id="number57"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date" id="date"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button" id="button" value="Add"> / 
        <input type="button" name="button4" id="button4" value="Remove"></td>
    </tr>
    <tr>
      <td style="text-align: center">Bob</td>
      <td style="text-align: center">Jones</td>
      <td style="text-align: center">$
      <input type="number" name="number58" id="number58"></td>
      <td style="text-align: center"><input type="date" name="date2" id="date2"></td>
      <td style="text-align: center"><input type="button" name="button2" id="button2" value="Advanced"></td>
    </tr>
    <tr>
      <td bgcolor="#F2F2F2" style="text-align: center">Tom</td>
      <td bgcolor="#F2F2F2" style="text-align: center">Collins</td>
      <td bgcolor="#F2F2F2" style="text-align: center">$
      <input type="number" name="number59" id="number59"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date3" id="date3"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button3" id="button3" value="Advanced"></td>
    </tr>
	  
	  	      <tr>
      <td bgcolor="#F2F2F2" style="text-align: center">&nbsp;</td>
      <td bgcolor="#F2F2F2" style="text-align: center">
        <label for="select">Project ID:</label>
        <select name="select" id="select">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select></td>
      <td bgcolor="#F2F2F2" style="text-align: center">$
        <input type="number" name="number57" id="number57"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date" id="date"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button" id="button" value="Add"> / 
        <input type="button" name="button4" id="button4" value="Remove"></td>
    </tr>
	  	      <tr>
      <td bgcolor="#F2F2F2" style="text-align: center">&nbsp;</td>
      <td bgcolor="#F2F2F2" style="text-align: center">
        <label for="select">Project ID:</label>
        <select name="select" id="select">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select></td>
      <td bgcolor="#F2F2F2" style="text-align: center">$
        <input type="number" name="number57" id="number57"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date" id="date"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button" id="button" value="Add"> / 
        <input type="button" name="button4" id="button4" value="Remove"></td>
    </tr>
    <tr>
      <td style="text-align: center">&nbsp;</td>
      <td style="text-align: center">&nbsp;</td>
      <td style="text-align: center">&nbsp;</td>
      <td style="text-align: center">&nbsp;</td>
      <td style="text-align: center"><input type="submit" name="submit" id="submit" value="Submit"></td>
    </tr>
  </tbody>
</table>

1 Ответ

0 голосов
/ 01 декабря 2018

Трудно предложить совет без некоторого примера кода, но я думаю, что это делает что-то похожее.

https://jsfiddle.net/3gkwoe7j/4/

Одна заметка о динамическом добавлении элементов, к которой нужно прикрепить прослушиватель событийчто-то статичное в DOM, а затем использовать селектор.(Я предполагаю, что вы используете jQuery, поскольку вы отметили его в своем вопросе). Итак, в моем примере: 

$('.table')
    .on('click', 'button.advanced.toggle', function() {
    $(this)
      .text(this.textContent === "LESS" ? "ADVANCED" : "LESS")
      .parents('.person')
        .find('.advanced.section').toggle();
  })

Я привязываю прослушиватель щелчков к .table, а затем фильтрую по селектору button.advanced.toggle.

Надеюсь, это поможет.

...