Я не понимаю, почему вы используете <input type="hidden" />
. Вместо этого вы должны использовать некоторые сценарии DOM. (или jQuery)
Вот пример использования сценариев DOM:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Delete a Row Example</title>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
var table = document.getElementById("the-table");
var buttons = table.getElementsByTagName("input"); // all the <input /> elements which were in the table
for(var i=0; i<buttons.length; i++) { // loop all over the <input /> elements in the table
if(buttons[i].name=="delete-this-row") { // if they are marked as "delete this row" inputs...
buttons[i].onclick = function() { // give them onclick even handlers
var buttonCell = this.parentNode; // now buttonCell is the <td> which contains the <input />
var deleteThisRow = buttonCell.parentNode; // now deleteThisRow is the row we want to delete
deleteThisRow.parentNode.removeChild(deleteThisRow);
}
}
}
}
//]]>
</script>
</head>
<body>
<table id="the-table">
<tbody>
<tr>
<td>0,0</td>
<td>1,0</td>
<td>2,0</td>
<td><input type="button" name="delete-this-row" value="Delete This Row" /></td>
</tr>
<tr>
<td>0,1</td>
<td>1,1</td>
<td>2,1</td>
<td><input type="button" name="delete-this-row" value="Delete This Row" /></td>
</tr>
<tr>
<td>0,2</td>
<td>1,2</td>
<td>2,2</td>
<td><input type="button" name="delete-this-row" value="Delete This Row" /></td>
</tr>
</tbody>
</table>
</body>
</html>
Идея, которую я здесь использую, заключается не в том, чтобы использовать идентификатор в строке; вместо этого используйте положение кнопки, чтобы определить, какую строку удалить. Вы удаляете строку в.
Так как я определяю обработчик событий onclick
в своем javascript (не в атрибуте onclick
), функция, которую я использовал, может получить доступ к элементу clicked, используя ключевое слово this
. Оттуда я могу начать подниматься на this.parendNode
s до моего элемента <tr>
.
Вы должны быть в состоянии сделать то же, что я делал с элементами <input type="button" />
с элементом <button>
.
Также вы можете использовать deleteRow(...)
.