JavaScript - Dynamically Create Id For Table-rows
Hi there, so i am working on a website, and on it there is a video with youtube api.
I need to hide all Table-rows that are not during each 5 second time frame. So for example, when it is at 0:36, it will hide all TR's besides the TR that has to do with the video between 0:35 and 0:40. Each TR displays a start time, content, and end time. Here is what the tables currently look like. Code: <table width="600" class="table" > <tr class="item-titles"> <td width="75" class="none">Start</td> <td width="400">Caption</td> <td width="75">End</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(0, false)">0</a></td> <td><a href="javascript:player.seekTo(0, false)"></a></td> <td><a href="javascript:player.seekTo(5, false)">5</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(5, false)">5</a></td> <td><a href="javascript:player.seekTo(5, false)"></a></td> <td><a href="javascript:player.seekTo(10, false)">10</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(10, false)">10</a></td> <td><a href="javascript:player.seekTo(10, false)"></a></td> <td><a href="javascript:player.seekTo(15, false)">15</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(15, false)">15</a></td> <td><a href="javascript:player.seekTo(15, false)"></a></td> <td><a href="javascript:player.seekTo(20, false)">20</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(20, false)">20</a></td> <td><a href="javascript:player.seekTo(20, false)"></a></td> <td><a href="javascript:player.seekTo(25, false)">25</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(25, false)">25</a></td> <td><a href="javascript:player.seekTo(25, false)"></a></td> <td><a href="javascript:player.seekTo(30, false)">30</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(30, false)">30</a></td> <td><a href="javascript:player.seekTo(30, false)"></a></td> <td><a href="javascript:player.seekTo(35, false)">35</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(35, false)">35</a></td> <td><a href="javascript:player.seekTo(35, false)"></a></td> <td><a href="javascript:player.seekTo(40, false)">40</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(40, false)">40</a></td> <td><a href="javascript:player.seekTo(40, false)"></a></td> <td><a href="javascript:player.seekTo(45, false)">45</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(45, false)">45</a></td> <td><a href="javascript:player.seekTo(45, false)"></a></td> <td><a href="javascript:player.seekTo(50, false)">50</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(50, false)">50</a></td> <td><a href="javascript:player.seekTo(50, false)"></a></td> <td><a href="javascript:player.seekTo(55, false)">55</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(55, false)">55</a></td> <td><a href="javascript:player.seekTo(55, false)"></a></td> <td><a href="javascript:player.seekTo(60, false)">60</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(60, false)">60</a></td> <td><a href="javascript:player.seekTo(60, false)"></a></td> <td><a href="javascript:player.seekTo(65, false)">65</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(65, false)">65</a></td> <td><a href="javascript:player.seekTo(65, false)"></a></td> <td><a href="javascript:player.seekTo(70, false)">70</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(70, false)">70</a></td> <td><a href="javascript:player.seekTo(70, false)"></a></td> <td><a href="javascript:player.seekTo(75, false)">75</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(75, false)">75</a></td> <td><a href="javascript:player.seekTo(75, false)"></a></td> <td><a href="javascript:player.seekTo(80, false)">80</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(80, false)">80</a></td> <td><a href="javascript:player.seekTo(80, false)"></a></td> <td><a href="javascript:player.seekTo(85, false)">85</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(85, false)">85</a></td> <td><a href="javascript:player.seekTo(85, false)"></a></td> <td><a href="javascript:player.seekTo(90, false)">90</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(90, false)">90</a></td> <td><a href="javascript:player.seekTo(90, false)"></a></td> <td><a href="javascript:player.seekTo(95, false)">95</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(95, false)">95</a></td> <td><a href="javascript:player.seekTo(95, false)"></a></td> <td><a href="javascript:player.seekTo(100, false)">100</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(100, false)">100</a></td> <td><a href="javascript:player.seekTo(100, false)"></a></td> <td><a href="javascript:player.seekTo(105, false)">105</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(105, false)">105</a></td> <td><a href="javascript:player.seekTo(105, false)"></a></td> <td><a href="javascript:player.seekTo(110, false)">110</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(110, false)">110</a></td> <td><a href="javascript:player.seekTo(110, false)"></a></td> <td><a href="javascript:player.seekTo(115, false)">115</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(115, false)">115</a></td> <td><a href="javascript:player.seekTo(115, false)"></a></td> <td><a href="javascript:player.seekTo(120, false)">120</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(120, false)">120</a></td> <td><a href="javascript:player.seekTo(120, false)"></a></td> <td><a href="javascript:player.seekTo(125, false)">125</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(125, false)">125</a></td> <td><a href="javascript:player.seekTo(125, false)"></a></td> <td><a href="javascript:player.seekTo(130, false)">130</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(130, false)">130</a></td> <td><a href="javascript:player.seekTo(130, false)"></a></td> <td><a href="javascript:player.seekTo(135, false)">135</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(135, false)">135</a></td> <td><a href="javascript:player.seekTo(135, false)"></a></td> <td><a href="javascript:player.seekTo(140, false)">140</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(140, false)">140</a></td> <td><a href="javascript:player.seekTo(140, false)"></a></td> <td><a href="javascript:player.seekTo(145, false)">145</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(145, false)">145</a></td> <td><a href="javascript:player.seekTo(145, false)"></a></td> <td><a href="javascript:player.seekTo(150, false)">150</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(150, false)">150</a></td> <td><a href="javascript:player.seekTo(150, false)"></a></td> <td><a href="javascript:player.seekTo(155, false)">155</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(155, false)">155</a></td> <td><a href="javascript:player.seekTo(155, false)"></a></td> <td><a href="javascript:player.seekTo(160, false)">160</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(160, false)">160</a></td> <td><a href="javascript:player.seekTo(160, false)"></a></td> <td><a href="javascript:player.seekTo(165, false)">165</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(165, false)">165</a></td> <td><a href="javascript:player.seekTo(165, false)"></a></td> <td><a href="javascript:player.seekTo(170, false)">170</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(170, false)">170</a></td> <td><a href="javascript:player.seekTo(170, false)"></a></td> <td><a href="javascript:player.seekTo(175, false)">175</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(175, false)">175</a></td> <td><a href="javascript:player.seekTo(175, false)"></a></td> <td><a href="javascript:player.seekTo(180, false)">180</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(180, false)">180</a></td> <td><a href="javascript:player.seekTo(180, false)"></a></td> <td><a href="javascript:player.seekTo(185, false)">185</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(185, false)">185</a></td> <td><a href="javascript:player.seekTo(185, false)"></a></td> <td><a href="javascript:player.seekTo(190, false)">190</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(190, false)">190</a></td> <td><a href="javascript:player.seekTo(190, false)"></a></td> <td><a href="javascript:player.seekTo(195, false)">195</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(195, false)">195</a></td> <td><a href="javascript:player.seekTo(195, false)"></a></td> <td><a href="javascript:player.seekTo(200, false)">200</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(200, false)">200</a></td> <td><a href="javascript:player.seekTo(200, false)"></a></td> <td><a href="javascript:player.seekTo(205, false)">205</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(205, false)">205</a></td> <td><a href="javascript:player.seekTo(205, false)"></a></td> <td><a href="javascript:player.seekTo(210, false)">210</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(210, false)">210</a></td> <td><a href="javascript:player.seekTo(210, false)"></a></td> <td><a href="javascript:player.seekTo(215, false)">215</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(215, false)">215</a></td> <td><a href="javascript:player.seekTo(215, false)"></a></td> <td><a href="javascript:player.seekTo(220, false)">220</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(220, false)">220</a></td> <td><a href="javascript:player.seekTo(220, false)"></a></td> <td><a href="javascript:player.seekTo(225, false)">225</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(225, false)">225</a></td> <td><a href="javascript:player.seekTo(225, false)"></a></td> <td><a href="javascript:player.seekTo(230, false)">230</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(230, false)">230</a></td> <td><a href="javascript:player.seekTo(230, false)"></a></td> <td><a href="javascript:player.seekTo(235, false)">235</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(235, false)">235</a></td> <td><a href="javascript:player.seekTo(235, false)"></a></td> <td><a href="javascript:player.seekTo(240, false)">240</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(240, false)">240</a></td> <td><a href="javascript:player.seekTo(240, false)"></a></td> <td><a href="javascript:player.seekTo(245, false)">245</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(245, false)">245</a></td> <td><a href="javascript:player.seekTo(245, false)"></a></td> <td><a href="javascript:player.seekTo(250, false)">250</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(250, false)">250</a></td> <td><a href="javascript:player.seekTo(250, false)"></a></td> <td><a href="javascript:player.seekTo(255, false)">255</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(255, false)">255</a></td> <td><a href="javascript:player.seekTo(255, false)"></a></td> <td><a href="javascript:player.seekTo(260, false)">260</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(260, false)">260</a></td> <td><a href="javascript:player.seekTo(260, false)"></a></td> <td><a href="javascript:player.seekTo(265, false)">265</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(265, false)">265</a></td> <td><a href="javascript:player.seekTo(265, false)"></a></td> <td><a href="javascript:player.seekTo(270, false)">270</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(270, false)">270</a></td> <td><a href="javascript:player.seekTo(270, false)"></a></td> <td><a href="javascript:player.seekTo(275, false)">275</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(275, false)">275</a></td> <td><a href="javascript:player.seekTo(275, false)"></a></td> <td><a href="javascript:player.seekTo(280, false)">280</td> </tr> <tr> <td class="none"><a href="javascript:player.seekTo(280, false)">280</a></td> <td><a href="javascript:player.seekTo(280, false)"></a></td> <td><a href="javascript:player.seekTo(285, false)">285</td> </tr> </table> And you can see the page at http://134.117.226.43:8000/check_sub...ty/test101/91/ any help ? Similar TutorialsHere's part of the code, problem I have is I have it set up for 5 rows, I need it to be able to make more than this, but not sure how many more, this is dependent on user input, how should I go about this? Also how would I go about making the users orders correspond with the right item number? I'd need to sort the array somehow? document.write('<table border="1">'); document.write("<tr>"); document.write('<th colspan="5">ORDER</th>') document.write("</tr>"); document.write("<tr>"); document.write('<th align="left">Item #</th>'); document.write('<th align="center">Name</th>'); document.write('<th align="center">Price</th>'); document.write('<th align="center">Quantity</th>'); document.write('<th align="center">Total</th>'); document.write("</tr>"); document.write('<td align="center">0</td>'); document.write('<td>' + productName[0] + '</td>'); document.write('<td> $' + sausagePrice + '</td>'); document.write('<td> ' + orderItemQty[0] + '</td>'); document.write('<td> ' + sausageTotal + '</td Hellooo. So I'm having trouble figuring out how to dynamically add another set of rows to a table when a button is clicked. The code below shows what goes into one set. When the button is clicked, it needs to create another three rows with the same format as the code below, but the variable names need to show what row they're on so I can easily call the values that have been inputed in another function that saves the information. Sooo for example the first variable, bhrs1-1 needs to become bhrs4-1 in the next set (because there's already a bhrs2-1 and bhrs3-1 in this set, which would become bhrs5-1 and bhrs6-1 in the new set). Sorry the code's so long! Help would be greatly appreciated. Thanksss!! Code: <TBODY> <INPUT TYPE=HIDDEN id=bhrs1-1 name=bhrs1-1><INPUT TYPE=HIDDEN id=comment1-1 name=comment1-1> <INPUT TYPE=HIDDEN id=bhrs1-2 name=bhrs1-2><INPUT TYPE=HIDDEN id=comment1-2 name=comment1-2> <INPUT TYPE=HIDDEN id=bhrs1-3 name=bhrs1-3><INPUT TYPE=HIDDEN id=comment1-3 name=comment1-3> <INPUT TYPE=HIDDEN id=bhrs1-4 name=bhrs1-4><INPUT TYPE=HIDDEN id=comment1-4 name=comment1-4> <INPUT TYPE=HIDDEN id=bhrs1-5 name=bhrs1-5><INPUT TYPE=HIDDEN id=comment1-5 name=comment1-5> <INPUT TYPE=HIDDEN id=bhrs1-6 name=bhrs1-6><INPUT TYPE=HIDDEN id=comment1-6 name=comment1-6> <INPUT TYPE=HIDDEN id=bhrs1-7 name=bhrs1-7><INPUT TYPE=HIDDEN id=comment1-7 name=comment1-7> <TR> <TD HEIGHT=20 SDVAL="1" SDNUM="1033;1033;#,##0_);[RED](#,##0)"> <SELECT style="width:500px;" name=project_id1 size=1 onChange='onProjectChanged(1);'> <? // // Load Projects // // $sresults = mysql_query("SELECT project_id, project, billable_rate, customer_id, Customer.CustomerName FROM Project LEFT OUTER JOIN Customer ON Project.customer_id=Customer.customer_id WHERE status_id='active' ORDER BY project"); $sresults = mysql_query("SELECT project_id, project, billable_rate, Project.customer_id, CostCenter.DisplayNameShort FROM Project LEFT OUTER JOIN CostCenter ON Project.customer_id=CostCenter.customer_id WHERE status_id='active' ORDER BY customer_id,CostCenter.DisplayNameShort,project"); // $srate = 0; print "<OPTION value='0'>--</OPTION>\n"; while($arow = mysql_fetch_assoc($sresults)) { // $srate = $arow["billable_rate"]; print "<OPTION value=\"" . $arow["project_id"] . "\">" . substr($arow["DisplayNameShort"], 0, 15) . ": " . $arow["project"] . "</OPTION>\n"; } // print "\n</SELECT>Billable Rate: <INPUT name=billable_rate value=\"" . $srate . "\" size=10 DISABLED></TD>\n"; ?> </TD> <TD> <SELECT name=task11 size=1 style="width:220px;" onChange='onTaskChange(1);'> <? print "<OPTION value='0'>--</OPTION>\n"; print "<OPTION value='1'>Sales Support</OPTION>\n"; print "<OPTION value='2'>Project Management</OPTION>\n"; print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n"; print "<OPTION value='4'>Analysis and Design</OPTION>\n"; print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n"; print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n"; print "<OPTION value='7'>User Acceptance Testing</OPTION>\n"; print "<OPTION value='8'>User Documentation and Training</OPTION>\n"; print "<OPTION value='9'>Launch</OPTION>\n"; print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n"; ?> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs1-1 name=hrs1-1 size=2 maxlength=2 onFocus='onCellFocus(1,1);' onChange='calcRowTotal(1,1);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs1-2 name=hrs1-2 size=2 maxlength=2 onFocus='onCellFocus(1,2);' onChange='calcRowTotal(1,2);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs1-3 name=hrs1-3 size=2 maxlength=2 onFocus='onCellFocus(1,3);' onChange='calcRowTotal(1,3);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs1-4 name=hrs1-4 size=2 maxlength=2 onFocus='onCellFocus(1,4);' onChange='calcRowTotal(1,4);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs1-5 name=hrs1-5 size=2 maxlength=2 onFocus='onCellFocus(1,5);' onChange='calcRowTotal(1,5);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs1-6 name=hrs1-6 size=2 maxlength=2 onFocus='onCellFocus(1,6);' onChange='calcRowTotal(1,6);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs1-7 name=hrs1-7 size=2 maxlength=2 onFocus='onCellFocus(1,7);' onChange='calcRowTotal(1,7);'><BR> </P> </TD> <TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task1total size=2 maxlength=4 DISABLED></B></FONT> </P> </TD> </TR> <INPUT TYPE=HIDDEN id=bhrs2-1 name=bhrs2-1><INPUT TYPE=HIDDEN id=comment2-1 name=comment2-1> <INPUT TYPE=HIDDEN id=bhrs2-2 name=bhrs2-2><INPUT TYPE=HIDDEN id=comment2-2 name=comment2-2> <INPUT TYPE=HIDDEN id=bhrs2-3 name=bhrs2-3><INPUT TYPE=HIDDEN id=comment2-3 name=comment2-3> <INPUT TYPE=HIDDEN id=bhrs2-4 name=bhrs2-4><INPUT TYPE=HIDDEN id=comment2-4 name=comment2-4> <INPUT TYPE=HIDDEN id=bhrs2-5 name=bhrs2-5><INPUT TYPE=HIDDEN id=comment2-5 name=comment2-5> <INPUT TYPE=HIDDEN id=bhrs2-6 name=bhrs2-6><INPUT TYPE=HIDDEN id=comment2-6 name=comment2-6> <INPUT TYPE=HIDDEN id=bhrs2-7 name=bhrs2-7><INPUT TYPE=HIDDEN id=comment2-7 name=comment2-7> <TR> <TD HEIGHT=20 SDVAL="2" SDNUM="1033;1033;#,##0_);[RED](#,##0)"> <INPUT name=remove1 value=Remove type=button onClick='removeProject(1);'> </TD> <TD> <SELECT name=task12 size=1 style="width:220px;" onChange='onTaskChange(2);'> <? print "<OPTION value='0'>--</OPTION>\n"; print "<OPTION value='1'>Sales Support</OPTION>\n"; print "<OPTION value='2'>Project Management</OPTION>\n"; print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n"; print "<OPTION value='4'>Analysis and Design</OPTION>\n"; print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n"; print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n"; print "<OPTION value='7'>User Acceptance Testing</OPTION>\n"; print "<OPTION value='8'>User Documentation and Training</OPTION>\n"; print "<OPTION value='9'>Launch</OPTION>\n"; print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n"; ?> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs2-1 name=hrs2-1 size=2 maxlength=2 onFocus='onCellFocus(2,1);' onChange='calcRowTotal(2,1);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs2-2 name=hrs2-2 size=2 maxlength=2 onFocus='onCellFocus(2,2);' onChange='calcRowTotal(2,2);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs2-3 name=hrs2-3 size=2 maxlength=2 onFocus='onCellFocus(2,3);' onChange='calcRowTotal(2,3);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs2-4 name=hrs2-4 size=2 maxlength=2 onFocus='onCellFocus(2,4);' onChange='calcRowTotal(2,4);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs2-5 name=hrs2-5 size=2 maxlength=2 onFocus='onCellFocus(2,5);' onChange='calcRowTotal(2,5);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs2-6 name=hrs2-6 size=2 maxlength=2 onFocus='onCellFocus(2,6);' onChange='calcRowTotal(2,6);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs2-7 name=hrs2-7 size=2 maxlength=2 onFocus='onCellFocus(2,7);' onChange='calcRowTotal(2,7);'><BR> </P> </TD> <TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task2total size=2 maxlength=4 DISABLED></B></FONT> </P> </TD> </TR> <INPUT TYPE=HIDDEN id=bhrs3-1 name=bhrs3-1><INPUT TYPE=HIDDEN id=comment3-1 name=comment3-1> <INPUT TYPE=HIDDEN id=bhrs3-2 name=bhrs3-2><INPUT TYPE=HIDDEN id=comment3-2 name=comment3-2> <INPUT TYPE=HIDDEN id=bhrs3-3 name=bhrs3-3><INPUT TYPE=HIDDEN id=comment3-3 name=comment3-3> <INPUT TYPE=HIDDEN id=bhrs3-4 name=bhrs3-4><INPUT TYPE=HIDDEN id=comment3-4 name=comment3-4> <INPUT TYPE=HIDDEN id=bhrs3-5 name=bhrs3-5><INPUT TYPE=HIDDEN id=comment3-5 name=comment3-5> <INPUT TYPE=HIDDEN id=bhrs3-6 name=bhrs3-6><INPUT TYPE=HIDDEN id=comment3-6 name=comment3-6> <INPUT TYPE=HIDDEN id=bhrs3-7 name=bhrs3-7><INPUT TYPE=HIDDEN id=comment3-7 name=comment3-7> <TR> <TD HEIGHT=20 SDVAL="3" SDNUM="1033;1033;#,##0_);[RED](#,##0)"> <P><BR> </P> </TD> <TD> <SELECT name=task13 size=1 style="width:220px;" onChange='onTaskChange(3);'> <? print "<OPTION value='0'>--</OPTION>\n"; print "<OPTION value='1'>Sales Support</OPTION>\n"; print "<OPTION value='2'>Project Management</OPTION>\n"; print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n"; print "<OPTION value='4'>Analysis and Design</OPTION>\n"; print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n"; print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n"; print "<OPTION value='7'>User Acceptance Testing</OPTION>\n"; print "<OPTION value='8'>User Documentation and Training</OPTION>\n"; print "<OPTION value='9'>Launch</OPTION>\n"; print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n"; ?> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs3-1 name=hrs3-1 size=2 maxlength=2 onFocus='onCellFocus(3,1);' onChange='calcRowTotal(3,1);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs3-2 name=hrs3-2 size=2 maxlength=2 onFocus='onCellFocus(3,2);' onChange='calcRowTotal(3,2);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs3-3 name=hrs3-3 size=2 maxlength=2 onFocus='onCellFocus(3,3);' onChange='calcRowTotal(3,3);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs3-4 name=hrs3-4 size=2 maxlength=2 onFocus='onCellFocus(3,4);' onChange='calcRowTotal(3,4);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs3-5 name=hrs3-5 size=2 maxlength=2 onFocus='onCellFocus(3,5);' onChange='calcRowTotal(3,5);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs3-6 name=hrs3-6 size=2 maxlength=2 onFocus='onCellFocus(3,6);' onChange='calcRowTotal(3,6);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs3-7 name=hrs3-7 size=2 maxlength=2 onFocus='onCellFocus(3,7);' onChange='calcRowTotal(3,7);'><BR> </P> </TD> <TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task3total size=2 maxlength=4 DISABLED></B></FONT> </P> </TD> </TR> </TBODY> Hi, I have the following function to dynamically create an image (in this case a toolbox button): Code: function createButton(srcid,bttn) { if (bttn=='mag') {s='Magnify';h='Magnify';o='DoZoom(event,\'0\',\''+srcid+'\')';} if (bttn=='frz') {s='Pause';h='Freeze/Unfreeze';o='setPicture(\''+srcid+'\',0)';} if (bttn=='swp') {s='Swap';h='Swap maps';o='setPicture(\''+srcid+'\',2)';} btn=document.createElement('img'); btn.setAttribute('src','toolbox/'+s+'.gif'); btn.setAttribute('width','16px'); btn.setAttribute('height','16px'); btn.setAttribute('id',bttn+'btn_'+srcid); btn.setAttribute('class','button'); btn.setAttribute('name','Toolbox'); btn.setAttribute('title',h); btn.setAttribute('onclick',o); document.getElementById('ctrlDiv').appendChild(btn); } which works fine in IE8 and IE9, but in IE7 it refuses to pick up the style 'button'. I've even tried putting in btn.class='button' but JS throws up an error. If I specify the style by btn.style.position='Absolute' it picks this up OK. However, it won't respond to the onclick event either. I have heard that setAttribute is buggy with IE7, which is why I tried to specify each attribute directly. The style sheet for class button is: Code: .button { position: absolute; left: 5; top: 5; z-index: 1; } (BTW, no link to a website as this is local on my machine atm) TIA, Gerald. How do I dynamically create a <select> with <options> in Javascript?
I have written this code but when i include code for pop calender in a row, then button was disabled, So please help me i just struck in this problem from last one week Thanking you, L.Rajesh rajboy13@gmail.com my code is Code: function addRow() { var tbl = document.getElementById('tblMed'); var lastRow = tbl.rows.length; var iteration = lastRow; var row = tbl.insertRow(lastRow); var cellLeft = row.insertCell(0); var sl = document.createElement('input'); sl.type = 'text'; sl.name = 'sln' ; sl.id = 'sln' + iteration; sl.value = iteration; sl.size = 3; sl.readOnly = true; cellLeft.appendChild(sl); var cellRights= row.insertCell(1); var elm= document.createElement('input'); elm.type = 'text'; elm.name = 'txtMdesc' ; elm.id = 'Mdesc' + iteration; elm.size = 20; cellRights.appendChild(elm); var cellRightt= row.insertCell(2); var elmn= document.createElement('input'); elmn.type = 'text'; elmn.name = 'txtMqty' ; elmn.onclick = "cal1xx.select(document.forms[0].sdate,'anchor1xx','dd-MM-yy'); elmn.id = 'Mqty' + iteration; elmn.size = 20; cellRightt.appendChild(elmn)"; var cellRightu= row.insertCell(3); var elmno= document.createElement('input'); elmno.type = 'text'; elmno.name = 'txtMbill' ; elmno.id = 'Mbill' + iteration; elmno.size = 20; cellRightu.appendChild(elmno); } the button code is : Code: </br> <fieldset style="width:60%;" align="center"> <legend> <SCRIPT LANGUAGE="JavaScript"> function deleteRow(b){ document.getElementById('table_formcontainer').deleteRow(b) } function CompareDates1() { var str1 = document.getElementById("start").value; var str2 = document.getElementById("edate").value; var dt1 = parseInt(str1.substring(0,2),10); var mon1 = parseInt(str1.substring(3,5),10); var yr1 = parseInt(str1.substring(6,10),10); var dt2 = parseInt(str2.substring(0,2),10); var mon2 = parseInt(str2.substring(3,5),10); var yr2 = parseInt(str2.substring(6,10),10); var date1 = new Date(yr1, mon1, dt1); var date2 = new Date(yr2, mon2, dt2); if(date2 < date1) { alert("To date cannot be greater than from date"); return false; } else { alert("Submitting ..."); document.form1.submit(); } return true; } function addRow() { var tbl = document.getElementById('tblMed'); var lastRow = tbl.rows.length; var iteration = lastRow; var row = tbl.insertRow(lastRow); var cellLeft = row.insertCell(0); var sl = document.createElement('input'); sl.type = 'text'; sl.name = 'sln' ; sl.id = 'sln' + iteration; sl.value = iteration; sl.size = 3; sl.readOnly = true; cellLeft.appendChild(sl); var cellRights= row.insertCell(1); var elm= document.createElement('input'); elm.type = 'text'; elm.name = 'txtMdesc' ; elm.id = 'Mdesc' + iteration; elm.size = 20; cellRights.appendChild(elm); var cellRightt= row.insertCell(2); var elmn= document.createElement('input'); elmn.type = 'text'; elmn.name = 'txtMqty' ; elmn.onclick = "cal1xx.select(document.forms[0].sdate,'anchor1xx','dd-MM-yy'); elmn.id = 'Mqty' + iteration; elmn.size = 20; cellRightt.appendChild(elmn)"; var cellRightu= row.insertCell(3); var elmno= document.createElement('input'); elmno.type = 'text'; elmno.name = 'txtMbill' ; elmno.id = 'Mbill' + iteration; elmno.size = 20; cellRightu.appendChild(elmno); } function delRow1(c) { document.getElementById('tblMed').deleteRow(c) } function validate() { var tbl = document.getElementById('tblMed'); var lastRow= tbl.rows.length-1; var a; for (a=1; a<=lastRow; a++) { var def = document.getElementById('sln'+ a); var ghi = document.getElementById('Mdesc'+ a); var jkl = document.getElementById('Mqty'+ a); var jkl1 = document.getElementById('Mqty'+ a).value; var abc = document.getElementById('Mbill'+ a); var gpexpdt2 = document.getElementById('tblMed').value; var str11 = document.getElementById("sdate").value; var str12 = document.getElementById("edate").value; var tranday = jkl1.substring(0,2); var tranmon = jkl1.substring(3,5); var tranyear = jkl1.substring(6,10); var trandate = new Date(tranyear,tranmon,tranday); var tranday2 = str11.substring(0,2); var tranmon2 = str11.substring(3,5); var tranyear2 = str11.substring(6,10); var trandate2 = new Date(tranyear2,tranmon2,tranday2); var tranday3 = str12.substring(0,2); var tranmon3 = str12.substring(3,5); var tranyear3 = str12.substring(6,10); if ((document.getElementById("AC").value == "")) { alert ( "Please enter Amount Claimed." ); document.form5.AC.focus(); return false; } else if((document.getElementById("Amb").value == "")) { alert ( "Please enter Relationship" ); document.form5.Amb.focus(); return false; } if ( document.form5.Treat.selectedIndex == "") { alert ( "Please select Treatment Type" ); document.form5.Treat.focus(); return false; } else if((document.getElementById("C10").value == "")) { alert ( "Please enter Total " ); document.form5.C10.focus(); return false; } else if((document.getElementById("C11").value == "")) { alert ( "Please enter Place " ); document.form5.C11.focus(); return false; } else if((document.getElementById("start").value == "")) { alert ( "Please enter from date" ); document.form5.start.focus(); return false; } else if((document.getElementById("edate").value == "")) { alert ( "Please enter to date" ); document.form5.edate.focus(); return false; } if (ghi.value.length == "") { alert('Please enter Bill No'); ghi.focus(); return false; } if (jkl.value.length == "") { alert('Please enter Date'); jkl.focus(); return false; } var trandate3 = new Date(tranyear3,tranmon3,tranday3); if (tranmon > 12|| tranmon < 1) { alert('Invalid Month In Date Field .Enter as dd-mm-yy'); jkl.focus(); return false; } if (tranday > 31|| tranday < 1) { alert('Invalid Date In Date Field Enter as dd-mm-yy'); jkl.focus(); return false; } if(trandate2.getTime() > trandate.getTime()) { alert("Bill date should be less than From date"); jkl.focus(); return false; } if(trandate3.getTime() < trandate.getTime()) { alert("Bill date should not be greater than End date"); jkl.focus(); return false; } if (abc.value.length == "") { alert('Please enter Amount'); abc.focus(); return false; } var str3 = document.getElementById("AC").value; var str4 = document.getElementById("Amb").value; if(parseInt(str3) > parseInt(str4)) { alert('Amount Claimed must be less than Amount Balance'); document.form5.AC.focus(); return false; } var alertsay = ""; if (form5.Treat.value > 4) { alert("Sorry You Can Not This Employee Data In Database.........."); form5.Treat.focus(); return (false); } var checkOK = "0123456789"; var checkStr = abc.value; var allValid = true; var allNum = ""; for (e = 0; e < checkStr.length; e++) { ch = checkStr.charAt(e); for (f = 0; f < checkOK.length; f++) if (ch == checkOK.charAt(f)) break; if (f == checkOK.length) { allValid = false; break; } if (ch != ",") allNum += ch; } if (!allValid) { alert("Invalid Data Please enter only digits'"); abc.focus(); return (false); } } return true; } var count =0; function Check() { if (!validate()) return true; addRow() } function removeRow1() { var tbl = document.getElementById('tblMed'); var lastRow = tbl.rows.length; if (lastRow > 1) tbl.deleteRow(lastRow - 1); } function deleteRow(node) { if (rowNum > 1) { var td = node.parentNode; while (td.tblMed.toLowerCase() != "tr") td = td.parentNode; td.parentNode.removeChild(td); rowNum = rowNum - 1; document.form1.count.value = rowNum; } else { alert ("You cannot delete the last remaining row"); } } </script> <b><font color="#153E7E"border="1">Bill Details</b></legend><br> <table id="tblMed" width="75%"> <tr> <th>Sl.No.</th> <th align="left">Bill No</th> <th align="left" onClick="cal1xx.select(document.forms[0].edate,'anchor1xx','dd-MM-yy'); return false;" NAME="anchor1xx" ID="anchor1xx" onFocus="self.status='Select Treatment Start Date';return true; " onBlur="self.status='';return true;">Bill Date(DD-MON-YY)</th> <th>Bill Amount( <span class="WebRupee">Rs.</span> )</th> </tr> </table> <tr><br/>     <input name="button" type="button" value="Add Bill" onClick="Check()"/> ................................................................................................ i want popup calender in 3rd row of the table please help and if any one got solution then please please mail it to my gmail id : rajboy13@gmail.com I currently have a page which, when the user clicks a button creates a new row displaying a form. I also have other forms on this page however so I was wondering if anyone knew how to close a form using javascript? Thanks for any help. My code to create the table row and form are below... Code: myform = document.createElement("form"); myform.method = "post"; myform.action = "editdetails.php"; myform.id = "editemail"; myform.name = "editemail"; var a=document.getElementById('editdetailstable').insertRow(2); var b=document.getElementById('editdetailstable').insertRow(3); var x=a.insertCell(0); x.innerHTML="New Email: "; x.align = "right"; var y=a.insertCell(1); y.innerHTML="<input type='text' name='email' id='email' />"; var z=b.insertCell(0); z.innerHTML="<input type='button' value='Change' />" z.colSpan = "2"; z.align = "center"; Let's say I would want to create a custom object with properties. The properties would get their values from text input fields. The only thing that I can't get is how to assign variables to the new instances of the object.Here's my go at it: //First create object prototype function Obj(prop1,prop2,prop3) { this.prop1=prop1; this.prop2=prop2; this.prop3=prop3; this.showProps=showProps; //This method will show all props } //Array for storing each object instance var Objects=new Array(),i=-1; //---Now the HTML code <form name="myform" onSubmit="Objects[i++]=new Obj(text1.value,text2.value,text3.value)"> <b>Age:</b><input name="text1"> <b>Sex:</b><input name="text2"> <b>Location:</b><input name="text3"> <input type="submit"> </form> Ok,so knowing that each array element can store anything,including another object I used an Array to store each object instance.But is there any other way of storing objects? like in variables. Hi, I have written a code below: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function emailRowContent(isSelected, emailAddress, severity) { var emailRowObj = document.getElementById('emailRow'); emailRowObj.childNodes[1].childNodes[0].checked = isSelected; emailRowObj.childNodes[3].childNodes[0].value = emailAddress; emailRowObj.childNodes[5].childNodes[0].checked = severity; } function LoadUp() { var emailAddressListObj = document.getElementById('emailAddressList'); var arrayOfEmails = new Array(5); for (i = 0; i < 5; i++) { arrayOfEmails[i] = new emailRowContent( "checked", "fjkum@unknown.com" + i, i ); //emailAddressListObj.appendChild( arrayOfEmails[i] ); /* Somehow this line breaks */ } } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body onload="javascript:LoadUp();"> <div id="emailRow" class="emailRowClass"> <div><input type="checkbox" class="checkbox1"></div> <div><input type="text" class="textfield"></div> <div><input type="checkbox" class="checkbox2"></div> </div> <div id="emailAddressList" class="emailAddressClass"></div> </body> </html> Basically, what I want to do is to dynamically create 5 instances of "emailRow" onto the web page making use of Javascript DOM. But have no success in getting it to work. Can anyone shed some light? Mike Can someone see what is wrong with this code: Code: frm=document.createElement('form') frm.action="/cgi-sys/formmail.pl" frm.method="POST" fld=document.createElement('textarea') fld.appendChild(document.createTextNode(simpleCart.items)) frm.appendChild(fld) It is supposed to dynamically create a textarea and fill it up with the return of simpleCart.items() Hello all, I am doing a website project and in that currently I am designing a product page. I have to design add values to text boxes and drag and drop the text boxes in the workspace and delete the text boxes the user does not want and have to draw a graphical line between the text boxes which are in order. I have designed and coded everything except the graphical line part. I am a learner in javascript and Can we draw a graphical line dynamically between the text boxes in the webpage? If we can draw, can anyone let me know the tutorial for that so that I can learn and start coding as I have to submit that project soon. Thank you. I have a table that has a series of dropdowns. Each dropdown is build with JavaScript based on the values of the prior dropdowns. The data for each of these dropdowns comes from a series of XML files which are loaded into a series of arrays on loading. This is all working. What I need (but can't figure out) is how to dynamically build a sub-table within a specific cell of the parent table based on the values of the prior dropdowns and if the prior dropdowns are changed, how do delete (not just hide) the dynamic table and rebuild it based on the values of the new dropdowns. Hello, I want to add rows and columns on click. So, i have a table with columns and rows and I had a add and remove button. So I want the user to be able to add/remove more rows if they have multiple inputs/outputs. So what I want is when the user clicks on add.png, I want another row of Input and Description to appear underneath the current one. Here is my code.. Code: <img src="images/add.png" width="15" height="15" align="right" > <div class="open"> <table width="200" border="0"> <tr> <td class="propertyCol">Input: </th> <td class="propertyCol"><input class="text ui-widget-content ui-corner-all" value="" style="width:210px"></input></th> <td class="propertyCol">Description: </th> <td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea> </th> <td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a> </th> </tr> </table> <table width="200" border="0"> <tr> <td class="propertyCol">Output: </th> <td class="propertyCol"><input class="text ui-widget-content ui-corner-all" style="width:200px"></input></th> <td class="propertyCol">Description: </th> <td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea> </th> <td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a> </th> </tr> </table> </div i have a table with a couple random numbers, and i want to click a button that will dynamically regenerate the numbers each time the button is clicked without re-generating the entire table., im using DOM and innerhtml for these random numbers. heres the javascript and html code. so far, it just generates the random numbers when the page loads. var random = Math.floor(Math.random()*40 + 1) //sets variables for random numbers to generate var random2 = Math.floor(Math.random()*40 + 1) var random3 = Math.floor(Math.random()*40 + 1) var random4 = Math.floor(Math.random()*40 + 1) var random5 = Math.floor(Math.random()*40 + 1) var random6 = Math.floor(Math.random()*40 + 1) //create table function makeTable(lotto) document.getElementById("tableSpan").innerHTML = '<table border="1" id="lotto">'; var caption=document.getElementById('lotto').createCaption(); caption.innerHTML="JavaScript Random Numbers"; var x=document.getElementById('lotto').insertRow(0); var cell1=x.insertCell(0); var cell2=x.insertCell(1); var cell3=x.insertCell(2); var cell4=x.insertCell(3); var cell5=x.insertCell(4); var cell6=x.insertCell(5); cell1.innerHTML='<td class = "normal">'+ random +'</td>'; cell2.innerHTML='<td class = "normal">'+ random2 +'</td>'; cell3.innerHTML='<td class = "normal">'+ random3 +'</td>'; cell4.innerHTML='<td class = "normal">'+ random4 +'</td>'; cell5.innerHTML='<td class = "normal">'+ random5 +'</td>'; cell6.innerHTML='<td class = "red">'+ random6 +'</td>'; } heres the HTML file: <body onload="makeTable('lotto');"> <div id="container"> <div id="header"> <h1>Welcome</h1> </div> <div id="content"> <span id="tableSpan"></span> <input type="button" value="Re-generate Numbers" onclick="makeTable('lotto');" /> </div> { Hi all, I have a problem in javascript , ajax and jsp. Please see this url http://xil.co.in/print_screen_2.JPG. I am working on this form. There are sum buttons (like submit , add ,edit at bottom of this page , but not visible in printscreen). On click of a radio button on left side , form fields on right side and small table on right bottom is gettig populated. The table on right bottom , is actually the eligibility criteria associated with the record whose radio was clicked on left . On clicking radio of this record(right side) , I want to populate its values in the above text boxes present right in front of text "Eligibility". During the whole click process (clicking the left and right radio button ) page should not get refreshed. I am able to show records on left side by iterating over a resultset (in jsp) and able to populate field on right side also, but have no idea how to populate table on right bottom dynamically such that I can handle onclick event on its radio button. Pls tell me how to achieve this. Thanks in advance for any help. Forgive me, I come from a ColdFusion background and DOM manipulation is not one of my strongest assets. I am trying to dynamically create (and also delete) a row inside a table, which contains three cells that each have three form elements (a input box, a select drop-down box that is populated by a query to a database, and a textarea). Now all the JavaScript/jQuery examples I've seen for dynamically creating elements are very basic, nothing this complex. Could I get some help?! This is what I'm trying to dynamically create so that the user can add more options but also delete them. Would the jQuery clone() function be a good choice for this? Code: <tr> <td> <input type="text" id="rejectName" /> </td> <td> <select id="divSelectReason"> <option value="" selected="true">Enter Rejection Reason</option> <cfoutput query="queryReasonReturn"> <option>#codeAndReason#</option> </cfoutput> </select> </td> <td> <textarea id="editReason" cols="30"></textarea> </td> </tr> Now when a row is dynamically created I also have to access those values as well, so I would assume using a variable that counts each row created, and appends that iteration to the name of that particular element. My table starts like this: Code: <table> <tr> <td rowspan='2'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> When an addRows button is clicked, the first two rows are copied (cloned), a checbox is then inserted into the row1 cell1, then the two rows are appended: <table> <tr> <td rowspan='2'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td rowspan='2'><input type='checkbox' name='check[]'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> Rows,except the first two can then be deleted by selecting the appropriate checkbox and clicking a deleteRow button. The check[] only exists after the first two rows have been copied and appended, so undefined means only two rows exist. Having a problem with the while loop. If a browser sees the next sibling of a tr as a td, the the loop should force the browser to go to the next sibling until its a tr, i.e row4. But its causing my browser(FF) to become unresponsive. Code: function deleteRow() { if(check == 'undefined') { return; } else { var check = document.getElementsByName('check[]'),row,nextRow,x; var len = check.length; for(x=len-1; x>=0; x--) { if(check[x].checked) { row = check[x].parentNode.parentNode; while(row.nextSibling.nodeName != 'tr') { nextRow = row.nextSibling; } nextRow = row.nextSibling; alert('ok'); } } } } Appreciate ans help with this? My table had the following layout. Code: <table> <tr> <td rowspan='2'><td> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> After clicking an add rows button, the two rows are cloned and appended as follows with a checkbox added as shown. Code: <table> <td rowspan='2'><td> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td rowspan='2'><input type='checkbox' name='check'><td> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> I want to be able to delete rows 3&4 by selecting the checkbox in row 3 and clicking a delete rows button. Regardless of how many sets of rows have been previously added, any set of rows can be deleted by selecting the appropriate checkbox(es) and clicking delete button. I'm trying to figure out how this can be done. My thinking is if checkbox is checked, calculate row index. I would then have to call deleteRow twice on that row index. Is there a better way of doing this? Hey there! I found a great code to do this, but I would like to have the row defult set to hide via the Javascript. This is because I have many rows and I do not want to set them all to display:none and it would be easier and less bother to just set it in one place which is the JS code. Thank you! ................. Code: <html> <head> <script> function toggle(thisname) { tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(thisname)){ if ( tr[i].style.display=='none' ){ tr[i].style.display = ''; } else { tr[i].style.display = 'none'; } } } } </script> </head> <body> <span onClick="toggle('nameit');">toggle</span><br /><br /> <table border="1"> <tr nameit=fred > <td >Always Visible</td> </tr> <tr nameit=fred id="hidethis"> <td>Hide this</td> </tr> <tr> <td>s visible</td> </tr> </table> </script> </body> </html> I am building an elearning site where the user is taken through a series of dynamically driven pages to refine their choices. I am using php amd mysql to populate a series of tables but on the last page the table gets very long so i am trying to make the table expandable. I found this and this on http://www.javascripttoolbox.com/jquery/ and it's proving helpful but i need a little help taking it a step further. I also found this to be useful for anyone else who is trying to do the same thing: http://www.jankoatwarpspeed.com/post...nd-plugin.aspx FROM JAVASCRIPTTOOLBOX A common UI is to have a table of data rows, which when clicked on expand to show a detailed breakdown of "child" rows below the "parent" row. The only requirements a 1. Put a class of "parent" on each parent row (tr) 2. Give each parent row (tr) an id 3. Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs Original code: Code: $(function() { $('tr.parent') .css("cursor","pointer") .attr("title","Click to expand/collapse") .click(function(){ $(this).siblings('.child-'+this.id).toggle(); }); $('tr[@class^=child-]').hide().children('td'); }); This works great but my parent and child rows all contain checkboxes and If i try and check the checkboxes in the master rows the child rows associated with that master row expand and contract. I have added an extra cell to each row and i'm using a css class to add an arrow image to each master row but i am new to Javascript so i am not sure what i am doing. My code now looks like this: Code: $(document).ready(function() { $('tr:not(.parent)').hide(); //$('tr.parent') $('.arrow') .css("cursor","pointer") .attr("title","Click to expand/collapse") .click(function(){ $(this).siblings('.child-'+this.id).toggle(); $(this).toggleClass("up"); }); }); So far the arrow image is toggling but i can't seem to work out how to get the .click function to affect the whole row and not just the image. Can anybody help me? Thanks hi I have just took from internet dinamic table. this table is dynamic and its rows dynamically can be increased. it sum but not like integer for ex. in row1 i enter 20 and in row2 i enter 5 it sums like 205 but i need it sums like 25 if possible pls help me Thanks beforehand here is code Code: <html> <head> <title></title> <script type="text/javascript"> function addRow() { // grab the element, i.e. the table your editing, in this we're calling it // 'mySampleTable' and it is reffered to in the table further down on the page // with a unique of id of you guessed it, 'mySampleTable' var tbl = document.getElementById('mySampleTable'); // grab how many rows are in the table var lastRow = tbl.rows.length; // if there's no header row in the table (there should be, code at least one //manually!), then iteration = lastRow + 1 var iteration = lastRow; // creates a new row var row = tbl.insertRow(lastRow); // left cell // insert a cell var cellLeft = row.insertCell(0); // here we're just using numbering the cell, like anything else you don't // have to use this, but i've kinda noticed users tend to like them var textNode = document.createTextNode(iteration); // takes what we did (create the plain text number) and appends it the cell // we created in the row we created. NEAT! cellLeft.appendChild(textNode); // right cell // another cell! var cellRight = row.insertCell(1); // creating an element this time, specifically an input var el = document.createElement('input'); // a data type of text el.type = 'text'; // the name of the element txtRow, and because this is dynamic we also // append the row number to it, so for example if this is the eigth row // being created the text box will have the name of txtRow8. super fantastic. el.name = 'txtRow' + iteration; // the exact same thing with a unique id el.id = 'txtRow' + iteration; // set it to size of 40. setting sizes is good. el.size = 40; el.rel = 'sum'; // same thing as earlier, append our element to our freshly and clean cell cellRight.appendChild(el); // select cell // our last cell! var cellRightSel = row.insertCell(2); // create another element, this time a select box var sel = document.createElement('select'); // name it, once again with an iteration (selRow8 using the example above) sel.name = 'selRow' + iteration; // crates options in an array // the Option() function takes the first parameter of what is being displayed // from within the drop down, and the second parameter of the value it is carrying over sel.options[0] = new Option('text zero', 'value0'); sel.options[1] = new Option('text one', 'value1'); sel.options[2] = new Option('text two', 'value2'); // append our new element containing new options to our new cell cellRightSel.appendChild(sel); } function removeRow() { // grab the element again! var tbl = document.getElementById('mySampleTable'); // grab the length! var lastRow = tbl.rows.length; // delete the last row if there is more than one row! if (lastRow > 2) tbl.deleteRow(lastRow - 1); } </script> <script type="text/javascript"> function sum() { var elem = document.getElementById('eval_edit').elements; // loop fields in form for (var i = 0; i < elem.length; i++) { // check if field has attribute 'rel' with value of 'sum' if (elem[i].getAttribute('rel') == 'sum') { // parse value as integer and copy to total field document.getElementById('total').value += parseInt(elem[i].value); } } } </script> </head> <body> <form action="miro.html" name="eval_edit" method="post" format="html"> <table align="center" width = "75%"> <tr> <td align = "center"> click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee! </td> </tr> <tr> <td align = "center"> <!--- very imporant to give the table an id ---> <!--- otherwise it won't know where to edit ---> <table border="1" id="mySampleTable"> <tr> <td> Lesson </td> <td> Title </td> <td> Instructor </td> </tr> <!--- i create the initial row by hand, there are a lot of ---> <!--- different ways to do this depending on what parsing ---> <!--- language you use, i found this was easiest for the ---> <!--- snippet, but experiment, do your thing mang. ---> <!--- this matches the same specs we laid out in the javascript ---> <tr> <td> 1 </td> <td> <input type="text" name="txtRow1" id="txtRow1" size="40" rel="sum"/></td> <td> <select name="selRow0"> <option value="value0">text zero</option> <option value="value1">text one</option> <option value="value2">text two</option> </select> </td> </tr> </table> <input name="total" /> <!--- our buttons call our javascript functions when clicked ---> <input type="button" value="Add" onclick="addRow();" /> <input type="button" value="Remove" onclick="removeRow();" /> <input type="button" value="SUM" onClick="sum()"/> <input type="submit" value="Submit" /> </td> </tr> </table> </form> </body> </html> |