InsertRow() and rowIndex

[Marco Alting]

Hi

I'm currently developing a form with a dynamic table. initially the table is
populated with data and at the end of each row there are two buttons:
addLevel and addItem. Each button creates a new row below the row the button
is in. The new row also has these buttons, but when pressing one of these
buttons, nothing happens.
Can someone tell me why?

here's the code to the addLevel button:

<script>
doc = document;
cbsTotal =0;
cbsLevel =0;
function addLevelTo(id,i ndex) {
var tbl = doc.getElementB yId(id);
var cbsHidden = doc.getElementB yId("cbsTotal") ;
var rowID = (showRowCell (index)) + 1;
cbsLevel++;
if(id == "cbsBody"){
var newrow = tbl.insertRow(r owID);
alert("check: " + id);
var newcol = newrow.insertCe ll();
newcol.height = 25;
newcol.bgcolor = "red";
var newdata ="<div align='left'><i nput name='cbs" + cbsTotal + "
type='text' id='cbs" + cbsTotal + " size='20' maxlength='40'> </div>";
newcol.innerHTM L = newdata;

var newcol = newrow.insertCe ll();
newcol.height = 25;
newcol.bgcolor = "green";
var newdata = "<div align='left'><i nput name='cbs" + cbsTotal + "
type='text' id='cbs" + cbsTotal + " size='20' maxlength='40'> </div>";
newcol.innerHTM L = newdata;

var newcol = newrow.insertCe ll();
newcol.height = 25;
newcol.bgcolor = "blue";
var newdata = "<div align='left'><i nput name='cbs" + cbsTotal + "
type='text' id='cbs" + cbsTotal + " size='20' maxlength='40'> </div>";
newcol.innerHTM L = newdata;

var newcol = newrow.insertCe ll();
newcol.height = 25;
newcol.bgcolor = "blue";
var newdata = "<input type='button' name='Add Level' value='Add Level'
onClick='addLev elTo('cbsBody', this);'> <input type='button' name='Add Item'
value='Add Item' onClick='addRow To('cbsBody');' >";
newcol.innerHTM L = newdata;

cbsTotal++;
cbsHidden.value = cbsTotal;
}else{
//do nothing
}
updateRowCounte rs(tbl);
}
</script>
<script>
//housekeeping functions
function updateRowCounte rs(form){
var sel1 =form.insertInd ex
var sel2 =form.deleteInd ex
sel1.options.le ngth =0
sel2.options.le ngth =0
for (var i =0;i <theTableBody.r ows.length;i++) {
sel1.options [i ] ==new Option(i,i)
sel2.options [i ] ==new Option(i,i)
}
form.removeRowB tn.disabled =(i==0)
}
</script>
<script>
function showRowCell (element) {
var cell, row;
if (element.parent Node) {
do
cell = element.parentN ode;
while (cell.tagName.t oLowerCase() != 'td')
row = cell.parentNode ;
}
else if (element.parent Element) {
do
cell= element.parentE lement;
while (cell.tagName.t oLowerCase() != 'td')
row = cell.parentElem ent;
}
return row.rowIndex;
}
</script>

[DU]

Marco Alting wrote:

Hi

I'm currently developing a form with a dynamic table. initially the table is
populated with data and at the end of each row there are two buttons:
addLevel and addItem. Each button creates a new row below the row the button
is in. The new row also has these buttons, but when pressing one of these
buttons, nothing happens.
Can someone tell me why?

Please refer to the thread "InsertCell problems" (august 14th) in this
newsgroup. I'll upload the page I did on this.
Your code is long and would imply a lot of time to examine.
Nevertheless, here are some comments on your code.
here's the code to the addLevel button:

<script>
If you're going to use DOM 2 methods, then best is to make your whole
code comply with W3C markup specs and to validate your markup code. This
is important as it eliminates rendering problems and potential sources
of bugs of all kinds.

