www.webdeveloper.com
Results 1 to 4 of 4

Thread: Javascript help required on filtering a table column

  1. #1
    Join Date
    May 2012
    Posts
    38

    Javascript help required on filtering a table column

    Hi ,

    I am attaching 3 ".txt" files to explain the problem I am running into. Please save the files in ".html" to see them in browser.

    1. working_table.txt --- In this file if I select "all" as 'show status' from the drop-down at the top of "Status" column, it should display all the rows having both valid status (IN,CO, etc) and invalid status "-" as well. If I choose "valid" only those rows are displayed which have valid status (IN, CO) i.e all rows having status
    "-" will be discarded.

    2. NOT_working.txt -- This is a comparatively complex file as you see the rows having name "Fred","Bill" and "Brad" have a rowspan and their corresponding "Status" cell has multiple values , only "-", only "IN" and combination of both valid and invalid ("-" & "IN).

    For this file the javascript filtering mechanism is failing to display it properly.

    The third file (Expected_display_after_filtering.txt) I am attaching is showing the proper display of those rows having valid "Status".

    3.Expected_display_after_filtering.txt --- The display of this file shows which all rows will be displayed if I select "valid" as 'Status' from the second file (i.e NOT_working.txt).

    Please help me on the javascript coding which will work on both the 1st and 2nd file. Thanks in advance.
    Attached Files Attached Files

  2. #2
    Join Date
    Nov 2010
    Posts
    1,085
    myuser:

    in future, please post your code directly here. attaching text files that we must download then convert is just making more work for us, who are volunteering our time to help you.

    Does this work any better (warning - if any of the table cells contain a dash - they will be hidden. I would suggest using something more unique as an identifier if this seems to work)?

    Code:
    <!DOCTYPE HTML>
    	<head>
    	</head>
    	
    	<body>
    <div class="aa">
    <table width="75%" border="1" id="mytable">
      <tr>
        <td>Name</d>
    	<td>Number</d>
        <td>Status<br><select onchange="showRows(this.value)">
    <option value="all">show status</option>
    <option value="all">all</option>
    <option value="active">valid</option>
    </select>
    </td>
    <td>Comment</td>
      </tr>
      <tr>
        <td>John</td>
    	<td>2</td>
        <td>IN</td>
        <td>Comment one</td>
      </tr>
      <tr>
        <td>Bob</td>
    	<td>3</td>
        <td>CO</td>
        <td>Comment two</td>
      </tr>
      <tr>
        <td rowspan=2>Fred</td>
    	<td rowspan=2>4</td>
       <td>-</td><td>Comment three</td></tr>
      <tr> <td>-</td><td>Comment four</td></tr>
      <tr>
        <td rowspan=2>Bill</td>
    	<td rowspan=2>4</td>
       <td>IN</td><td>Comment five</td></tr>
      <tr> <td>IN</td><td>Comment six</td></tr>
      <tr>
        <td rowspan=3>Brad</td>
    	<td rowspan=3>4</td>
       <td>IN</td><td>Comment seven</td></tr>
      <tr> <td>-</td><td>Comment eight</td></tr>
      <tr> <td>-</td><td>Comment nine</td></tr>
    
    </div>
      </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"
    }		
    
      
    		} //else blk end
    	}
    }
    </script>
    </body>
    </html>
    
    </html>
    Last edited by xelawho; 05-13-2012 at 10:02 AM.

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

    The solution is definitely working as per my requirement.

    But the only thing is, for the following html it is just not properly working for a single row. 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.

    Otherwise it is working fine.

    Below is the code. And my apologies to have attached files previously.

    <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>

  4. #4
    Join Date
    May 2012
    Posts
    38
    Hi xelawho,

    Can you please provide any solution to this problem ?

    Thanks.

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