www.webdeveloper.com
Results 1 to 8 of 8

Thread: A small problem in javascript

  1. #1
    Join Date
    May 2012
    Posts
    38

    A small problem in javascript

    Hi ,

    I have the following small javascript embedded in the html. Please notice there is a drop-down filter in the "Status" column. If I select it as "valid" then all the rows having "OK" status should be returned. But instead of returing two rows it is returning only one row and ignoring the other. Can anybody please point me out what is going wrong ?

    Thanks in advance.
    Code:
    <html>
    <head>
    <title>Collections</title>
    </head>
    <body bgcolor="#FFFFFF">
      <TABLE BORDER=1 id="maintab"  ><TR BGCOLOR="#D0D0D0">
        <TH ALIGN=LEFT>Task</TH><TH ALIGN=LEFT>Command</TH><TH ALIGN=LEFT>Method</TH><TH
    	ALIGN=LEFT>Status<BR>
    	
    	
    <select onchange="showRows(this.value)">
    <option value="all">show status</option>
    <option value="all">all</option>
    <option value="active">valid</option>
    </select>
    	
    	
    	</TH><TH ALIGN=LEFT>Task version</TH><TH ALIGN=LEFT>Tool version</TH><TH
    	ALIGN=LEFT>Last changed</TH><TH ALIGN=LEFT>Comments</TH></TR> 
     
    	<script type="text/javascript">
    mytab=document.getElementById("maintab")
    function showRows(val){
    for (var i = 0; i < mytab.rows.length; i++) {
    if (val=="all"){
    mytab.rows[i].style.display="table-row"
    		} else {
    if (mytab.rows[i].innerHTML.match("-")){
    mytab.rows[i].style.display="none"
    }		
    		} //else blk end
    	}
    } ;
    
    </script>
    
    
    	<TR><TD rowspan=1><A HREF="method.pl?path=/home/max/;task=drc;command=create">drc</A></TD><TD rowspan=1><A HREF="file:///home/max/xyzdev_tech_demo_1/xyx_HTML/web_drc_create.html">create</TD><TD NOWRAP>drc</TD><TD NOWRAP><FONT COLOR="green">OK</FONT></TD><TD NOWRAP>v1.2</TD><TD NOWRAP>2005r02-iw</TD><TD NOWRAP>Wed Jul 11 2007 16:29:52</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1><A HREF="method.pl?path=/home/max/;task=gds;command=create">gds</A></TD><TD rowspan=1><A HREF="file:///home/max/xyzdev_tech_demo_1/xyx_HTML/web_gds_create.html">create</TD><TD NOWRAP>gds</TD><TD NOWRAP><FONT COLOR="green">OK</FONT></TD><TD NOWRAP>v1.2</TD><TD NOWRAP>undef/INF: undef</TD><TD NOWRAP>Wed Jul 11 2007 16:28:51</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1><A HREF="method.pl?path=/home/max/;task=task_template;command=create">task_template</A></TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    </TABLE>
    <p /><br />
    </body>
    </html>

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    There is simply a hyphen (2005r02-iw) in the first line !
    NB: The match method need in principles a regular expression /\-/ or /-/ for a single dash. A boolean /-/.test(mytab.rows[i].innerHTML) would be preferable...
    Last edited by 007Julien; 06-26-2012 at 07:52 AM.

  3. #3
    Join Date
    May 2012
    Posts
    38
    Hi Julien,

    Can you please write me the exact syntax. I am trying with the following but not working:

    if (mytab.rows[i].innerHTML.match(/\-/)){

    Please help.

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    Simply
    Code:
    if (/\-/.test(mytab.rows[i].innerHTML)) { A dash exists ...}

  5. #5
    Join Date
    May 2012
    Posts
    38
    Hi Julien

    Thanks , it helped. I put some alert to debug and a more stringent expression as :

    if (/\W\-\W/.test(mytab.rows[i].innerHTML)){
    But just one more issue, the thing is I am using this javascript in the following html wherein there is a "Status" column with drop-down. If I select "valid" then all the rows having some status (IN,CO) will appear and the rows having "-" as status will be discarded. It is working fine but please notice after filtering the content of the third and fourth rows are shifting from their corresponding column headers. I could not find a reason for that, would be great if you can point me out or provide a solution:

    Code:
    <html>
    <head>
    <title>Collections</title>
    
      <TABLE BORDER=1 id="maintab"  ><TR BGCOLOR="#D0D0D0">
        <TH ALIGN=LEFT>Task</TH><TH ALIGN=LEFT>Command</TH><TH ALIGN=LEFT>Method</TH><TH
    	ALIGN=LEFT>Status<BR>
    	
    	
    <select onchange="showRows(this.value)">
    <option value="all">show status</option>
    <option value="all">all</option>
    <option value="active">valid</option>
    </select>
    	
    	
    	</TH><TH ALIGN=LEFT>Task version</TH><TH ALIGN=LEFT>Tool version</TH><TH
    	ALIGN=LEFT>Last changed</TH><TH ALIGN=LEFT>Comments</TH></TR> 
     
    <script type="text/javascript">
    mytab=document.getElementById("maintab")
    function showRows(val){
    
    alert (val);
    for (var i = 0; i < mytab.rows.length; i++) {
    if (val=="all"){
    mytab.rows[i].style.display="table-row"
    		} else {
    
    var x = mytab.rows[i].innerHTML;
    //alert (x);
    if (/\W\-\W/.test(mytab.rows[i].innerHTML)){
    //alert ("Single hyphen matched");
    
    mytab.rows[i].style.display="none"
    }		
    		} //else blk end
    	}
    } ;
    
    </script>
     
    	<TR><TD rowspan=1>task_template</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:33:24</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_commands</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 16:39:14</TD><TD NOWRAP>forced by lintz</TD></TR>
    <TR><TD rowspan=1>task_template_commands</TD><TD rowspan=1>func_verify</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=3>task_template_commands</TD><TD rowspan=3>methods_options</TD><TD NOWRAP>method1</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD NOWRAP>method2</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD NOWRAP>method3</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:48:51</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=3>task_template_commands</TD><TD rowspan=3>with_methods</TD><TD NOWRAP>method1</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD NOWRAP>method2</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD NOWRAP>method3</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:49:17</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_commands</TD><TD rowspan=1>with_options</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Thu Dec 9 2010 11:56:59</TD><TD NOWRAP>forced by lintz</TD></TR>
    <TR><TD rowspan=1>task_template_exec_fail</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_exec_partially_fail</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_exec_partially_fail_coll_scope</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=2>task_template_methods</TD><TD rowspan=2>create</TD><TD NOWRAP>method1</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:34:14</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD NOWRAP>method2</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:35:12</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_methods_exec_fail</TD><TD rowspan=1>create</TD><TD NOWRAP>method1</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:37:08</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_oodc</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_oodc_no_inData</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:36:27</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_oodc_no_log</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:36:16</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_oodc_no_outData</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:36:01</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_oodc_par</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:36:03</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_par_fail</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:50:07</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_par_qualify_dep</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_parallel</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:52:49</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=4>task_template_qualify_dep</TD><TD rowspan=4>create</TD><TD NOWRAP>method1</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD NOWRAP>method2</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD NOWRAP>method3</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD NOWRAP>parallel</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=3>task_template_qualify_dep_options</TD><TD rowspan=3>create</TD><TD NOWRAP>method1</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD NOWRAP>method2</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD NOWRAP>method3</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_resource_requ</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:40:09</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_result_checks</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:37:32</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_result_checks_exec_fail</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:37:56</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_result_checks_res_fail</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP><FONT COLOR="red">IN</FONT></TD><TD NOWRAP>CO</TD><TD NOWRAP>CO</TD><TD NOWRAP>Wed Dec 8 2010 12:42:10</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=3>task_template_soft_dep</TD><TD rowspan=3>create</TD><TD NOWRAP>method1</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD NOWRAP>method2</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD NOWRAP>method3</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    <TR><TD rowspan=1>task_template_tool_call</TD><TD rowspan=1>create</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>-</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD><TD NOWRAP>&nbsp;</TD></TR>
    </TABLE>
    
    <p /><br />
    </body>
    </html>
    Last edited by myuser; 06-27-2012 at 06:22 AM.

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    At first your code will be clearer with something like this
    Code:
    function showRows(val){
    	for (var i = 0; i < mytab.rows.length; i++) {
    		if (val=="all" || !/\W\-\W/.test(mytab.rows[i].innerHTML))
    			mytab.rows[i].style.display="table-row";
    		else mytab.rows[i].style.display="none";
    	}
    }
    Then if you do not want to remove your rowspans, you have to change their values when you do not display a line. Then, as soon as you meet a rowspan!=1 in the loop, it is necessary to put lines in memory before to display them with the good value for the rowspan... Good Luck !

  7. #7
    Join Date
    May 2012
    Posts
    38
    Ooops..

    you mean if change my rowspan to 1 and next time if I select "all" from the drop-down , then all rows have to be restored back with their appropriate rowspan value ?

    Is that possible to implement ? Any idea please.

    Thanks.

  8. #8
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    I mean, a simple solution consists to remove all rowspan by repeating always the two first columns.
    Otherwise, when you find a row with rowspan=x (with 1<x), you have to read the x-1 following one to count the lines to be displayed before to display the suitable lines with the good value for rowspan.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles