deleteRow isn't affecting table

[jamescostello]

The code below is part of a script that is imported by a webpage. I am
trying to modify a table on that webpage using this code. I can't
modify the actual webpage itself.
I would like to simply delete the last row from the table. After doing
the deleteRow method below, the outerHTML that is displayed in the
alert no longer contains the last row.
However, the actual row is still displayed on the webpage.

if(window.name == 'menuBar')
{
window.attachEvent("onload", navOnLoad);
}

function navOnLoad()
{
if (event.returnValue != false) {
var menuTable = document.getElementById("subnewAct");
var campResRow = document.getElementById("mnu_item_campaignact");

if(menuTable != null && campResRow != null)
{
linkIndex = campResRow.rowIndex;
document.all.subnewAct.deleteRow(linkIndex);
alert(document.all.subnewAct.outerHTML);
}
}
}

 

[RobG]

The code below is part of a script that is imported by a webpage. I am
trying to modify a table on that webpage using this code. I can't
modify the actual webpage itself.
I would like to simply delete the last row from the table. After doing
the deleteRow method below, the outerHTML that is displayed in the
alert no longer contains the last row.
However, the actual row is still displayed on the webpage.

if(window.name == 'menuBar')
{
window.attachEvent("onload", navOnLoad);

If you want this to work only in IE and are happy for other browsers to
throw errors, then the above is OK. To make it cross-browser, search
the archives for (W3C compliant) addEventListner and (IE's) attachEvent.

}

function navOnLoad()
{
if (event.returnValue != false) {

What is the purpose of this? It always returns false for me.

It is another IE-ism that doesn't seem to do anything useful. The
function will be called when the load event occurs (provided scripting
is enabled of course). The above makes subsequent script dependent on
support for IE's non-standard event model and will likely cause other
browsers to terminate the script.

var menuTable = document.getElementById("subnewAct");
var campResRow = document.getElementById("mnu_item_campaignact");

if(menuTable != null && campResRow != null)
{
linkIndex = campResRow.rowIndex;

Presumably "mnu_item_campaignact" is the id of a row in a table
somewhere and you would like to remove a row from another table that has
the same row index.

It might be handy to keep linkIndex local unless you have a good reason
for it to be global.

var linkIndex = campResRow.rowIndex;

document.all.subnewAct.deleteRow(linkIndex);

Here you require support for document.all, that is likely to fail in a
good majority of browsers, particularly if you are using HTML 4 strict.
You've already used getElementById to assign a reference to the table
with id subnewAct to menuTable, why not use it again?

It is safer to test that a row exists at linkIndex before trying to
deleted it:

if (menuTable.rows.length > linkIndex) {
menuTable.deleteRow(linkIndex);
}

If the requirement is just to delete the last row of menuTable, why not:

var t = menuTable.rows.length;
if (t){
menuTable.deleteRow(t - 1);
}

alert(document.all.subnewAct.outerHTML);

Presumably that is just for debug, it will work in IE but not too many
other browsers.

 

[grokcore]

I've found the only reliable way to do this (for me) is to go

tableOb=document.getElementById('theTable');
rowOb=tableOb.rows[tableOb.length];
tableOb.removeChild(rowOb);

(or is that rowOb=tableOb.rows[tableOb.length-1]; ?)

had a similar issue with a drag and drop table rows system..
document.body.removeChild(rowOb); might be more reliable? these things
are quirky

 

[Richard Cornford]

I've found the only reliable way to do this (for me)
is to go

tableOb=document.getElementById('theTable');
rowOb=tableOb.rows[tableOb.length];
tableOb.removeChild(rowOb);

A TR element is never a child of a TABLE element in an HTML DOM (and
only sometimes in an XHTML DOM). In HTML they may only be children of
table section elements (TBODY, THEAD and TFOOT).

(or is that rowOb=tableOb.rows[tableOb.length-1]; ?)

If the preceding code is what you find "the only reliable way", why do
you ask the question? But yes, - tableOb.rows[tableOb.length] - will
refer to an undefined value in (beyond) the - rows - collection.

had a similar issue with a drag and drop table rows system..
document.body.removeChild(rowOb); might be more reliable?

A TR element will never be a child of a BODY element.

these things are quirky

Things will certainly seem quirky if you are operating entirely on the
basis of guess-work.

Richard.

 

[RobG]

(e-mail address removed) wrote:

Please quote what you are replying to, trim what you aren't.

I've found the only reliable way to do this (for me) is to go

tableOb=document.getElementById('theTable');
rowOb=tableOb.rows[tableOb.length];
tableOb.removeChild(rowOb);

That won't work because tableOb.rows[tableOb.length] will always be one
greater than the highest index, i.e. the index of the last row. The
indexes start at zero, for a table with 3 rows the highest index will be
2 (the rows have indexes: 0, 1, 2).

(or is that rowOb=tableOb.rows[tableOb.length-1]; ?)

As per my earlier reply: if menuTable is a reference to a table, to
remove the last row:

var t = menuTable.rows.length;
if (t){
menuTable.deleteRow(t - 1);
}

That uses the table's rows collection which contains all the rows in the
table. If you have a thead or tfoot, you may not wish to remove rows
from them so you'll need to use the tbody element and delete rows from
that. thead, tfoot and tboby elements all have a rows collection, they
implement the HTMLTableSection interface:

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67417573>

If you have thead and tfoot elements, you may wish to use the table's
tbodys collection to get a reference to the last tbody, then remove the
last row from that. If you have multiple tbodys, you'll need a bit more
cleverness again.

had a similar issue with a drag and drop table rows system..
document.body.removeChild(rowOb); might be more reliable? these things
are quirky

Not really. removeChild will only work for the (direct) children of a
node - it is intended as a general way of removing child nodes from an
element. It works with documents that implement the core DOM
interfaces, such as HTML and XML documents:

<URL:http://www.w3.org/TR/DOM-Level-2-Core/>


deleteRow belongs to the HTML table and table section interfaces, which
are specific to HTML-based documents and are intended to provide quicker
ways of dealing with HTML 4 and XHTML 1.0 DOM objects:

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/>


A TR can't be a child of a body element, it must be a child of a table
section element - a thead, tfoot or tbody. If you don't explicitly code
a tbody element in your table, one will be inserted by the browser - the
tags are optional in the HTML source but a tbody element is mandatory in
the generated DOM. HTML 4 references:

HTML row groups (thead, tfood, tbody)
<URL:http://www.w3.org/TR/html4/struct/tables.html#edef-TBODY>

HTML table
<URL:http://www.w3.org/TR/html4/struct/tables.html#edef-TABLE>