удалить строку в таблице HTML, используя скрытый тип и JavaScript - PullRequest
1 голос
/ 21 мая 2010

У меня есть таблица с HTML, построенная с использованием моего класса сервлета. При попытке удалить строку в этой таблице с помощью функции javascript, я должен сначала поставить разные идентификаторы для отдельных элементов. И я разрешаю его со скрытым типом, например:

retour.append("<td>");
retour.append("<input type=\"hidden\" id=\"id_"+nomTab+"_"+compteur+"\"  value=\""+object.getIdDailyTimeSheet()+"\"/>");
retour.append("<button id=\"del\" name=\"del\"  type=\"button\" onClick=DeleteARow('+id_"+nomTab+"_"+compteur+"')>");
retour.append("<img src=icon_delete.gif />");
retour.append("</button>");
retour.append("</td>");

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

думает.

Ответы [ 4 ]

3 голосов
/ 21 мая 2010
function deleteRow(r)
{
var i = r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}

Вы должны проверить эту страницу дом:

http://www.w3schools.com/js/js_ex_dom.asp

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

2 голосов
/ 21 мая 2010

Я не понимаю, почему вы используете <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(...).

0 голосов
/ 21 мая 2010
function DeleteARow(id) {
    var row = document.getElementById(id);
    if ( row ) {
        row.parentNode.removeChild(row);
    }
}
0 голосов
/ 21 мая 2010

Метод javascript DeleteRow должен иметь код для циклического перемещения по элементу таблицы, определения строки, которую вы хотите удалить, а затем вызова метода удаления объекта документа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...