ASP - NEED YOUR HELP W/ Add/Delete Table Rows

Author

NEED YOUR HELP W/ Add/Delete Table Rows

Karen

2004-03-28, 9:57 pm

Hi there,
Can you please help me with this:
I've been able to insert new cell into my table (using insertcell()).
I always insert new cells at the end of the existing table. At the end
of each row, a delete button is added as well to let the user delete
the corresponding row.

no my question is: how can I resize my table rows so that when the
user clicks on the delete button the right row is sent to my delete
method. Actualy, if the user adds more that one row, deleted row index
are not adjusted if more that row is deleted.

here<s my code:
function InsertNewRow(){

if (document.all)
MyTable= document.all.TblMyTable;
else
MyTable= document.getElementById('TblMyTable');

var row = MyTable.insertRow(MyTable.rows.length);
var Cell1 = row.insertCell(0);
var Cell2 = row.insertCell(1);
var Cell3 = row.insertCell(2);

for (var i= 0; i< MyTable.length; i++)
{

Cell1.innerHTML= '<td>'+ (i+1)+ '</td>';
Cell2.innerHTML= '<><input type="text" name="input1" value=""</td>';
Cell3.innerHTML= '<Td><input type="button"
onClick="DeleteThisRow('+row.rowIndex+');"
name="Delete"value="Delete"</td>';
}
}
function DeleteThisRow(RowIndex)
{
if (document.all)
MyTable= document.all.TblMyTable;
else
MyTable= document.getElementById('TblMyTable');

MyTable.deleteRow(RowIndex);
}

As u see the row index sent to the delete method is right only if it's
the first time deleting row, after 2,3 times it's not the right
one....
Is it possible to do this differently?? is possible to display the
table after deleting the row with the rights rows indexes???

thanks a lot

Karen

2004-03-28, 9:57 pm

can you please please help me out with this???...i'm reposting it just in case...
bambina_carina@yahoo.com (Karen) wrote in message news:<a6feda32.0403171750.55ed4ec7@posting.google.com>...
> Hi there,
> Can you please help me with this:
> I've been able to insert new cell into my table (using insertcell()).
> I always insert new cells at the end of the existing table. At the end
> of each row, a delete button is added as well to let the user delete
> the corresponding row.
>
> no my question is: how can I resize my table rows so that when the
> user clicks on the delete button the right row is sent to my delete
> method. Actualy, if the user adds more that one row, deleted row index
> are not adjusted if more that row is deleted.
>
> here<s my code:
> function InsertNewRow(){
>
> if (document.all)
> MyTable= document.all.TblMyTable;
> else
> MyTable= document.getElementById('TblMyTable');
>
> var row = MyTable.insertRow(MyTable.rows.length);
> var Cell1 = row.insertCell(0);
> var Cell2 = row.insertCell(1);
> var Cell3 = row.insertCell(2);
>
> for (var i= 0; i< MyTable.length; i++)
> {
>
> Cell1.innerHTML= '<td>'+ (i+1)+ '</td>';
> Cell2.innerHTML= '<><input type="text" name="input1" value=""</td>';
> Cell3.innerHTML= '<Td><input type="button"
> onClick="DeleteThisRow('+row.rowIndex+');"
> name="Delete"value="Delete"</td>';
> }
> }
> function DeleteThisRow(RowIndex)
> {
> if (document.all)
> MyTable= document.all.TblMyTable;
> else
> MyTable= document.getElementById('TblMyTable');
>
> MyTable.deleteRow(RowIndex);
> }
>
>
> As u see the row index sent to the delete method is right only if it's
> the first time deleting row, after 2,3 times it's not the right
> one....
> Is it possible to do this differently?? is possible to display the
> table after deleting the row with the rights rows indexes???
>
> thanks a lot

Bob Barrows [MVP]

2004-03-28, 9:57 pm

Karen wrote:
> can you please please help me out with this???...i'm reposting it
You will never get help by reposting the same message without supplying
additional information. One of the reasons people don't reply to a post is
that: given the information supplied in the post, they don't know the
answer. So simply reposting will do nothing to get those people to reply.
You need to look at your post and see if you could maybe supply a little
more information to reel these people in.

For starters, could you tell us what was wrong with Vassiliev's reply?

--
Microsoft MVP -- ASP/ASP.NET
Please reply to the newsgroup. The email account listed in my From
header is my spam trap, so I don't check it very often. You will get a
quicker response by posting to the newsgroup.

