InsertRow() and rowIndex

M

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,index) {
var tbl = doc.getElementById(id);
var cbsHidden = doc.getElementById("cbsTotal");
var rowID = (showRowCell (index)) + 1;
cbsLevel++;
if(id == "cbsBody"){
var newrow = tbl.insertRow(rowID);
alert("check: " + id);
var newcol = newrow.insertCell();
newcol.height = 25;
newcol.bgcolor = "red";
var newdata ="<div align='left'><input name='cbs" + cbsTotal + "
type='text' id='cbs" + cbsTotal + " size='20' maxlength='40'></div>";
newcol.innerHTML = newdata;

var newcol = newrow.insertCell();
newcol.height = 25;
newcol.bgcolor = "green";
var newdata = "<div align='left'><input name='cbs" + cbsTotal + "
type='text' id='cbs" + cbsTotal + " size='20' maxlength='40'></div>";
newcol.innerHTML = newdata;

var newcol = newrow.insertCell();
newcol.height = 25;
newcol.bgcolor = "blue";
var newdata = "<div align='left'><input name='cbs" + cbsTotal + "
type='text' id='cbs" + cbsTotal + " size='20' maxlength='40'></div>";
newcol.innerHTML = newdata;

var newcol = newrow.insertCell();
newcol.height = 25;
newcol.bgcolor = "blue";
var newdata = "<input type='button' name='Add Level' value='Add Level'
onClick='addLevelTo('cbsBody',this);'> <input type='button' name='Add Item'
value='Add Item' onClick='addRowTo('cbsBody');'>";
newcol.innerHTML = newdata;

cbsTotal++;
cbsHidden.value = cbsTotal;
}else{
//do nothing
}
updateRowCounters(tbl);
}
</script>
<script>
//housekeeping functions
function updateRowCounters(form){
var sel1 =form.insertIndex
var sel2 =form.deleteIndex
sel1.options.length =0
sel2.options.length =0
for (var i =0;i <theTableBody.rows.length;i++){
sel1.options [i ] ==new Option(i,i)
sel2.options [i ] ==new Option(i,i)
}
form.removeRowBtn.disabled =(i==0)
}
</script>
<script>
function showRowCell (element) {
var cell, row;
if (element.parentNode) {
do
cell = element.parentNode;
while (cell.tagName.toLowerCase() != 'td')
row = cell.parentNode;
}
else if (element.parentElement) {
do
cell= element.parentElement;
while (cell.tagName.toLowerCase() != 'td')
row = cell.parentElement;
}
return row.rowIndex;
}
</script>
 
D

DU

Marco said:
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.

doc = document;

No need for such variable really.
cbsTotal =0;
cbsLevel =0;
function addLevelTo(id,index) {
var tbl = doc.getElementById(id);
var cbsHidden = doc.getElementById("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(rowID);
alert("check: " + id);
var newcol = newrow.insertCell();

You need to give the index of the cell as a parameter, say like:

var newcol = newrow.insertCell(0);
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016

newcol.height = 25;
newcol.bgcolor = "red";
var newdata ="<div align='left'><input 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 said:
newcol.innerHTML = newdata;

var newcol = newrow.insertCell();
newcol.height = 25;
newcol.bgcolor = "green";
var newdata = "<div align='left'><input 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.getElementById("cbs")
?
newcol.innerHTML = newdata;

var newcol = newrow.insertCell();
newcol.height = 25;
newcol.bgcolor = "blue";
var newdata = "<div align='left'><input name='cbs" + cbsTotal + "
type='text' id='cbs" + cbsTotal + " size='20' maxlength='40'></div>";
newcol.innerHTML = newdata;

var newcol = newrow.insertCell();
newcol.height = 25;
newcol.bgcolor = "blue";
var newdata = "<input type='button' name='Add Level' value='Add Level'
onClick='addLevelTo('cbsBody',this);'> <input type='button' name='Add Item'
value='Add Item' onClick='addRowTo('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.innerHTML = newdata;

cbsTotal++;
cbsHidden.value = cbsTotal;
}else{
//do nothing
}
updateRowCounters(tbl);
}
</script>
<script>
//housekeeping functions
function updateRowCounters(form){
var sel1 =form.insertIndex
var sel2 =form.deleteIndex
sel1.options.length =0
sel2.options.length =0
for (var i =0;i <theTableBody.rows.length;i++){
sel1.options [i ] ==new Option(i,i)
sel2.options [i ] ==new Option(i,i)
}
form.removeRowBtn.disabled =(i==0)

I'm not sure the above instruction will work.
}
</script>
<script>
function showRowCell (element) {
var cell, row;
if (element.parentNode) {
do
cell = element.parentNode;
while (cell.tagName.toLowerCase() != 'td')
row = cell.parentNode;
}
else if (element.parentElement) {

Only MSIE 4 does not support parentNode, so, here I don't see the need
for this else block.
do
cell= element.parentElement;
while (cell.tagName.toLowerCase() != 'td')
row = cell.parentElement;
}
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/doctorunclear/Netscape7/Netscape7Section.html
 
D

DU

Marco said:
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...


<script>
function showRowCell (element) {
var cell, row;
if (element.parentNode) {
do
cell = element.parentNode;
while (cell.tagName.toLowerCase() != 'td')
row = cell.parentNode;
}
else if (element.parentElement) {
do
cell= element.parentElement;
while (cell.tagName.toLowerCase() != 'td')
row = cell.parentElement;
}
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.offsetParent 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/doctorunclear/Netscape7/Netscape7Section.html
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top