Problem with deleting the last row in a dynamic Javascript table

[JonH]

Ok, I have this dynamically created table in my one of my php forms
that shows the names of the people the user has entered into a text
field. When they hit add a row displays, showing the name they entered.
Also, an image that allows them to delete shows beside the name upon
creation. The delete removes the name from the table and pushes the
other names to the top. Simple stuff, however, if I delete the last
name displayed(the bottom of the table), then the next, then the next,
IN ORDER, I have no problems. If I pick a name that is in the middle or
top of the table, everything below does not allow me to delete

For instance

Enter name (Text field)
BUTTON

X 1
X 2
X 3

If I clicked the x on 3,then 2, then 1...no problems, if i click 2,
then 1, then i cannot delete 3
if I click 1, then i cannot delete 2, or 3

I hope that explains it, Here is my function that does it it feeds off
another function to delete the rows, and I have tried
tbl.DeleteRows( RowIndex) and I have tried lastRow(My tbl length var) by
its self and -1

Please help

function addGranteeNameT oDisplay()
{
var oCell;
var oRow;
var tbl = document.getEle mentById( 'granteeNameDis playTable' );
var lastRow = tbl.rows.length ;
var iteration = lastRow-1;

//Update the 'hidden' value grantorNames so that when the user
//checks out we will have it
var name = document.getEle mentById('grant eeLastName').va lue;
if (name != "" || document.getEle mentById('grant eeFirstName').v alue
!= '')
{
//if there is a first name, add it with a comma
if( document.getEle mentById('grant eeFirstName').v alue != '' )
name = name + ', ' +
document.getEle mentById('grant eeFirstName').v alue;

//add name to hidden value on form
document.getEle mentById('grant eeNames').value = name+'|';
oRow = tbl.insertRow(l astRow);
oCell = oRow.insertCell (0);
var imgAnchor = document.create Element( 'a' );
imgAnchor.oncli ck = function(){
var names = new Array();

names = document.getEle mentById('grant eeNames').value .split(',');
names.splice( index, 1 );
document.getEle mentById('grant eeNames').value =
names.join('|') ;
//tbl.deleteRow(l astRow);

removeRowFromTa ble( 'granteeNameDis playTable',last Row);
document.getEle mentById('grant eeLastName').va lue = '';
document.getEle mentById('grant eeFirstName').v alue = '';
return;
//addGranteeNameT oDisplay();
}
imgAnchor.onmou seover = function(){ return escape( 'Click here to
delete' ) };
imgAnchor.setAt tribute( 'href', 'javascript:voi d(0)' );

var imageNode = document.create Element( 'img' );
imageNode.setAt tribute( 'border', 0 );
imageNode.setAt tribute( 'src', pathToImages+'d elete.gif' );
imageNode.setAt tribute( 'width', 15 );
imageNode.setAt tribute( 'height', 15 );
imgAnchor.appen dChild( imageNode );
oCell.appendChi ld( imgAnchor );
var oCell2 = oRow.insertCell (1);
var textNode = document.create TextNode(lastRo w);

if( name )
textNode.data = name;

oCell2.appendCh ild( textNode );

document.getEle mentById('grant eeLastName').va lue = '';
document.getEle mentById('grant eeFirstName').v alue = '';

}

}
function removeRowFromTa ble( tableID, index )
{
var tbl = document.getEle mentById(tableI D);
var lastRow = tbl.rows.length ;
// add one because index is zero based and number of rows is 1 based
tbl.deleteRow( index );
return;
}

[JonH]

anyone?

[VK]

var lastRow = tbl.rows.length ;
// add one because index is zero based and number of rows is 1 based
tbl.deleteRow( index );

Maybe I'm missing something:- but all arrays and collections in
JavaScript are zero-based. So a table with 3 rows has rows.length = 3
and the last row has index [2]:
rows[0]
rows[1]
rows[2]

[RobG]

JonH wrote:

Ok, I have this dynamically created table in my one of my php forms
that shows the names of the people the user has entered into a text
field. When they hit add a row displays, showing the name they entered.
Also, an image that allows them to delete shows beside the name upon
creation. The delete removes the name from the table and pushes the
other names to the top. Simple stuff, however, if I delete the last
name displayed(the bottom of the table), then the next, then the next,
IN ORDER, I have no problems. If I pick a name that is in the middle or
top of the table, everything below does not allow me to delete

For instance

Enter name (Text field)
BUTTON

X 1
X 2
X 3

If I clicked the x on 3,then 2, then 1...no problems, if i click 2,
then 1, then i cannot delete 3
if I click 1, then i cannot delete 2, or 3

I hope that explains it, Here is my function that does it it feeds off
another function to delete the rows, and I have tried
tbl.DeleteRows( RowIndex) and I have tried lastRow(My tbl length var) by
its self and -1

Please help

function addGranteeNameT oDisplay()
{
Use 2 or 4 spaces for indenting, don't use tabs. It will help to stop
auto-wrapping.

var oCell;
var oRow;
var tbl = document.getEle mentById( 'granteeNameDis playTable' );
var lastRow = tbl.rows.length ;
var iteration = lastRow-1;

//Update the 'hidden' value grantorNames so that when the user
//checks out we will have it
var name = document.getEle mentById('grant eeLastName').va lue;
You make several calls to getElementById for granteeLastName ,
granteeFirstNam e & granteeNames. Why not do it once for each and store
references (e.g. as you've done with tbl)?
if (name != "" || document.getEle mentById('grant eeFirstName').v alue
!= '')
{
//if there is a first name, add it with a comma
if( document.getEle mentById('grant eeFirstName').v alue != '' )
name = name + ', ' +
document.getEle mentById('grant eeFirstName').v alue;

//add name to hidden value on form
document.getEle mentById('grant eeNames').value = name+'|';
oRow = tbl.insertRow(l astRow);
oCell = oRow.insertCell (0);
var imgAnchor = document.create Element( 'a' );
imgAnchor.oncli ck = function(){
var names = new Array();
Declaring names as an empty array here does nothing of value, just
modify the line below:


names = document.getEle mentById('grant eeNames').value .split(',');
var names = document.getEle mentById('grant eeNames').value .split(',');

names.splice( index, 1 );
document.getEle mentById('grant eeNames').value =
names.join('|') ;
//tbl.deleteRow(l astRow);

removeRowFromTa ble( 'granteeNameDis playTable',last Row);
You already have a reference to granteeNameDisp layTable called 'tbl',
why not pass that?

You have initialised 'lastRow' with a value of tbl.rows.length , then
pass that as the index to delete. So the delete function only ever
works if you delete the last row.

document.getEle mentById('grant eeLastName').va lue = '';
document.getEle mentById('grant eeFirstName').v alue = '';
return;
//addGranteeNameT oDisplay();
}
imgAnchor.onmou seover = function(){ return escape( 'Click here to
delete' ) }; [...]
}
function removeRowFromTa ble( tableID, index )
{
var tbl = document.getEle mentById(tableI D);
var lastRow = tbl.rows.length ;
Here you get lastRow, but don't use it. You use the value passed from
the main function, which is tbl.rows.length .
// add one because index is zero based and number of rows is 1 based
tbl.deleteRow( index );
return;
}

Here is a simplified example of what you are trying to do, maybe it will
help:
<script type="text/javascript">

function addName(tableID , inputID)
{
var tbl = document.getEle mentById(tableI D);
var txt = document.getEle mentById(inputI D).value;
var oR = tbl.insertRow(-1);
var oC = oR.insertCell(0 );
var oA = document.create Element('a');
oA.href = '#';
oA.onclick = function () {delRow(this);r eturn false;};
oA.appendChild( document.create TextNode('delet e'));
oC.appendChild( oA);
oC = oR.insertCell(1 );
oC.appendChild( document.create TextNode(txt));
}

function delRow(el)
{
while (el.parentNode && 'tr' != el.nodeName.toL owerCase()){
el = el.parentNode;
}
if ('tr' == el.nodeName.toL owerCase()){
el.parentNode.r emoveChild(el);
}
}

</script>
<table id="namesTable" >
<tr>
<td><input type="text" id="inputName"> </td>
<td><input type="button" value="Add name"
onclick="addNam e('namesTable', 'inputName');"> </td>
</tr>
</table>


--
Rob

[Dr John Stockton]

JRS: In article <11************ *********@g14g2 000cwa.googlegr oups.com>,
dated Sun, 19 Feb 2006 15:34:22 remote, seen in
news:comp.lang. javascript, VK <sc**********@y ahoo.com> posted :

var lastRow = tbl.rows.length ;
...

If you find that, when you start a News reply, Google does not provide
the previous article in quoted form, note what Keith Thompson wrote in
comp.lang.c, message ID <ln************ @nuthaus.mib.or g> :-
If you want to post a followup via groups.google.c om, don't use
the "Reply" link at the bottom of the article. Click on "show
options" at the top of the article, then click on the "Reply" at
the bottom of the article headers.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 MIME ©
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demo n.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.

[JonH]

After a few modifications with the original code I was able to get it
to work. Rob, thank you again for your help, as well as everyone who
replied. I inherited this code with my new job and I had to make
modifications for some users. That, coupled with my lack of overall
knowledge of Javascript made this difficult for me to decipher. Thank
you all again, very much