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 addGranteeNameToDisplay()
{
var oCell;
var oRow;
var tbl = document.getElementById( 'granteeNameDisplayTable' );
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.getElementById('granteeLastName').value;
if (name != "" || document.getElementById('granteeFirstName').value
!= '')
{
//if there is a first name, add it with a comma
if( document.getElementById('granteeFirstName').value != '' )
name = name + ', ' +
document.getElementById('granteeFirstName').value;

//add name to hidden value on form
document.getElementById('granteeNames').value = name+'|';
oRow = tbl.insertRow(lastRow);
oCell = oRow.insertCell(0);
var imgAnchor = document.createElement( 'a' );
imgAnchor.onclick = function(){
var names = new Array();

names = document.getElementById('granteeNames').value.split(',');
names.splice( index, 1 );
document.getElementById('granteeNames').value =
names.join('|');
//tbl.deleteRow(lastRow);

removeRowFromTable( 'granteeNameDisplayTable',lastRow);
document.getElementById('granteeLastName').value = '';
document.getElementById('granteeFirstName').value = '';


return;
//addGranteeNameToDisplay();
}
imgAnchor.onmouseover = function(){ return escape( 'Click here to
delete' ) };
imgAnchor.setAttribute( 'href', 'javascript:void(0)' );

var imageNode = document.createElement( 'img' );
imageNode.setAttribute( 'border', 0 );
imageNode.setAttribute( 'src', pathToImages+'delete.gif' );
imageNode.setAttribute( 'width', 15 );
imageNode.setAttribute( 'height', 15 );
imgAnchor.appendChild( imageNode );
oCell.appendChild( imgAnchor );
var oCell2 = oRow.insertCell(1);
var textNode = document.createTextNode(lastRow);

if( name )
textNode.data = name;

oCell2.appendChild( textNode );

document.getElementById('granteeLastName').value = '';
document.getElementById('granteeFirstName').value = '';

}

}


function removeRowFromTable( tableID, index )
{
var tbl = document.getElementById(tableID);
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]

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 addGranteeNameToDisplay()
{

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.getElementById( 'granteeNameDisplayTable' );
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.getElementById('granteeLastName').value;

You make several calls to getElementById for granteeLastName,
granteeFirstName & granteeNames. Why not do it once for each and store
references (e.g. as you've done with tbl)?

if (name != "" || document.getElementById('granteeFirstName').value
!= '')
{
//if there is a first name, add it with a comma
if( document.getElementById('granteeFirstName').value != '' )
name = name + ', ' +
document.getElementById('granteeFirstName').value;

//add name to hidden value on form
document.getElementById('granteeNames').value = name+'|';
oRow = tbl.insertRow(lastRow);
oCell = oRow.insertCell(0);
var imgAnchor = document.createElement( 'a' );
imgAnchor.onclick = function(){
var names = new Array();

Declaring names as an empty array here does nothing of value, just
modify the line below:

names = document.getElementById('granteeNames').value.split(',');

var names = document.getElementById('granteeNames').value.split(',');

names.splice( index, 1 );
document.getElementById('granteeNames').value =
names.join('|');
//tbl.deleteRow(lastRow);

removeRowFromTable( 'granteeNameDisplayTable',lastRow);

You already have a reference to granteeNameDisplayTable 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.getElementById('granteeLastName').value = '';
document.getElementById('granteeFirstName').value = '';


return;
//addGranteeNameToDisplay();
}
imgAnchor.onmouseover = function(){ return escape( 'Click here to
delete' ) }; [...]

}


function removeRowFromTable( tableID, index )
{
var tbl = document.getElementById(tableID);
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.getElementById(tableID);
var txt = document.getElementById(inputID).value;
var oR = tbl.insertRow(-1);
var oC = oR.insertCell(0);
var oA = document.createElement('a');
oA.href = '#';
oA.onclick = function () {delRow(this);return false;};
oA.appendChild(document.createTextNode('delete'));
oC.appendChild(oA);
oC = oR.insertCell(1);
oC.appendChild(document.createTextNode(txt));
}

function delRow(el)
{
while (el.parentNode && 'tr' != el.nodeName.toLowerCase()){
el = el.parentNode;
}
if ('tr' == el.nodeName.toLowerCase()){
el.parentNode.removeChild(el);
}
}

</script>


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

 

[Dr John Stockton]

JRS: In article <[email protected]>,
dated Sun, 19 Feb 2006 15:34:22 remote, seen in

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 <[email protected]> :-
If you want to post a followup via groups.google.com, 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.

 

[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