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

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

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

Код 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>

Ответ 1

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>

Ответ 2

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

Функция closeest() - это классно, потому что она "получит первый элемент, который соответствует селектору, тестируя сам элемент и пересекая его предков" .

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

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

Ответ 3

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

Ответ 4

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

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>

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

Ответ 5

Я предлагаю использовать 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: http://jsfiddle.net/p9dey/1/

Ответ 6

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

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

<table>
   <thead>
      <th>Header1</th>
      ......
   </thead>
   <tbody>
       <tr><td>Content1</td>....</tr>
       ......
   </tbody>
</table>

Ответ 7

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

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

<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);

Вот рабочий код: http://jsfiddle.net/hX4f4/2/