472,978 Members | 1,998 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,978 software developers and data experts.

Problem with deleting the last row in a dynamic Javascript table

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.spli t(',');
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;
}

Feb 17 '06 #1
5 2436
anyone?

Feb 19 '06 #2
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]

Feb 19 '06 #3
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 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.spli t(',');
var names = document.getElementById('granteeNames').value.spli t(',');

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>


--
Rob
Feb 20 '06 #4
JRS: In article <11*********************@g14g2000cwa.googlegroups. com>,
dated Sun, 19 Feb 2006 15:34:22 remote, seen in
news:comp.lang.javascript, VK <sc**********@yahoo.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.org> :-
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.

--
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.demon.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
Feb 20 '06 #5
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

Feb 20 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: AdamG | last post by:
I am trying hard for days now to add and delete rows to a table. I could really use some help... Each row contains two buttons (images) - 'add row' and 'delete row'. When the user clicks add...
6
by: Thomas | last post by:
Hi, I'm having a problem with the dynamically created inputfields in Internet Explorer. The situation is the following: - I have a dynamically created table with a textbox in each Cell. - It...
24
by: Robi | last post by:
I have the following problem: I populate a page with a specific amount of <div id="MyTest"> containers inside another <div> container. for (i=0; i < MyString.length; i++) document.write('<div...
5
by: comshiva | last post by:
Hi all, I have converted my existing ASP.NET project from 1.1 to 2.0 and i have found that everything works fine except the linkbutton control in my datagrid which throws an javascript error when...
7
by: Jon Maz | last post by:
Hi, I have a MySql problem I hope someone can help me with. I'm trying to run an update on a linking table, the update is running into a Primary Key constraint violation, and in my workaround...
1
by: skyson2ye | last post by:
Hi, guys: I have written a piece of code which utilizes Javascript in PHP to create a three level dynamic list box(Country, States/Province, Market). However, I have encountered a strange problem,...
2
by: swethak | last post by:
hi , i write the code in .htm file. It is in cgi-bin/searches/one.htm.In that i write a form submitting and validations.But validations are not worked in that .htm file. I used the same code in my...
3
by: azegurb | last post by:
hi I have just took from internet dinamic table. this table is dynamic and its rows dynamically can be increased. but i would like how create SUM function that automatically sums each added row...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
3
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.