Michael Winter

2004-03-28, 9:57 pm

On 17 Mar 2004 17:50:50 -0800, Karen <bambina_carina@yahoo.com> wrote:

> Can you please help me with this:
> I've been able to insert new cell into my table (using insertcell()).
> I always insert new cells at the end of the existing table. At the end
> of each row, a delete button is added as well to let the user delete
> the corresponding row.
>
> no my question is: how can I resize my table rows so that when the
> user clicks on the delete button the right row is sent to my delete
> method. Actualy, if the user adds more that one row, deleted row index
> are not adjusted if more that row is deleted.

The reason I didn't answer this question when I initially read it was
because of the paragraph above (after that, I forgot about the post -
sorry). I don't quite see how resizing the rows relates to deleting. As
for the second sentence, it makes no sense at all. However, I now see what
the problem is. A full solution is included below.

// Ensure that a call to document.getElementById is always meaningful
if( !document.getElementById ) {
if( document.all ) {
document.getElementById = function( id ) {
return document.all[ id ];
}
} else {
document.getElementById = function() {
return null;
}
}
}

// Adds an event listener to the given element (e).
// The type (t) should *not* include the prefix, on. For example, pass
// 'click' not 'onclick'.
// The listener (l) should be a function reference that takes a single
// argument. When called, that argument will be the event object
// associated with the fired event.
function addListener( e, t, l ) {
if( e ) {
if( e.addEventListener ) {
e.addEventListener( t, l, false );
} else if( e.attachEvent ) {
e.attachEvent( 'on' + t, l );
} else {
e[ 'on' + t ] = l;
}
}
}

// Appends a text node with the given value (t) to the element (e).
function appendText( e, t ) {
if( e && e.appendChild && document.createTextNode ) {
var node = document.createTextNode( t );

if( node ) e.appendChild( node );
}
}

function appendRow( tableID ) {
var table = document.getElementById( tableID );

if( table && table.insertRow ) {
var row = table.insertRow( -1 ), cells = [];

if( row ) {
for( var i = 0; i < 2; ++i ) {
cells[ i ] = row.insertCell( -1 );
}
if( cell[ 0 ] && row.rowIndex ) {
appendText( cell[ 0 ], row.rowIndex );
}
if( cells[ 1 ] && cells[ 1 ].appendChild &&
document.createElement ) {
var button = document.createElement('button');

if( button ) {
appendText( button, 'Delete' );
addListener( button, 'click', deleteRow );
cells[ 1 ].appendChild( button );
}
}
}
}
}

// *** WARNING ***
// This function relies on a properly constructed document tree. Make
// sure that the document validates (see http://validator.w3.org/)
// otherwise functionality may be lost.
// *** WARNING ***
function deleteRow( e ) {
var button = null, row = null, section = null;

if( e.target ) {
button = e.target;
} else if( e.srcElement ) {
button = e.srcElement;
}
if( button && button.parentNode && button.parentNode.parentNode ) {
row = button.parentNode.parentNode;

if( row && row.parentNode &&
'undefined' != typeof row.sectionRowIndex ) {
section = row.parentNode;

if( section && section.deleteRow )
section.deleteRow( row.sectionRowIndex );
}
}
}

This has been tested in Opera 7.23, Mozilla 1.6, IE6 SP1.

A demonstration can be see here:

http://www.mlwinter.pwp.blueyonder....laura/rows.html

Notice that I only create two cells. That was because the INPUT element
you inserted always had the same name. As I don't know if that was
intentional or an oversight (and how to correct it), I omitted it. It
should be clear how to change the function, though (ask if you have
problems). Finally, the column "Row number" shows the row number when it
was added (as yours did), not the current index (explained so you don't
think I missed something out).

Hope that helps,
Mike

--
Michael Winter
M.Winter@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

Karen

2004-03-28, 9:57 pm

Well..since i didn't get any answer i assumed that no one saw my post
that's why. As for Vassiliev's reply i just found it out. I didn't see
it before re-posting my question.

