DOM Table: how to get the correct row no

Hi,

I'm working on a program using javascript to create a dynamic table. Initially was developing this in IE environment. It work fine, but realise that it doesn't work on Mozilla FireFox.

So I change it to using DOM Table to construct the table. But now I can't get the correct row no from the "Browse" button that I clicked on. It will only return the total number of rows instead of the currect row no I clicked on.

On previous working version, I make use of count2 to denote the row no. But after I've changed the code, count2 only shows the total row.

Was wondering if anyone here are able to help.

Refer to the code below, I didn't include all the codes as the program was too large:

Expand|Select|Wrap|Line Numbers

 
<HTML>

<HEAD>

<TITLE>Customer Service</TITLE>

<SCRIPT LANGUAGE='javascript'>var pageLoaded=false;

                    function loadvar() {

                        pageLoaded=true;

                    }

                    function searchProduct(form1, field1, field2, field3, idx) {

                        if (pageLoaded==false) {

                            window.alert("WOL5859: Page has not finished loading");

                        }

                        else {

                            window.alert("This is row no:"+idx);                            

                        }

                    }                    
 
var count2 = 0;

function addReplace(tableID)

{

var tbody = document.getElementById(tableID).getElementsByTagName("TBODY")[0];

var row = document.createElement("TR");

var td1 = document.createElement("TD");

td1.className = "l1TD";

td1.align = "center";

td1.appendChild (replaceTD7());

var td2 = document.createElement("TD");

td2.className = "l1TD";

td2.appendChild (replaceTD5());

td2.appendChild (replaceTD6());

td2.appendChild(document.createTextNode("New"));

var td3 = document.createElement("TD");

td3.className = "l1TD";

td3.appendChild (replaceTD9());

var td4 = document.createElement("TD");

td4.className = "l1TD";

td4.appendChild (replaceTD1());

td4.appendChild (replaceTD4());

var td5 = document.createElement("TD")

td5.className = "l1TD";

td5.appendChild (replaceTD2());

var td6 = document.createElement("TD");

td6.className = "l1TD";

td6.appendChild (replaceTD3());

var td7 = document.createElement("TD");

td7.className = "l1TD";

td7.appendChild (replaceTD10());

var td8 = document.createElement("TD");

td8.className = "l1TD";

td8.appendChild (replaceTD11());

var td9 = document.createElement("TD");

td9.className = "l1TD";

td9.appendChild (replaceTD8());

row.appendChild(td1);

row.appendChild(td2);

row.appendChild(td3);

row.appendChild(td4);

row.appendChild(td5);

row.appendChild(td6);

row.appendChild(td7);

row.appendChild(td8);

row.appendChild(td9);

tbody.appendChild(row);

count2 += 1;

} // addReplace

function replaceTD1()

{

var newField = document.createElement("input");

newField.type = "text";

newField.name = "in_product2";

newField.size = 30;

newField.maxlength = 30;

return newField;

}

function replaceTD4()

{

var newField = document.createElement("input");

newField.type = "button";

newField.value = "Browse ";

newField.onclick = function() {searchProduct(document.form1, document.form1.in_product2, document.form1.in_description2, document.form1.in_unit_price2,count2)};

return newField;

}

function replaceTD2()

{

var newField = document.createElement("input");

newField.type = "hidden";

newField.name = "in_description2";

return newField;

}

function replaceTD3()

{

var newField = document.createElement("input");

newField.type = "text";

newField.name = "in_qty2";

newField.onblur = function() { calVal2(this.form, count2)};

return newField;

}

function replaceTD5()

{

var newField = document.createElement("input");

newField.type = "hidden";

newField.name = "in_status2";

newField.value = "new";

return newField;

}

function replaceTD6()

{

var newField = document.createElement("input");

newField.type = "hidden";

newField.name = "in_rowid2";

newField.value = count2;

return newField;

}

function replaceTD7()

{

var newField = document.createElement("input");

newField.type = "checkbox";

newField.name = "in_selected_rowid2";

newField.value = count2;

return newField;

}

function replaceTD8()

{

var newField = document.createElement("select");

newField.name = "in_trans_code2";

newField.options[0] = new Option("All","%");

newField.options[1] = new Option("IS=Issuable","IS");

newField.options[2] = new Option("RE=REJECTED","RE");

newField.options[3] = new Option("NM=Normal","NM");

return newField;

}

function replaceTD9()

