ansaurus

Question

delete a row in html table using a hidden type and javascript

Answer 1

A:

The DeleteRow javascript method should have code to loop through the Table element, identify the row you want to delete and then invoke the delete method of the document object.

Raj 2010-05-21 14:23:10

Answer 2

+3 A:

function deleteRow(r)
{
var i = r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}

You should check out this dom page:

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

hope this helps.

edl 2010-05-21 14:27:09

exactly the problem is how to get the id wich is r in that case

kawtousse 2010-05-21 14:32:15

You would assign an onclick to the button in the row..onclick="deleteRow(this)"

liquidleaf 2010-05-21 14:49:20

ok it's done thanks.

kawtousse 2010-05-25 02:51:53

Answer 3

A:

function DeleteARow(id) {
    var row = document.getElementById(id);
    if ( row ) {
        row.parentNode.removeChild(row);
    }
}

Josh the Goods 2010-05-21 14:27:10

Answer 4

+2 A:

I don't understand why you're using the <input type="hidden" />. Instead you should use some DOM scripting. (or jQuery)

Here's an example using DOM scripting:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<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>

The idea I'm using here is not to use an identifier on the row; instead use the position of the button to determine which row to delete. You delete the row its in.

Since I define the onclick event handler in my javascript (not in an onclick attribute) the function I used can access the clicked element, using the this keyword. From there, I can start climbing up this.parendNodes all the way to my <tr> element.

You should be able to do the same thing I've done with <input type="button" /> elements with a <button> element.

Alternately you could also use deleteRow(...).

LeguRi 2010-05-21 14:31:48

thinks it is more clear now.i tried it and it works successfully :)

kawtousse 2010-05-21 15:09:11

ansaurus

tags:

views:

answers:

delete a row in html table using a hidden type and javascript

related questions