Multiple tables on one page

[JiaPei Jen]

I finally made "add rows to a table" and "delete current row of the table" JavaScript work.

However, I have a number of tables within one single web page and "the" JavaScript feature must apply to every one of those tables.

I found that the JavaScript (see below) works only for the "last" table in that page. For example; say, I have Tables A (with its "id") and B (with its "id"). If I put the JavaScript for Table A only, everything works as expected. Thereafter, I modify the JavaScript wherever different name applies to Table B and add the script to my file. Everything works as expected for Table B but things stop working for Table A (there is no response at all when I click on the ADD button for Table A).

Please help for I can not figure out the problem. Thank you.

var OPTICS_ROW_BASE = 1; // first number (for display)
var opticsHasLoaded = false;
 
window."on_load"=fillInOpticsRows;
 
function fillInOpticsRows()
{
opticsHasLoaded = true;
}
 
function opticsRowObjects(blkColmn1, element1, blkColmn2, element2)
{
this.blkColmn1 = blkColmn1; // text object
this.element1 = element1; // input text object
this.blkColmn2 = blkColmn2; // text object
this.element2 = element2; // input text object
}
 
/*
 * addRowToOpticsTable
 * Inserts at row 'num', or appends to the end if no arguments are passed in. Don't pass in empty strings.
 */
function addRowToOpticsTable(num)
{
if (opticsHasLoaded) {
var tbl = document.getElementById('opticsTable');
var nextRow = tbl.tBodies[0].rows.length;
var iteration = nextRow + OPTICS_ROW_BASE;
if (num == null) {
num = nextRow;
} else {
iteration = num + OPTICS_ROW_BASE;
}
 
// add the row
var row = tbl.tBodies[0].insertRow(num);
 
// cell 0 - blank
// cell 0 is colmn0
var cell0 = row.insertCell(0);
var colmn0 = document.createTextNode('');
 
cell0.appendChild(colmn0);
 
// cell 1 - blank
// cell 1 is colmn1
var cell1 = row.insertCell(1);
var colmn1 = document.createTextNode('');
 
cell1.appendChild(colmn1);
 
// cell 2 - blank
// cell 2 is colmn2
var cell2 = row.insertCell(2);
var colmn2 = document.createTextNode('');
 
cell2.appendChild(colmn2);
 
 
// cell 3 - input field
// cell 3 is colmn3 and it is MAKE
var cell3 = row.insertCell(3);
var colmn3 = document.createElement('input');
colmn3.setAttribute('type', 'text');
colmn3.setAttribute('name', 'reqOpticsMake' + iteration);
colmn3.setAttribute('maxlength', '5');
colmn3.setAttribute('className', 'inputMake');
cell3.appendChild(colmn3);
 
                                .......
                                .......
 
// cell 15 - input button
var cell15 = row.insertCell(15);
var delBtn = document.createElement('input');
delBtn.setAttribute('type', 'button');
delBtn.setAttribute('value', 'DEL');
delBtn.setAttribute('className', 'AddDelButton');
delBtn."on_click" = function () {deleteCurrentOpticsRow(this)};
cell15.appendChild(delBtn);
 
                                .......
                                .......
 
// Pass in the elements you want to reference later
// Store the theRow object in each row
row.theRow = new opticsRowObjects(colmn0, colmn1, colmn2, colmn3);
 
}
}
 
// If there isn't an element with an "on_click" event in your row, then this function can't be used.
function deleteCurrentOpticsRow(obj)
{
if (opticsHasLoaded) {
var delRow = obj.parentNode.parentNode;
var tbl = delRow.parentNode.parentNode;
var rIndex = delRow.sectionRowIndex;
var rowArray = new Array(delRow);
deleteOpticsRows(rowArray);
reorderOpticsRows(tbl, rIndex);
}
}
 
function reorderOpticsRows(tbl, startingIndex)
{
if (opticsHasLoaded) {
if (tbl.tBodies[0].rows[startingIndex]) {
var count = startingIndex + OPTICS_ROW_BASE;
for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++) {
 
// CONFIG: next line is affected by rowObjects settings
// tbl.tBodies[0].rows[i].theRow.blkColmn1.data = count; // text
 
// CONFIG: next line is affected by rowObjects settings
tbl.tBodies[0].rows[i].theRow.element1.name = INPUT_NAME_PREFIX + count; // input text
 
// CONFIG: next line is affected by rowObjects settings
var tempVal = tbl.tBodies[0].rows[i].theRow.element1.value.split(' '); // for debug purposes
tbl.tBodies[0].rows[i].theRow.element1.value = count + ' was' + tempVal[0]; // for debug purposes
 
// CONFIG: next line is affected by rowObjects settings
tbl.tBodies[0].rows[i].theRow.rdBtn.value = count; // input radio
 
 
count++;
}
}
}
}
 
function deleteOpticsRows(rowObjArray)
{
if (opticsHasLoaded) {
for (var i=0; i<rowObjArray.length; i++) {
var rIndex = rowObjArray[i].sectionRowIndex;
rowObjArray[i].parentNode.deleteRow(rIndex);
}
}
}
 
 

[ April 05, 2007: Message edited by: JiaPei Jen ]
[ April 05, 2007: Message edited by: Bear Bibeault ]

[Herman Schelti]

hi JiaPei,

can you show us some of your html-code?

Herman

[JiaPei Jen]

Let me answer my own question.

The cause of my problem was that I had too many

window "on_load" = ....;   

The correct way to do is:

window."on_load"=fillInAllTables;
 
function fillInAllTables()
{
fillInTableARows();
fillInTableBRows();
fillInTableCRows();
}

Thank you very much for your attention to my problem.