{

var newField = document.createElement("select");

newField.name = "in_stock_loc2";

newField.options[0] = new Option("1-1-1-1","1-1-1-1");

newField.options[1] = new Option("1-1-2-1","1-1-2-1");

newField.options[2] = new Option("1-1-3-1","1-1-3-1");

newField.options[3] = new Option("1-1-4-1","1-1-4-1");

newField.options[4] = new Option("RCPT","RCPT");

return newField;

}

function replaceTD10()

{

var newField = document.createElement("input");

newField.type = "text";

newField.name = "in_unit_price2";

newField.onblur= function() {calVal2(this.form,count2)};

return newField;

}

function replaceTD11()

{

var newField = document.createElement("input");

newField.type = "text";

newField.name = "in_amount2";

return newField;

}

</script>

</HEAD>
 
<BODY class="contentBody" onLoad="loadvar();"link="#0000CC" vlink="#0000CC" alink="#0000CC">
 
        <style type="text/css">

        <!--

         .titletabborder {

            background-color: #004080;

            height: 22px;

            border: 1px solid #FFFFFF;

        }

        -->

        </style>       
 
        <BR>
 
<tr><td><FORM ACTION="WWW_RMA_CUSTOMER_PK.proc_customer3" METHOD="POST" name="form1">

<BR>

<INPUT TYPE="hidden" NAME="in_stock_loc2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_product2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_unit_price2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_qty2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_lot_no2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_serial_no2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_exp_date2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_aoptchar1_2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_aoptchar2_2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_aoptchar3_2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_aoptchar4_2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_aoptchar5_2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_aoptchar6_2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_aoptnum1_2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_aoptnum2_2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_aoptnum3_2" VALUE="dummy">
 
<INPUT TYPE="hidden" NAME="in_aoptnum4_2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_aoptdate1_2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_aoptdate2_2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_description2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_trans_code2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_amount2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_status2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_rowid2" VALUE="dummy">

<INPUT TYPE="hidden" NAME="in_selected_rowid2" VALUE="dummy">

<fieldset>

<legend>

<LABEL CLASS="formEntryLblOpt"><b>Spare Parts Requested</b></LABEL>

</legend>

<BR>

<TABLE  border="0" cellpadding="2" cellspacing="1" class="browseTable" id="replaceTab">

<TR>
 
<TD NOWRAP  CLASS="l1TH" >Delete</TD>

<TD NOWRAP  CLASS="l1TH" >Sequence No</TD>

<TD NOWRAP  CLASS="l1TH" >Stock Location</TD>

<TD NOWRAP  CLASS="l1TH" >Spare Part Code</TD>

<TD NOWRAP  CLASS="l1TH" >Description</TD>

<TD NOWRAP  CLASS="l1TH" >Quantity Requested</TD>

<TD NOWRAP  CLASS="l1TH" >Unit Price</TD>

<TD NOWRAP  CLASS="l1TH" >Amount</TD>

<TD NOWRAP  CLASS="l1TH" >Stock Status Code</TD>
 
</TR>

</TABLE>

<INPUT TYPE="button" VALUE="Add Row" class="defaultButton" onClick="addReplace('replaceTab');">

<BR>

</fieldset>

<BR>

<BR>

<P>

<CENTER>

<INPUT TYPE="button" VALUE="Delete" class="defaultButton" onClick="submitButton('delete');">

&nbsp;&nbsp;&nbsp;

<INPUT TYPE="button" VALUE="Save" class="defaultButton" onClick="submitButton('submit');">

&nbsp;&nbsp;&nbsp;

<INPUT TYPE="button" VALUE="Next &gt;&gt;" class="defaultButton" onClick="submitButton('next_step');">

&nbsp;&nbsp;&nbsp;

<INPUT TYPE="reset" VALUE="Reset" class="defaultButton" class="defaultButton">

</CENTER>
 
<INPUT TYPE="hidden" NAME="in_button" VALUE="">

<INPUT TYPE="hidden" NAME="in_sc_code" VALUE="YANGSC">

<INPUT TYPE="hidden" NAME="in_owner_code" VALUE="YANG">

<INPUT TYPE="hidden" NAME="in_wh_entity" VALUE="DEMO">

<INPUT TYPE="hidden" NAME="in_rma_no" VALUE="">

<INPUT TYPE="hidden" NAME="in_menu_id" VALUE="B5DE63798DE48B52">

</FORM></td></tr>

</BODY>

</HTML>

Thanks in advance

Feb 8 '07 #1

Subscribe Post Reply

5583

dmjpro

2,476

2GB

i am working on ie..
because our project is ie specific...
i do in ie =================
u r trying to get the row no on clicking the mouse on a particular cell.......
event.srcElement.parentElement.rowIndex
did u try it....
plz send me ur reply...
i am online!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Feb 8 '07 #2

