JavaScript Filtering help

xaverian · 05-16-2012, 05:45 AM

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"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">H1p</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">H1c</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">adex</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">ds</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">mec</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">admsSim_post</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">Sim_pre</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </td></tr>
<tr><td rowspan="1">amsdSim_post</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </td></tr>
<tr><td rowspan="1">amsdSim_pre</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </td></tr>
<tr><td rowspan="1">antdrc</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </td></tr>
<tr><td rowspan="1">archive</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">avenue</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">cdl</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </td></tr>
<tr><td rowspan="1">cdl_pre</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </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"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </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"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </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"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </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"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">dssc_schematic</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">diosearch</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">drc</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </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>

xaverian · 05-16-2012, 05:27 PM

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.

sunfighter · 05-16-2012, 06:04 PM

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

xaverian · 05-21-2012, 12:55 PM

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.

Goos · 05-21-2012, 10:51 PM

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{

 display: none;

}

</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=0, i=rows.length-1; i>0; i--){

  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 != 1 && rs > counter){

    counter = 0;

    tc(i, 0);

    tc(i, 1);

   }

  }//else

 }//for

};



</script>



</head>

<body>



 <table />



</body>

</html>

xaverian · 05-22-2012, 06:48 AM

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.

sunfighter · 05-22-2012, 02:18 PM

@ xaverian, don't go away. Everything has a solution and this one is not very hard. Should have answer to you today.

xaverian · 05-24-2012, 06:58 AM

@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"> </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"> </td></tr>
<tr><td rowspan="1">amsdSim_post</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </td></tr>
<tr><td rowspan="1">amsdSim_pre</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </td></tr>
<tr><td rowspan="1">antdrc</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </td></tr>

<tr><td rowspan="1">cdl</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </td></tr>
<tr><td rowspan="1">cdl_pre</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </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"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </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"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>

<tr>
<tr><td rowspan="1">drc</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </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>

sunfighter · 05-24-2012, 03:08 PM

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

xaverian · 05-25-2012, 08:03 AM

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.

xaverian · 05-25-2012, 08:06 AM

<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"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">H1p</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">H1c</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">adex</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">ds</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">mec</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">admsSim_post</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">Sim_pre</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </td></tr>
<tr><td rowspan="1">amsdSim_post</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </td></tr>
<tr><td rowspan="1">amsdSim_pre</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </td></tr>
<tr><td rowspan="1">antdrc</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </td></tr>
<tr><td rowspan="1">archive</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">avenue</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">cdl</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </td></tr>
<tr><td rowspan="1">cdl_pre</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </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"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </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"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </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"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </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"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td nowrap="nowrap">dssc_schematic</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">diosearch</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr>
<tr><td rowspan="1">drc</td><td rowspan="1">exec</td><td nowrap="nowrap"> </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"> </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>

sunfighter · 05-25-2012, 05:09 PM

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

felgall · 05-25-2012, 09:24 PM

Quote:

Originally Posted by sunfighter

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.

xaverian · 05-26-2012, 08:04 AM

Hi
I won't be able to inform you about the exact IE version before Monday.

Thanks.

xaverian · 05-28-2012, 12:22 PM

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.