Добавить/удалить строку из таблицы
У меня есть эта таблица с информацией о зависимых лицах, и есть кнопка добавления и удаления для каждой строки для добавления/удаления дополнительных иждивенцев. Когда я нажимаю кнопку "добавить", в таблицу добавляется новая строка, но когда я нажимаю кнопку "удалить", она сначала удаляет строку заголовка, а затем при последующем нажатии удаляет соответствующую строку.
Вот что у меня есть:
Код 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/