Vassiliev thanks, i'll take a look at it and try your suggestion.
"Bob Barrows [MVP]" <reb01501@NOyahoo.SPAMcom> wrote in message news:<#wOTK4bDEHA.3692@tk2msftngp13.phx.gbl>...
> Karen wrote:
> You will never get help by reposting the same message without supplying
> additional information. One of the reasons people don't reply to a post is
> that: given the information supplied in the post, they don't know the
> answer. So simply reposting will do nothing to get those people to reply.
> You need to look at your post and see if you could maybe supply a little
> more information to reel these people in.
>
> For starters, could you tell us what was wrong with Vassiliev's reply?

Karen

2004-03-28, 9:57 pm

THANKS A LOT MICHAEL...
You're code does exactly what i was looking for ...right now i'm
trying to understand it .....
once again thanks and have a nice w

end.

Michael Winter <M.Winter@blueyonder.co.invalid> wrote in message news:<opr44altrn5vklcq@news-text.blueyonder.co.uk>...
> On 17 Mar 2004 17:50:50 -0800, Karen <bambina_carina@yahoo.com> wrote:
>
>
> The reason I didn't answer this question when I initially read it was
> because of the paragraph above (after that, I forgot about the post -
> sorry). I don't quite see how resizing the rows relates to deleting. As
> for the second sentence, it makes no sense at all. However, I now see what
> the problem is. A full solution is included below.
>
> // Ensure that a call to document.getElementById is always meaningful
> if( !document.getElementById ) {
> if( document.all ) {
> document.getElementById = function( id ) {
> return document.all[ id ];
> }
> } else {
> document.getElementById = function() {
> return null;
> }
> }
> }
>
> // Adds an event listener to the given element (e).
> // The type (t) should *not* include the prefix, on. For example, pass
> // 'click' not 'onclick'.
> // The listener (l) should be a function reference that takes a single
> // argument. When called, that argument will be the event object
> // associated with the fired event.
> function addListener( e, t, l ) {
> if( e ) {
> if( e.addEventListener ) {
> e.addEventListener( t, l, false );
> } else if( e.attachEvent ) {
> e.attachEvent( 'on' + t, l );
> } else {
> e[ 'on' + t ] = l;
> }
> }
> }
>
> // Appends a text node with the given value (t) to the element (e).
> function appendText( e, t ) {
> if( e && e.appendChild && document.createTextNode ) {
> var node = document.createTextNode( t );
>
> if( node ) e.appendChild( node );
> }
> }
>
> function appendRow( tableID ) {
> var table = document.getElementById( tableID );
>
> if( table && table.insertRow ) {
> var row = table.insertRow( -1 ), cells = [];
>
> if( row ) {
> for( var i = 0; i < 2; ++i ) {
> cells[ i ] = row.insertCell( -1 );
> }
> if( cell[ 0 ] && row.rowIndex ) {
> appendText( cell[ 0 ], row.rowIndex );
> }
> if( cells[ 1 ] && cells[ 1 ].appendChild &&
> document.createElement ) {
> var button = document.createElement('button');
>
> if( button ) {
> appendText( button, 'Delete' );
> addListener( button, 'click', deleteRow );
> cells[ 1 ].appendChild( button );
> }
> }
> }
> }
> }
>
> // *** WARNING ***
> // This function relies on a properly constructed document tree. Make
> // sure that the document validates (see http://validator.w3.org/)
> // otherwise functionality may be lost.
> // *** WARNING ***
> function deleteRow( e ) {
> var button = null, row = null, section = null;
>
> if( e.target ) {
> button = e.target;
> } else if( e.srcElement ) {
> button = e.srcElement;
> }
> if( button && button.parentNode && button.parentNode.parentNode ) {
> row = button.parentNode.parentNode;
>
> if( row && row.parentNode &&
> 'undefined' != typeof row.sectionRowIndex ) {
> section = row.parentNode;
>
> if( section && section.deleteRow )
> section.deleteRow( row.sectionRowIndex );
> }
> }
> }
>
> This has been tested in Opera 7.23, Mozilla 1.6, IE6 SP1.
>
> A demonstration can be see here:
>
> http://www.mlwinter.pwp.blueyonder....laura/rows.html
>
> Notice that I only create two cells. That was because the INPUT element
> you inserted always had the same name. As I don't know if that was
> intentional or an oversight (and how to correct it), I omitted it. It
> should be clear how to change the function, though (ask if you have
> problems). Finally, the column "Row number" shows the row number when it
> was added (as yours did), not the current index (explained so you don't
> think I missed something out).
>
> Hope that helps,
> Mike

Sponsored Links