By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,836 Members | 2,097 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,836 IT Pros & Developers. It's quick & easy.

DOM Table: how to get the correct row no

P: 10
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
  1. <HTML>
  2. <HEAD>
  3. <TITLE>Customer Service</TITLE>
  4. <SCRIPT LANGUAGE='javascript'>var pageLoaded=false;
  5.                     function loadvar() {
  6.                         pageLoaded=true;
  7.                     }
  8.                     function searchProduct(form1, field1, field2, field3, idx) {
  9.                         if (pageLoaded==false) {
  10.                             window.alert("WOL5859: Page has not finished loading");
  11.                         }
  12.                         else {
  13.                             window.alert("This is row no:"+idx);                            
  14.                         }
  15.                     }                    
  16.  
  17. var count2 = 0;
  18. function addReplace(tableID)
  19. {
  20. var tbody = document.getElementById(tableID).getElementsByTagName("TBODY")[0];
  21. var row = document.createElement("TR");
  22. var td1 = document.createElement("TD");
  23. td1.className = "l1TD";
  24. td1.align = "center";
  25. td1.appendChild (replaceTD7());
  26. var td2 = document.createElement("TD");
  27. td2.className = "l1TD";
  28. td2.appendChild (replaceTD5());
  29. td2.appendChild (replaceTD6());
  30. td2.appendChild(document.createTextNode("New"));
  31. var td3 = document.createElement("TD");
  32. td3.className = "l1TD";
  33. td3.appendChild (replaceTD9());
  34. var td4 = document.createElement("TD");
  35. td4.className = "l1TD";
  36. td4.appendChild (replaceTD1());
  37. td4.appendChild (replaceTD4());
  38. var td5 = document.createElement("TD")
  39. td5.className = "l1TD";
  40. td5.appendChild (replaceTD2());
  41. var td6 = document.createElement("TD");
  42. td6.className = "l1TD";
  43. td6.appendChild (replaceTD3());
  44. var td7 = document.createElement("TD");
  45. td7.className = "l1TD";
  46. td7.appendChild (replaceTD10());
  47. var td8 = document.createElement("TD");
  48. td8.className = "l1TD";
  49. td8.appendChild (replaceTD11());
  50. var td9 = document.createElement("TD");
  51. td9.className = "l1TD";
  52. td9.appendChild (replaceTD8());
  53. row.appendChild(td1);
  54. row.appendChild(td2);
  55. row.appendChild(td3);
  56. row.appendChild(td4);
  57. row.appendChild(td5);
  58. row.appendChild(td6);
  59. row.appendChild(td7);
  60. row.appendChild(td8);
  61. row.appendChild(td9);
  62. tbody.appendChild(row);
  63. count2 += 1;
  64. } // addReplace
  65. function replaceTD1()
  66. {
  67. var newField = document.createElement("input");
  68. newField.type = "text";
  69. newField.name = "in_product2";
  70. newField.size = 30;
  71. newField.maxlength = 30;
  72. return newField;
  73. }
  74. function replaceTD4()
  75. {
  76. var newField = document.createElement("input");
  77. newField.type = "button";
  78. newField.value = "Browse ";
  79. newField.onclick = function() {searchProduct(document.form1, document.form1.in_product2, document.form1.in_description2, document.form1.in_unit_price2,count2)};
  80. return newField;
  81. }
  82. function replaceTD2()
  83. {
  84. var newField = document.createElement("input");
  85. newField.type = "hidden";
  86. newField.name = "in_description2";
  87. return newField;
  88. }
  89. function replaceTD3()
  90. {
  91. var newField = document.createElement("input");
  92. newField.type = "text";
  93. newField.name = "in_qty2";
  94. newField.onblur = function() { calVal2(this.form, count2)};
  95. return newField;
  96. }
  97. function replaceTD5()
  98. {
  99. var newField = document.createElement("input");
  100. newField.type = "hidden";
  101. newField.name = "in_status2";
  102. newField.value = "new";
  103. return newField;
  104. }
  105. function replaceTD6()
  106. {
  107. var newField = document.createElement("input");
  108. newField.type = "hidden";
  109. newField.name = "in_rowid2";
  110. newField.value = count2;
  111. return newField;
  112. }
  113. function replaceTD7()
  114. {
  115. var newField = document.createElement("input");
  116. newField.type = "checkbox";
  117. newField.name = "in_selected_rowid2";
  118. newField.value = count2;
  119. return newField;
  120. }
  121. function replaceTD8()
  122. {
  123. var newField = document.createElement("select");
  124. newField.name = "in_trans_code2";
  125. newField.options[0] = new Option("All","%");
  126. newField.options[1] = new Option("IS=Issuable","IS");
  127. newField.options[2] = new Option("RE=REJECTED","RE");
  128. newField.options[3] = new Option("NM=Normal","NM");
  129. return newField;
  130. }
  131. function replaceTD9()
  132. {
  133. var newField = document.createElement("select");
  134. newField.name = "in_stock_loc2";
  135. newField.options[0] = new Option("1-1-1-1","1-1-1-1");
  136. newField.options[1] = new Option("1-1-2-1","1-1-2-1");
  137. newField.options[2] = new Option("1-1-3-1","1-1-3-1");
  138. newField.options[3] = new Option("1-1-4-1","1-1-4-1");
  139. newField.options[4] = new Option("RCPT","RCPT");
  140. return newField;
  141. }
  142. function replaceTD10()
  143. {
  144. var newField = document.createElement("input");
  145. newField.type = "text";
  146. newField.name = "in_unit_price2";
  147. newField.onblur= function() {calVal2(this.form,count2)};
  148. return newField;
  149. }
  150. function replaceTD11()
  151. {
  152. var newField = document.createElement("input");
  153. newField.type = "text";
  154. newField.name = "in_amount2";
  155. return newField;
  156. }
  157. </script>
  158. </HEAD>
  159.  
  160. <BODY class="contentBody" onLoad="loadvar();"link="#0000CC" vlink="#0000CC" alink="#0000CC">
  161.  
  162.         <style type="text/css">
  163.         <!--
  164.          .titletabborder {
  165.             background-color: #004080;
  166.             height: 22px;
  167.             border: 1px solid #FFFFFF;
  168.         }
  169.         -->
  170.         </style>       
  171.  
  172.         <BR>
  173.  
  174. <tr><td><FORM ACTION="WWW_RMA_CUSTOMER_PK.proc_customer3" METHOD="POST" name="form1">
  175. <BR>
  176. <INPUT TYPE="hidden" NAME="in_stock_loc2" VALUE="dummy">
  177. <INPUT TYPE="hidden" NAME="in_product2" VALUE="dummy">
  178. <INPUT TYPE="hidden" NAME="in_unit_price2" VALUE="dummy">
  179. <INPUT TYPE="hidden" NAME="in_qty2" VALUE="dummy">
  180. <INPUT TYPE="hidden" NAME="in_lot_no2" VALUE="dummy">
  181. <INPUT TYPE="hidden" NAME="in_serial_no2" VALUE="dummy">
  182. <INPUT TYPE="hidden" NAME="in_exp_date2" VALUE="dummy">
  183. <INPUT TYPE="hidden" NAME="in_aoptchar1_2" VALUE="dummy">
  184. <INPUT TYPE="hidden" NAME="in_aoptchar2_2" VALUE="dummy">
  185. <INPUT TYPE="hidden" NAME="in_aoptchar3_2" VALUE="dummy">
  186. <INPUT TYPE="hidden" NAME="in_aoptchar4_2" VALUE="dummy">
  187. <INPUT TYPE="hidden" NAME="in_aoptchar5_2" VALUE="dummy">
  188. <INPUT TYPE="hidden" NAME="in_aoptchar6_2" VALUE="dummy">
  189. <INPUT TYPE="hidden" NAME="in_aoptnum1_2" VALUE="dummy">
  190. <INPUT TYPE="hidden" NAME="in_aoptnum2_2" VALUE="dummy">
  191. <INPUT TYPE="hidden" NAME="in_aoptnum3_2" VALUE="dummy">
  192.  
  193. <INPUT TYPE="hidden" NAME="in_aoptnum4_2" VALUE="dummy">
  194. <INPUT TYPE="hidden" NAME="in_aoptdate1_2" VALUE="dummy">
  195. <INPUT TYPE="hidden" NAME="in_aoptdate2_2" VALUE="dummy">
  196. <INPUT TYPE="hidden" NAME="in_description2" VALUE="dummy">
  197. <INPUT TYPE="hidden" NAME="in_trans_code2" VALUE="dummy">
  198. <INPUT TYPE="hidden" NAME="in_amount2" VALUE="dummy">
  199. <INPUT TYPE="hidden" NAME="in_status2" VALUE="dummy">
  200. <INPUT TYPE="hidden" NAME="in_rowid2" VALUE="dummy">
  201. <INPUT TYPE="hidden" NAME="in_selected_rowid2" VALUE="dummy">
  202. <fieldset>
  203. <legend>
  204. <LABEL CLASS="formEntryLblOpt"><b>Spare Parts Requested</b></LABEL>
  205. </legend>
  206. <BR>
  207. <TABLE  border="0" cellpadding="2" cellspacing="1" class="browseTable" id="replaceTab">
  208. <TR>
  209.  
  210. <TD NOWRAP  CLASS="l1TH" >Delete</TD>
  211. <TD NOWRAP  CLASS="l1TH" >Sequence No</TD>
  212. <TD NOWRAP  CLASS="l1TH" >Stock Location</TD>
  213. <TD NOWRAP  CLASS="l1TH" >Spare Part Code</TD>
  214. <TD NOWRAP  CLASS="l1TH" >Description</TD>
  215. <TD NOWRAP  CLASS="l1TH" >Quantity Requested</TD>
  216. <TD NOWRAP  CLASS="l1TH" >Unit Price</TD>
  217. <TD NOWRAP  CLASS="l1TH" >Amount</TD>
  218. <TD NOWRAP  CLASS="l1TH" >Stock Status Code</TD>
  219.  
  220. </TR>
  221. </TABLE>
  222. <INPUT TYPE="button" VALUE="Add Row" class="defaultButton" onClick="addReplace('replaceTab');">
  223. <BR>
  224. </fieldset>
  225. <BR>
  226. <BR>
  227. <P>
  228. <CENTER>
  229. <INPUT TYPE="button" VALUE="Delete" class="defaultButton" onClick="submitButton('delete');">
  230. &nbsp;&nbsp;&nbsp;
  231. <INPUT TYPE="button" VALUE="Save" class="defaultButton" onClick="submitButton('submit');">
  232. &nbsp;&nbsp;&nbsp;
  233. <INPUT TYPE="button" VALUE="Next &gt;&gt;" class="defaultButton" onClick="submitButton('next_step');">
  234. &nbsp;&nbsp;&nbsp;
  235. <INPUT TYPE="reset" VALUE="Reset" class="defaultButton" class="defaultButton">
  236. </CENTER>
  237.  
  238. <INPUT TYPE="hidden" NAME="in_button" VALUE="">
  239. <INPUT TYPE="hidden" NAME="in_sc_code" VALUE="YANGSC">
  240. <INPUT TYPE="hidden" NAME="in_owner_code" VALUE="YANG">
  241. <INPUT TYPE="hidden" NAME="in_wh_entity" VALUE="DEMO">
  242. <INPUT TYPE="hidden" NAME="in_rma_no" VALUE="">
  243. <INPUT TYPE="hidden" NAME="in_menu_id" VALUE="B5DE63798DE48B52">
  244. </FORM></td></tr>
  245. </BODY>
  246. </HTML>
  247.  
  248.  
Thanks in advance
Feb 8 '07 #1
Share this Question
Share on Google+
8 Replies


dmjpro
100+
P: 2,476
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

P: 10
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
Expert Mod 15k+
P: 16,027
On the browse button onclick, instead of passing the count, pass the rowno instead.
Feb 8 '07 #4

dmjpro
100+
P: 2,476
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

P: 10
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
Expert Mod 15k+
P: 16,027
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

P: 10
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
Expert Mod 15k+
P: 16,027
See this example.

Once you have the table row object (give these an id), just use the rowIndex attribute:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById(tablerowid).rowIndex
where "tablerowid" is the id to your tr element.
Feb 12 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.