Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    55
    Thanks
    3
    Thanked 0 Times in 0 Posts

    JavaScript Filtering help

    Hi ,

    I need a javascript help for the following snippet of html code. The html displays Data in tabular format. There is drop-down at the 'Status" column of this table.
    If the status is chosen as 'all', then all the rows will be displayed having status ('CO','OK','IN' and '-'). But if the status is selected as 'valid', then the rows having
    '-' as status will be discarded and only rows having 'CO','OK,'IN' as status will be displayed.
    The following code is working except for a single row once I select 'valid' as Status from the drop-down.
    Please notice the cell under "Task" column having value 'checkRsf1'
    and its immediate right cell containing 'exec' under "Command" column is not coming at all after filtering by "valid". Instead the 'esdnet' and 'IN' (under Method and Status column) are getting shifted to left under wrong column head.

    Thanks in advance. Below is the html embedded with Javascript.
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="/css/tree.css" />
    </head>
    <body style="background-color:#fff">
    <table border="1" id="mytable"><tr style="background-color:#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</th><th align="left">Last changed</th><th align="left">Comments</th></tr>
    <tr><td rowspan="1">char32</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">H1p</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">H1c</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">adex</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">ds</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">mec</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">admsSim_post</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">Sim_pre</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">CO</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 24 </td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">amsdSim_post</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">OK</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 21 </td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">amsdSim_pre</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">OK</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">May 3 </td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">antdrc</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">CO</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 24</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">archive</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">avenue</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">cdl</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">IN</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 2</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">cdl_pre</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">CO</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 8</td><td nowrap="nowrap">&nbsp;</td></tr>

    <tr><td rowspan="5">checkRsf</td><td rowspan="5">exec</td><td nowrap="nowrap">antdrc</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>


    <tr><td rowspan="5">checkRsf1</td><td rowspan="5">exec</td><td nowrap="nowrap">antdrcres</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>


    <tr><td rowspan="5">checkRsf2</td><td rowspan="5">exec</td><td nowrap="nowrap">antdrcres</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>

    <tr><td rowspan="2">

    designSync</td><td rowspan="2">exec</td><td nowrap="nowrap">dssc_layout</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">dssc_schematic</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">diosearch</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">drc</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">IN</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 3</td><td nowrap="nowrap">&nbsp;</td></tr>

    </table>
    <script type="text/javascript">
    mytab=document.getElementById("mytable")
    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"
    }
    }
    }
    }
    </script>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    May 2012
    Posts
    55
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Can anyone please answer this ? Atleast can anyone look at this and give a try ?

    I have pasted the whole html, one can simply run it on the browser to check and
    point me what is going wrong in the small javascript in it.

    Thanks.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    Your problem is in using mytab.rows.length in your loop. It is true that you have 35 rows, but 4 TASKs have multiple rows and if the first row of any of them has '-' it eliminates the first two columns and there is your error.
    You can use 21 instead or you must do an exception for rowspans

  • #4
    New Coder
    Join Date
    May 2012
    Posts
    55
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Sunfighter,

    Thanks for replying to my problem.

    I can not change 35 rows to 21 rows to get rid of the problem. Because that is
    the original data given to me which I have to filter out.

    Please tell me how can I use exception for rowspan. It would be great if you can provide me a solution.

    Thanks.

  • #5
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    0
    Thanked 13 Times in 12 Posts
    The easiest solution seems to avoid the table from collapsing because of the rowspans, seems to hide the table-cells instead of the table-rows. Then you can keep the first and second cell from hiding, incase they are needed in a rowspan.
    PHP Code:
    <html>
    <
    head>
    <
    style type="text/css">
    tr.hidden td{
     
    displaynone;
    }
    </
    style>

    <
    script type="text/javascript">

    function 
    showRows(val){
     function 
    tc(r,c){
      
    rows[r].cells[c].style.display 'table-cell';
     };

     var 
    rows document.getElementById("mytable").getElementsByTagName('tr'), rs;

     for(var 
    counter=0i=rows.length-1i>0i--){
      
    rs rows[i].firstChild.rowSpan;
      if(!
    rows[i].innerHTML.match("-") || val == 'all'){
       
    counter 0;
       
    rows[i].className '';
      }
      else{
       
    counter++;
       
    rows[i].className 'hidden';
       if(
    rs != && rs counter){
        
    counter 0;
        
    tc(i0);
        
    tc(i1);
       }
      }
    //else
     
    }//for
    };

    </script>

    </head>
    <body>

     <table />

    </body>
    </html> 

  • #6
    New Coder
    Join Date
    May 2012
    Posts
    55
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Sunfighter,

    The solution is working but the display of data after filtering is not matching upto my requirement. It seems there is no solution of it.

    Thanks anyways for your help.

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    @ xaverian, don't go away. Everything has a solution and this one is not very hard. Should have answer to you today.

  • #8
    New Coder
    Join Date
    May 2012
    Posts
    55
    Thanks
    3
    Thanked 0 Times in 0 Posts
    @sunfighter

    Ok, I trust on your words and not losing hope.

    Actually this small thing has turned out to be a big prob, not getting satisfactory solution. Anyways for ease of your understanding of the requirement I am including an html below. This below html display is the desired output I want to have after filtering the column as "valid" . You can see all the valid rows (13 as it counts for valid status) are coming neatly and the cell values are appropriately placed under relevant columns,especially the 'checkRsf1' cells under "Task" column which is giving the problem. Please have a look at this html below, I hope that would help you to program it such a way so that it meets the desired display. Please help. Don't try to filter it because this is already the filtered output I, I have edited it just to show you the desired display. Thanks a lot for your help.

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="/css/tree.css" />
    </head>
    <body style="background-color:#fff">
    <table border="1" id="mytable"><tr style="background-color:#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</th><th align="left">Last changed</th><th align="left">Comments</th></tr>

    <tr><td rowspan="1">Sim_pre</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">CO</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 24 </td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">amsdSim_post</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">OK</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 21 </td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">amsdSim_pre</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">OK</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">May 3 </td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">antdrc</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">CO</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 24</td><td nowrap="nowrap">&nbsp;</td></tr>

    <tr><td rowspan="1">cdl</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">IN</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 2</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">cdl_pre</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">CO</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 8</td><td nowrap="nowrap">&nbsp;</td></tr>


    <tr><td rowspan="2">checkRsf1</td><td rowspan="2">exec</td>
    <tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>


    <tr><td rowspan="5">checkRsf2</td><td rowspan="5">exec</td><td nowrap="nowrap">antdrcres</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>

    <tr>
    <tr><td rowspan="1">drc</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">IN</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 3</td><td nowrap="nowrap">&nbsp;</td></tr>

    </table>
    <script type="text/javascript">
    mytab=document.getElementById("mytable")
    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"
    }
    }
    }
    }
    </script>
    </body>
    </html>

  • #9
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    @ xaverian, this has passed all of my tests. Your mileage may very. Test it good.

    My logic: the line
    Code:
    mytab.rows[i].style.display="none"
    works ok up until you run into a row that starts with a rowSpan of 2 or more. That isn't so bad if the first row in the rowSpan is not deleted. If it is it takes the first two columns away from every row in the span. SO:

    When there is a rowSpan I leave the first row alone and work on the rest of the span. if it has a dash I delete the row. if not I get the row number of the first row that does this and continue. When I have finished with the span, the second line is a non dash line or there is no more lines. It is then that I replace the first row with the second row and delete the second row.

    If you have trouble with the logic or the coding just ask for clarification.
    This is the javascript to replace what you have:

    Code:
    <script type="text/javascript">
    mytab=document.getElementById("mytable")
    function showRows(val)
    {
    	for (var i = 1; i < mytab.rows.length; i++)
    	{
    		if (val=="all")
    		{
    			mytab.rows[i].style.display="table-row"
    		}
    
    		if (val=="active")
    		{
    			if(mytab.rows[i].cells[0].rowSpan > 1)
    			{
    				var loco = 'no';
    				var hold_col1 = mytab.rows[i].cells[0].innerHTML;
    				var hold_col2 = mytab.rows[i].cells[1].innerHTML;
    				if(mytab.rows[i].innerHTML.match("-")) loco = 'yes';
    				var spanor = mytab.rows[i].cells[0].rowSpan;
    				var end = i + spanor;
    				var nota_dash = 0;
    				for (var y = i+1; y < end; y++)
    				{
    					if (mytab.rows[y].innerHTML.match("-"))
    					{
    						mytab.rows[y].style.display="none";
    						--mytab.rows[i].cells[0].rowSpan;
    						--mytab.rows[i].cells[1].rowSpan;
    					}else{
    						if(nota_dash == 0) nota_dash = y;
    
    					}
    				}
    			if(loco == 'yes')
    			{
    				if(nota_dash == 0)
    				{
    					mytab.rows[i].style.display="none";
    				}else{
    					mytab.rows[i].innerHTML = '<td>'+hold_col1+'</td><td>'+hold_col2+'</td>'+mytab.rows[nota_dash].innerHTML;
    					mytab.rows[nota_dash].style.display="none";
    				}
    			}
    			}else{
    				if (mytab.rows[i].innerHTML.match("-")) {mytab.rows[i].style.display="none"};
    			}
    		if (mytab.rows[i].innerHTML.match("-")) {mytab.rows[i].style.display="none"};
    		}
    	}
    }
    </script>

  • #10
    New Coder
    Join Date
    May 2012
    Posts
    55
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Sunfighter,

    This is still not working. Did you see the html I pasted in my last reply, the display should be like that after filtering. After filtering on the status column only those rows will be displayed which have a valid status as ('IN', 'OK') and all other rows having status as '-' will be discarded.

    I tried your solution as follows, and see it is not working at all. The rows having '-' status are coming after filtering and the display is a mess. Even if I go back to the previous view by selecting "show all" , then also the display is not proper.

    I am sending you my testcase in a new reply , please try that to check it on your own.

  • #11
    New Coder
    Join Date
    May 2012
    Posts
    55
    Thanks
    3
    Thanked 0 Times in 0 Posts
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="/css/tree.css" />


    </head>
    <body style="background-color:#fff">
    <table border="1" id="mytable"><tr style="background-color:#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</th><th align="left">Last changed</th><th align="left">Comments</th></tr>
    <tr><td rowspan="1">char32</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">H1p</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">H1c</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">adex</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">ds</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">mec</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">admsSim_post</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">Sim_pre</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">CO</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 24 </td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">amsdSim_post</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">OK</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 21 </td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">amsdSim_pre</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">OK</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">May 3 </td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">antdrc</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">CO</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 24</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">archive</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">avenue</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">cdl</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">IN</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 2</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">cdl_pre</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">CO</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 8</td><td nowrap="nowrap">&nbsp;</td></tr>

    <tr><td rowspan="5">checkRsf</td><td rowspan="5">exec</td><td nowrap="nowrap">antdrc</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>


    <tr><td rowspan="5">checkRsf1</td><td rowspan="5">exec</td><td nowrap="nowrap">antdrcres</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>


    <tr><td rowspan="5">checkRsf2</td><td rowspan="5">exec</td><td nowrap="nowrap">antdrcres</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">IN</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>

    <tr><td rowspan="2">

    designSync</td><td rowspan="2">exec</td><td nowrap="nowrap">dssc_layout</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td nowrap="nowrap">dssc_schematic</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">diosearch</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">-</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td></tr>
    <tr><td rowspan="1">drc</td><td rowspan="1">exec</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap"><font color="red">IN</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 3</td><td nowrap="nowrap">&nbsp;</td></tr>

    </table>

    <script type="text/javascript">
    mytab=document.getElementById("mytable")
    function showRows(val)
    {
    for (var i = 1; i < mytab.rows.length; i++)
    {
    if (val=="all")
    {
    mytab.rows[i].style.display="table-row"
    }

    if (val=="active")
    {
    if(mytab.rows[i].cells[0].rowSpan > 1)
    {
    var loco = 'no';
    var hold_col1 = mytab.rows[i].cells[0].innerHTML;
    var hold_col2 = mytab.rows[i].cells[1].innerHTML;
    if(mytab.rows[i].innerHTML.match("-")) loco = 'yes';
    var spanor = mytab.rows[i].cells[0].rowSpan;
    var end = i + spanor;
    var nota_dash = 0;
    for (var y = i+1; y < end; y++)
    {
    if (mytab.rows[y].innerHTML.match("-"))
    {
    mytab.rows[y].style.display="none";
    --mytab.rows[i].cells[0].rowSpan;
    --mytab.rows[i].cells[1].rowSpan;
    }else{
    if(nota_dash == 0) nota_dash = y;

    }
    }
    if(loco == 'yes')
    {
    if(nota_dash == 0)
    {
    mytab.rows[i].style.display="none";
    }else{
    mytab.rows[i].innerHTML = '<td>'+hold_col1+'</td><td>'+hold_col2+'</td>'+mytab.rows[nota_dash].innerHTML;
    mytab.rows[nota_dash].style.display="none";
    }
    }
    }else{
    if (mytab.rows[i].innerHTML.match("-")) {mytab.rows[i].style.display="none"};
    }
    if (mytab.rows[i].innerHTML.match("-")) {mytab.rows[i].style.display="none"};
    }
    }
    }
    </script>




    </body>
    </html>

  • #12
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    It's the old story - works in everything except IE. Let me work a little more. What ver IE are you testing in? I have 8, have you tried 9? Also this does need a doc type.

    Use:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  • #13
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by sunfighter View Post
    Use:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    Never use that doctype for new pages written after 2005.

    The appropriate doctype to use is:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    Once you have that in place the next step is to go to http://validator.w3.org and validate the HTML.

    Only once you have the HTML valid is it reasonable to look at the JavaScript. Invalid HTML is often the cause of JavaScript not working properly.

    XHTML requires the use of a completely different set of JavaScript commands to access the page that are incompatible with HTML. IE8 and earlier do not understand XHTML and so offer the page for download instead of displaying it.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #14
    New Coder
    Join Date
    May 2012
    Posts
    55
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi
    I won't be able to inform you about the exact IE version before Monday.

    Thanks.

  • #15
    New Coder
    Join Date
    May 2012
    Posts
    55
    Thanks
    3
    Thanked 0 Times in 0 Posts
    My IE version is 8.0.7601.17514.

    Anyways @sunfighter ...thanks for your effort.

    Will be good if you can explain the entire code and its logic that you wrote.
    Actually I am new to JavaScript. So please explain the following line

    mytab.rows[i].style.display="table-row"


    What is table-row, please also refer me a simple javascript tutorial other than
    w3school which contains all these things (table-row, rowspan) with lucid examples.

    Thanks.


  •  

    Posting Permissions

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