Delete multiple rows from a table 1

[Goosey84]

Hi All,

I know if I do the following it deletes the row "Remove row" but what I don't know is how I delete the 4 rows above aswell

<table>
            <tr>
                <td>header 1</td>
                <td>answer 1</td>
            </tr>
            <tr>
                <td>header 2</td>
                <td>answer 2</td>
            </tr>
            <tr>
                <td>header 3</td>
                <td>answer 3</td>
            </tr>
            <tr>
                <td>header 4</td>
                <td>answer 4</td>
            </tr>
            <tr>
                <td colspan="2"><a class='link' href='#' onclick='myfun(this)'>Remove Rows</a></td>
            </tr>
            <tr>
                <td>header 5</td>
                <td>answer 5</td>
            </tr>
            <tr>
                <td>header 6</td>
                <td>answer 6</td>
            </tr>
            <tr>
                <td>header 7</td>
                <td>answer 7</td>
            </tr>
            <tr>
                <td>header 8</td>
                <td>answer 8</td>
            </tr>
            <tr>
                <td colspan="2"><a class='link' href='#' onclick='myfun(this)'>Remove Rows</a></td>
            </tr>
            <tr>
                <td>header 9</td>
                <td>answer 9</td>
            </tr>
            <tr>
                <td>header 10</td>
                <td>answer 10</td>
            </tr>
            <tr>
                <td>header 11</td>
                <td>answer 11</td>
            </tr>
            <tr>
                <td>header 12</td>
                <td>answer 12</td>
            </tr>
            <tr>
                <td colspan="2"><a class='link' href='#' onclick='myfun(this)'>Remove Rows</a></td>
            </tr>
        </table>
<script>
function myfun(eleme)
{eleme.parentNode.removeChild(eleme);}
</script>

 

[feherke]

Hi

I know if I do the following it deletes the row "Remove row"

Wrong. In your [tt]function[/tt] [tt]this[/tt] refers to the [tt]a[/tt] element and only that is removed. The [tt]tr[/tt] and [tt]td[/tt] elements are still there, but as the cell remains without content, it collapses. Turn the borders on to see it better.

I would give an [tt]id[/tt] for the [tt]table[/tt], let us say "tab", then would modify the [tt]function[/tt] like this :

[b]function[/b] myfun(eleme)
{
  [b]var[/b] tr=eleme.parentNode
  [b]while[/b] (tr!=null && tr.nodeName.toLowerCase()!=[i]'tr'[/i]) tr=tr.parentNode
  [b]if[/b] (tr==null) [b]return[/b]
  [b]var[/b] ord=tr.sectionRowIndex
  [b]var[/b] tab=document.getElementById([i]'tab'[/i])
  [b]for[/b] ([b]var[/b] i=ord;i>=ord-4;i--) [b]if[/b] (i>=0 && i<tab.rows.length) tab.deleteRow(i)
}

Feherke.

http://rootshell.be/~feherke/

 

[Goosey84]

Ah I see now. Thanks alot thats exactly what I wanted