<script type="text/javascript">
doc = document;
No need for such variable really.
cbsTotal =0;
cbsLevel =0;
function addLevelTo(id,i ndex) {
var tbl = doc.getElementB yId(id);
var cbsHidden = doc.getElementB yId("cbsTotal") ;
Avoid source of confusion and error: you have a global variable with the
identifier cbsTotal and an id attribute value "cbsTotal". Just by
following better coding practices, you improve readability, successful
debugging with debugger softwares, review by others not familiar with
your code.
var rowID = (showRowCell (index)) + 1;
cbsLevel++;
if(id == "cbsBody"){
var newrow = tbl.insertRow(r owID);
alert("check: " + id);
var newcol = newrow.insertCe ll();
You need to give the index of the cell as a parameter, say like:

var newcol = newrow.insertCe ll(0);
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-68927016

newcol.height = 25;
newcol.bgcolor = "red";
var newdata ="<div align='left'><i nput name='cbs" + cbsTotal + "
type='text' id='cbs" + cbsTotal + " size='20' maxlength='40'> </div>";
I recommend you either use innerHTML everywhere or just use W3C DOM 2
methods everywhere. Don't mix both methods. I personally believe that
DOM 2 methods work better and are more supported for this kind of code.

I wonder why you need a div in that cell. Why the extra node here?
You don't need to defined the horizontal alignment of a div in a ltr
language document. It's already left-aligned in ltr [direction] documents.

When you construct a string, you need to escape occurences of / & and
others. So here, <\/div>
newcol.innerHTM L = newdata;

var newcol = newrow.insertCe ll();
newcol.height = 25;
newcol.bgcolor = "green";
var newdata = "<div align='left'><i nput name='cbs" + cbsTotal + "
type='text' id='cbs" + cbsTotal + " size='20' maxlength='40'> </div>";
2 elements can not have the same id attribute value. At least, you're
going to have problems, bugs when trying to access such element(s).

what should browsers do with a call like:
document.getEle mentById("cbs")
?
newcol.innerHTM L = newdata;

var newcol = newrow.insertCe ll();
newcol.height = 25;
newcol.bgcolor = "blue";
var newdata = "<div align='left'><i nput name='cbs" + cbsTotal + "
type='text' id='cbs" + cbsTotal + " size='20' maxlength='40'> </div>";
newcol.innerHTM L = newdata;

var newcol = newrow.insertCe ll();
newcol.height = 25;
newcol.bgcolor = "blue";
var newdata = "<input type='button' name='Add Level' value='Add Level'
onClick='addLev elTo('cbsBody', this);'> <input type='button' name='Add Item'
value='Add Item' onClick='addRow To('cbsBody');' >";
I'm not sure the event handlers will work. I don't know. But there are
known ways to register events to elements which will work in all
browsers (Opera 7.x, MSIE 6 for windows, NS 7.x and Mozilla-based
browsers) as long as you avoid resorting to constructed strings and
resorting to innerHTML method.
newcol.innerHTM L = newdata;

cbsTotal++;
cbsHidden.value = cbsTotal;
}else{
//do nothing
}
updateRowCounte rs(tbl);
}
</script>
<script>
//housekeeping functions
function updateRowCounte rs(form){
var sel1 =form.insertInd ex
var sel2 =form.deleteInd ex
sel1.options.le ngth =0
sel2.options.le ngth =0
for (var i =0;i <theTableBody.r ows.length;i++) {
sel1.options [i ] ==new Option(i,i)
sel2.options [i ] ==new Option(i,i)
}
form.removeRowB tn.disabled =(i==0)
I'm not sure the above instruction will work.
}
</script>
<script>
function showRowCell (element) {
var cell, row;
if (element.parent Node) {
do
cell = element.parentN ode;
while (cell.tagName.t oLowerCase() != 'td')
row = cell.parentNode ;
}
else if (element.parent Element) {
Only MSIE 4 does not support parentNode, so, here I don't see the need
for this else block.
do
cell= element.parentE lement;
while (cell.tagName.t oLowerCase() != 'td')
row = cell.parentElem ent;
}
return row.rowIndex;
}
</script>

Without seeing the whole code, markup and css code, it's impossible to
suggest more.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunc...e7Section.html

[DU]

Marco Alting wrote:

Wow! That's a whole lot of advice, Thanks!

The only thing is, I put the code in there as a reference, I was still
testing with it. But it can be no excuse for some of the advice you gave
me, so I'll clean up the code as much as possible. The only thing I
wanted to know actually was; how do get the rowIndex of a Javascript
generated table row? But again, all other comments are more than
welcome, since I'm not the Javascript expert...

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

<script>
function showRowCell (element) {
var cell, row;
if (element.parent Node) {
do
cell = element.parentN ode;
while (cell.tagName.t oLowerCase() != 'td')
row = cell.parentNode ;
}
else if (element.parent Element) {
do
cell= element.parentE lement;
while (cell.tagName.t oLowerCase() != 'td')
row = cell.parentElem ent;
}
return row.rowIndex;
}
</script>

I see nothing wrong with the given function. Nevertheless,
- type="text/javascript" is missing
- I would remove the blank space between the function name and fnction
parameters everywhere in your code: the javascript interpreter does that
anyway... so why not do it to save time?
- I would use element.offsetP arent rather because the offsetParent of a
<td> is per definition a <tr>. So if there is a considerable sub-tree of
nodes within a <td>, then the code will bubble up faster (1 iteration in
the do..while loop) within this containment hierarcy to the <td> this
way than by using parentNode.

I might have been able to see what was wrong with a full testpage
though, seeing the html code too.

Thanks for your nice comments: I never get enough of this :)

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunc...e7Section.html

[Marco Alting]

Here's a link to the testpage, maybe you can help me some more with this.
I've tried to implement some of your comments, but it is still not working.

http://www.alting-multimedia.nl/test/test_dyntable.html

Thanks!

"DU" <dr*******@hotR EMOVEmail.com> schreef in bericht
news:bh******** **@news.eusc.in ter.net...

Marco Alting wrote:

Wow! That's a whole lot of advice, Thanks!

The only thing is, I put the code in there as a reference, I was still
testing with it. But it can be no excuse for some of the advice you gave
me, so I'll clean up the code as much as possible. The only thing I
wanted to know actually was; how do get the rowIndex of a Javascript
generated table row? But again, all other comments are more than
welcome, since I'm not the Javascript expert...

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

<script>
function showRowCell (element) {
var cell, row;
if (element.parent Node) {
do
cell = element.parentN ode;
while (cell.tagName.t oLowerCase() != 'td')
row = cell.parentNode ;
}
else if (element.parent Element) {
do
cell= element.parentE lement;
while (cell.tagName.t oLowerCase() != 'td')
row = cell.parentElem ent;
}
return row.rowIndex;
}
</script>

I see nothing wrong with the given function. Nevertheless,
- type="text/javascript" is missing
- I would remove the blank space between the function name and fnction
parameters everywhere in your code: the javascript interpreter does that
anyway... so why not do it to save time?
- I would use element.offsetP arent rather because the offsetParent of a
<td> is per definition a <tr>. So if there is a considerable sub-tree of
nodes within a <td>, then the code will bubble up faster (1 iteration in
the do..while loop) within this containment hierarcy to the <td> this
way than by using parentNode.

I might have been able to see what was wrong with a full testpage
though, seeing the html code too.

Thanks for your nice comments: I never get enough of this :)

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunc...e7Section.html