DOM Table: how to get the correct row no

10 New Member

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 Reply

5598

dmjpro

2,476

Top Contributor

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.srcElemen t.parentElement .rowIndex
did u try it....
plz send me ur reply...
i am online!!!!!!!!! !!!!!!!!!!!!!!! !!!!!!!!!

Feb 8 '07 #2

yangtono

New Member

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.srcElemen t.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

Recognized Expert Moderator MVP

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

Feb 8 '07 #4

dmjpro

2,476

Top Contributor

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

New Member

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

Recognized Expert Moderator MVP

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

New Member

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

Recognized Expert Moderator MVP

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

25797

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 / show the columns individually, anyone ever needed to do this and have any suggestions.

Javascript

7744

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 am placing a transparent gif over the top of a normal gif) then the width of my table is large enough to accommodate both images side by side My...

HTML / CSS

26204

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 assume a narrower with than specified. If I comment out the width for the DIV, then the cells render with the correct width and height. Why is this...

HTML / CSS

1779

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

3111

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 the defined contents of the TABLE element. The TR element is not defined as an "immediate" or "direct" contained element of TABLE. Given that

Javascript

3565

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 but not in height calculations. Oh, and Opera version 8.02 does the same thing. |<-->| |<-->| <------ border |<------------>| ...

HTML / CSS

1868

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

3475

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 in a hidden field) I wish the user to be able to edit the data in the table, so I have extracted the records into hiddenfield, textareas, dropdown...

PHP

3887

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 mgmt company names and then to open a building management company form to show all records with this name, so the user can find the correct branch...

Microsoft Access / VBA

1225

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 var maxRow = 10; var maxCol = 8; var height1 = 480; var width1 = 640; function CenteringError(Xe, Ye){ var table = new Array ( (, ...

Javascript

7843

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...

Windows Server

8340

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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...

Online Marketing

7967

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...

Windows Server

6621

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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...

Career Advice

5713

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...

Microsoft Access / VBA

5392

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...

C# / C Sharp

3875

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2353

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1185

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

General