yangtono

i am working on ie..
because our project is ie specific...
i do in ie =================
u r trying to get the row no on clicking the mouse on a particular cell.......
event.srcElement.parentElement.rowIndex
did u try it....
plz send me ur reply...
i am online!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Hi,

Thanks for your reply. What I meant is when I click the "Add Row" 2 times, the page shows me 2 rows. But when I click on the first row of "Browse" button, I got the data from second row (or last row). I need to find out how to get the correct row no or should I say which "Browse" button I clicked.

The program I'm working on will list all the products from the "Stock Location". If first row stock location is "1-1-1-1", I expect to get the data when I click on first "Browse" button.

Feb 8 '07 #3

acoder

16,027

Expert Mod 8TB

On the browse button onclick, instead of passing the count, pass the rowno instead.

Feb 8 '07 #4

dmjpro

2,476

2GB

i think u have a header portion of the table...
then do subtract one from the orginal returned rowIndex..
plz send me u response
best of luck

Feb 8 '07 #5

yangtono

i think u have a header portion of the table...
then do subtract one from the orginal returned rowIndex..
plz send me u response
best of luck

Hi,

How do I get the rowIndex? I make use of "count2" to keep track of the row no, but instead it return me the total row.

Feb 9 '07 #6

acoder

16,027

Expert Mod 8TB

You can use the rowIndex property of the tr object or you can use parentNode to get its parent.

See the following links:
http://www.w3schools.com/htmldom/dom_obj_tablerow.asp
http://developer.mozilla.org/en/docs...DOM_Interfaces

Feb 9 '07 #7

yangtono

You can use the rowIndex property of the tr object or you can use parentNode to get its parent.

See the following links:
http://www.w3schools.com/htmldom/dom_obj_tablerow.asp
http://developer.mozilla.org/en/docs...DOM_Interfaces

Hi,

Thanks for yur suggestion, but I've seen these website. But I don't quite understand the term rowIndex property. How do I use these in javascript?

Feb 12 '07 #8

acoder

16,027

Expert Mod 8TB

See this example.

Once you have the table row object (give these an id), just use the rowIndex attribute:

Expand|Select|Wrap|Line Numbers

document.getElementById(tablerowid).rowIndex

where "tablerowid" is the id to your tr element.

Feb 12 '07 #9

Similar topics

How to hide column in table

by: Don Grover | last post by:

I have a HTML table created using ASP as a web page. ie. HEADING1 HEADING2 HEADING3 etc... data 1 data2 data3 etc and so on How can I toggle hide /...

Javascript

Help with table width and CSS relative positioning

by: Stephen Weatherly | last post by:

Could anyone please help me with a problem I am having with my table widths??? If I have 2 images within a td tag, but using CSS relative positioning I position one over the top of the second (I...

HTML / CSS

Table Cells don't have the correct width in Firefox

by: N. Demos | last post by:

The following code renders as intended in IE (A TABLE, with cells of fixed width and height, inside of a DIV with fixed width and height and overflow set to hidden.) In Firefox, the table cells...

HTML / CSS

Writing table markup with script

by: Christopher Benson-Manica | last post by:

I have some markup like the following: <form> <table> <script>  </script> </table> <form>

Javascript

Can TR element be direct child node of TABLE element?

by: Patient Guy | last post by:

In my reading of the Strict and Transitional DTD for HTML 4.0, the table row (TR) elements are contained within table section elements: THEAD, TFOOT, and TBODY. The table section elements are...

Javascript

Table width error???

by: Norman L. DeForest | last post by:

Am I misunderstanding the CSS specifications or is Firefox (version 1.0.6) (and Opera) doing the wrong thing? It appears that Firefox 1.0.6 includes the border in width calculations for tables...

HTML / CSS

which table design is more correct?

by: mm nn | last post by:

Hi, I want to create a table like this: ID Autonum Datefld Date Cat Text Itm Text tCount Number

Microsoft Access / VBA

Using arrays to take records from a html table and update database

by: Ian Davies | last post by:

Hello Needing help with a suitable solution. I have extracted records into a table under three columns 'category', 'comment' and share (the category column also holds the index no of the record...

PHP

filter combo box to show unique names in linked table

by: banderson | last post by:

Hello, I have a data entry form for a table with information about buildings and am having a problem making a combo box do what I want. I would like to make the combo box show a list of unique bldg...

Microsoft Access / VBA

Look Up Table Help

by: Harshpandya | last post by:

Here is my code for look up table - where i am planning to built 10 colums and 8 rows and put array values in the table boxes. Problem is - it is only printing the last array valules instead of all...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice