Добавить / удалить строку из таблицы

19

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

Вот что у меня есть:

Код Javascript

   function deleteRow(row){
      var d = row.parentNode.parentNode.rowIndex;
      document.getElementById('dsTable').deleteRow(d);
   }

HTML-код

<table id = 'dsTable' >
      <tr>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr>
         <td> Spouse </td>
         <td> 1980-22-03 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()" </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)"  </td>
      </tr>
       <tr>
         <td> Child </td>
         <td> 2008-23-06 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()"</td>
         <td>  <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)" </td>
      </tr>
   </table>
    
задан yogsma 05.11.2012 в 22:52
источник
  • @gdoron Возможно, вы захотите посмотреть код HTML; =) onclick="deleteRow (this)" –  Samuel Rossille 05.11.2012 в 22:57
  • @gdoron, что проблема с изменениями; =) –  Samuel Rossille 05.11.2012 в 22:59
  • происходит ли это только после того, как вы добавили строку, используя код JS, а также после первой начальной загрузки страницы? –  Makkes 05.11.2012 в 23:04
  • @Makkes - Это также происходит после первой начальной загрузки страницы. –  yogsma 05.11.2012 в 23:08
  • Я не могу воспроизвести это поведение с помощью кода, который вы опубликовали, ни в Firefox, ни в Chrome. –  Makkes 05.11.2012 в 23:24
Показать остальные комментарии

7 ответов

34

JavaScript с несколькими изменениями:

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

И HTML с небольшой разницей:

<table id="dsTable">
  <tbody>
    <tr>
      <td>Relationship Type</td>
      <td>Date of Birth</td>
      <td>Gender</td>
    </tr>
    <tr>
      <td>Spouse</td>
      <td>1980-22-03</td>
      <td>female</td>
      <td><input type="button" value="Add" onclick="add()"/></td>
      <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
    </tr>
    <tr>
      <td>Child</td>
      <td>2008-23-06</td>
      <td>female</td>
      <td><input type="button" value="Add" onclick="add()"/></td>
      <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
    </tr>
  </tbody>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
    
ответ дан Dan K.K. 13.11.2012 в 02:04
источник
  • jQuery имеет приятную функцию, которая выбирает ближайший элемент для удаления. Это экономит на необходимости жесткого выбора родительского выбора. –  gtcharlie 15.11.2012 в 08:21
  • Также верно, но jQuery является дополнительным 32K кода, даже сжатым и gzipped. –  Dan K.K. 15.11.2012 в 11:41
  • +1 за это. Но вы никогда не должны размещать файл в любом случае. Вы должны использовать CDN от Google для его размещения. Бьюсь об заклад, огромное количество людей, просматривающих Интернет, уже имеют это на своем компьютере с другого сайта, если не от Google. –  gtcharlie 15.11.2012 в 16:34
  • row.parentNode.remove (строка); должен стать row.parentNode.removeChild (строка); –  lostsource 16.11.2012 в 10:50
  • @lostsource, исправлено! Спасибо! –  Dan K.K. 16.11.2012 в 11:05
7

jQuery имеет приятную функцию для удаления элементов из DOM .

Функция closeest () - это классно, потому что она «получит первый элемент, соответствующий селектору, путем тестирования самого элемента и пробирается через своих предков ».

$(this).closest("tr").remove();

Каждая кнопка удаления может запускать этот очень сжатый код с вызовом функции.

    
ответ дан gtcharlie 14.11.2012 в 15:48
источник
  • В дополнение к этому для управления удалением строки jquery также может помочь связать действия вашей строки, поэтому у вас нет навязчивых js-вызовов, и вместо этого вы можете использовать это на своих клавишах class="addDep" (примечание: id не могут использоваться более одного раза), а затем в js do $ ('. addDep'). on ('click', add); и $ ('. deleteDep'). on ('click', deleteRow); –  slawder 15.11.2012 в 17:08
1

Вот код JS Bin , используя jQuery. Протестировано во всех браузерах. Здесь мы должны щелкнуть строки, чтобы удалить их с прекрасным эффектом. Надеюсь, что это поможет.

    
ответ дан palaѕн 19.11.2012 в 08:14
источник
1

Привет, я бы сделал что-то вроде этого:

var id = 4; // inital number of rows plus one
function addRow(){
   // add a new tr with id 
   // increment id;
}

function deleteRow(id){
   $("#" + id).remove();
}

, и у меня будет таблица вроде этого:

<table id = 'dsTable' >
      <tr id=1>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr id=2>
         <td> Spouse </td>
         <td> 1980-22-03 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()" </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(2)"  </td>
      </tr>
       <tr id=3>
         <td> Child </td>
         <td> 2008-23-06 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()"</td>
         <td>  <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(3)" </td>
      </tr>
   </table>

Также, если вы хотите, вы можете создать цикл для создания таблицы. Таким образом, будет легко построить таблицу. То же самое можно сделать при редактировании:)

    
ответ дан Pop Radu 19.11.2012 в 09:09
источник
1

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

HTML:

<table id="dsTable">
  <tr>
     <td> Relationship Type </td>
     <td> Date of Birth </td>
     <td> Gender </td>
  </tr>
  <tr>
     <td> Spouse </td>
     <td> 1980-22-03 </td>
     <td> female </td>
     <td> <input type="button" class="addDep" value="Add"/></td>
     <td> <input type="button" class="deleteDep" value="Delete"/></td>
  </tr>
   <tr>
     <td> Child </td>
     <td> 2008-23-06 </td>
     <td> female </td>
     <td> <input type="button" class="addDep" value="Add"/></td>
     <td> <input type="button" class="deleteDep" value="Delete"/></td>
  </tr>
</table>

JavaScript:

$('body').on('click', 'input.deleteDep', function() {
   $(this).parents('tr').remove();  
});

Помните, что вам нужно ссылаться на jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

Здесь приведен рабочий пример jsfiddle: Ссылка

    
ответ дан Michal B. 19.11.2012 в 15:36
источник
0

Я бы попробовал правильно форматировать таблицу так:

Я не могу не думать, что форматирование таблицы может, по крайней мере, не нанести вреда.

<table>
   <thead>
      <th>Header1</th>
      ......
   </thead>
   <tbody>
       <tr><td>Content1</td>....</tr>
       ......
   </tbody>
</table>
    
ответ дан thatidiotguy 05.11.2012 в 22:55
источник
  • Возможно, вы захотите проверить свой код на наличие ошибок, прежде чем отправлять ответ таким образом. Вы не можете размещать данные внутри <tr> </tr>. Обычно результат заключается в том, что данные заканчиваются, пока они отображаются перед <table>. –  Christian Lundahl 14.11.2012 в 16:08
  • @Perplexor Да да, это глупая синтаксическая ошибка. Его легко критиковать из кресла. –  thatidiotguy 14.11.2012 в 16:17
0

Много хороших ответов, но вот еще один;)

Вы можете добавить обработчик для щелчка по таблице

<table id = 'dsTable' onclick="tableclick(event)">

А затем просто узнайте, какой целью был

function tableclick(e) {
    if(!e)
     e = window.event;

    if(e.target.value == "Delete")
       deleteRow( e.target.parentNode.parentNode.rowIndex );
}

Тогда вам не нужно добавлять обработчики событий для каждой строки, а ваш html выглядит аккуратно. Если вам не нужен javascript в вашем html, вы даже можете добавить обработчик при загрузке страницы:

document.getElementById('dsTable').addEventListener('click',tableclick,false);

Вот рабочий код: Ссылка

    
ответ дан CodeBro 19.11.2012 в 15:19
источник