9 Replies - 688 Views - Last Post: 13 December 2011 - 07:43 AM

#1 McSick  Icon User is offline

  • D.I.C Head

Reputation: 33
  • View blog
  • Posts: 179
  • Joined: 02-September 10

Display = None Table

Posted 01 December 2011 - 02:39 PM

So I have this amazing table and now I wanted to implement a simple search algorithm for it. Basically it goes through 4 columns and searches if the start of the word in the column matches a string from an input. If not then I wanted it to hide the row using .style.display = 'none';

I have code and it seems to be working except for the actual changing the display property. Using debugging alerts, I have found it made through the functions just fine with no errors in the console.....Am I doing something wrong?


function doSearch(e) {


  var table=document.getElementById('add');

  for( var i=1;i<table.rows.length;i++){
          //alert(e.value);
          //alert(table.rows[i].cells[1].innerHTML.substring(0,e.value.length));
    
          if(e.value == table.rows[i].cells[1].innerHTML.substring(0,e.value.length) || e.value == table.rows[i].cells[2].innerHTML.substring(0,e.value.length) || e.value == table.rows[i].cells[3].innerHTML.substring(0,e.value.length)){
            table.rows[i].style.display == '';
           }else{
            table.rows[i].style.display == "none";
        
     }
     }

This post has been edited by McSick: 01 December 2011 - 02:41 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Display = None Table

#2 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

Re: Display = None Table

Posted 01 December 2011 - 10:37 PM

You want to hide the row of what?
Was This Post Helpful? 0
  • +
  • -

#3 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

Re: Display = None Table

Posted 01 December 2011 - 11:00 PM

And what's the requirements of that row for it to be hidden?
Was This Post Helpful? 0
  • +
  • -

#4 McSick  Icon User is offline

  • D.I.C Head

Reputation: 33
  • View blog
  • Posts: 179
  • Joined: 02-September 10

Re: Display = None Table

Posted 02 December 2011 - 09:12 AM

I was trying to hide the row of the table if it does not have a string found in it. The conditional statement works just fine. Its setting the property that is not working...like going
table.rows[i].style.display = "none";
My intuition says this would set the row style to none...
Was This Post Helpful? 0
  • +
  • -

#5 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

Re: Display = None Table

Posted 06 December 2011 - 06:35 PM

Try:

table.rows[i].style.visibility = "hidden";


Sorry for the late reply. Kinda busy at the moment.

As a bonus, here it is in a sample implementation, with a "show" feature.

<html>
<head>
<script type="text/javascript">
function hideGeronimo(){
tbl = document.getElementById("t1");
for(var x = 0; x < tbl.rows.length; x++)
if(tbl.rows[x].cells[0].innerHTML== "Geronimo"){
tbl.rows[x].style.visibility = "hidden";
}
}
function showGeronimo(){
tbl = document.getElementById("t1");
for(var x = 0; x < tbl.rows.length; x++)
if(tbl.rows[x].cells[0].innerHTML== "Geronimo"){
tbl.rows[x].style.visibility = "visible";
}
}
</script>
</head>
<body>
<table id="t1" border="1px solid black">
<tr><td>Geronimo</td></tr>
<tr><td>Sparta</td></tr>
<tr><td>Mayday</td></tr>
<tr><td>Geronimo</td></tr>
<tr><td>Awoo</td></tr>
</table>
<input type="button" value="Hide Geronimo! Quick!" onclick="hideGeronimo()"/></br>
<input type="button" value="Show Geronimo! Fast!" onclick="showGeronimo()"/>
</body>
</html>



Happy coding. ^^
Was This Post Helpful? 2
  • +
  • -

#6 satis  Icon User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

Re: Display = None Table

Posted 07 December 2011 - 07:18 AM

FYI, I think the problem in your original code is this:

	if(e.value == table.rows[i].cells[1].innerHTML.substring(0,e.value.length) || e.value == table.rows[i].cells[2].innerHTML.substring(0,e.value.length) || e.value == table.rows[i].cells[3].innerHTML.substring(0,e.value.length)){
		table.rows[i].style.display == '';
	}
	else{
		table.rows[i].style.display == "none";
    }


You're using == instead of =. You're doing a comparison, not a set. It should be:

	if(e.value == table.rows[i].cells[1].innerHTML.substring(0,e.value.length) || e.value == table.rows[i].cells[2].innerHTML.substring(0,e.value.length) || e.value == table.rows[i].cells[3].innerHTML.substring(0,e.value.length)){
		table.rows[i].style.display = '';
	}
	else{
		table.rows[i].style.display = "none";
    }


I didn't test it, so there may still be other problems, but that would definitely cause a problem.
Was This Post Helpful? 1
  • +
  • -

#7 McSick  Icon User is offline

  • D.I.C Head

Reputation: 33
  • View blog
  • Posts: 179
  • Joined: 02-September 10

Re: Display = None Table

Posted 13 December 2011 - 06:17 AM

@fromthesprawl....Thanks!!! This did work! @satis Also thanks, Total fail by me right there.


Now here is a question for yall. I have this giant table in the div and my code searches the table from user input. It starts filtering out rows if they do not match the text. The code above was altered to use visibility and this works, however it stays in its location in the div. Is there a way to reorder rows such that only visible ones show? I mean I could just loop over the whole table again and move it up I guess.
Was This Post Helpful? 0
  • +
  • -

#8 satis  Icon User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

Re: Display = None Table

Posted 13 December 2011 - 06:57 AM

well, if you're changing the visibility, then only the visible rows are showing. What do you want to do with the hidden rows? You could stuff them into the end of the table or something if you wanted to, but I'm not sure I see a point in it. What are you trying to accomplish?
Was This Post Helpful? 0
  • +
  • -

#9 McSick  Icon User is offline

  • D.I.C Head

Reputation: 33
  • View blog
  • Posts: 179
  • Joined: 02-September 10

Re: Display = None Table

Posted 13 December 2011 - 07:10 AM

Basically a search box that searches say a username, letter by letter, and makes all matching queries towards the end of the table and invisible.
Was This Post Helpful? 0
  • +
  • -

#10 satis  Icon User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

Re: Display = None Table

Posted 13 December 2011 - 07:43 AM

But what's the advantage to moving the hidden rows to the end of the table? They're not visible anyway... you could shuffle the rows around, but the only different would be the html structure. From an end-user perspective, you'd be adding complexity and cpu/memory usage for absolutely no gain, since they can't see those rows anyway. If you've got a legitimate reason to do it, by all means, I just don't see a legitimate reason.

Anyway, here's how I would do it. A quick example where I pull out every 3rd row and just stuff it into the end of the table.
<html>
<head>
<script type='text/javascript'>
	function sort(){
		var tbody = document.getElementsByTagName('table')[0].getElementsByTagName('tbody')[0];
		var rows = tbody.getElementsByTagName('tr');
		var rowArray = new Array();
		
		for(var i=0; i<rows.length; i++){
			if(i % 3 == 0){	//take every 3rd row
				rowArray[rowArray.length] = rows[i];		//save a reference to the row
			}
		}
		
		//now loop back through to remove the rows and insert the rows into the end of the table
		for(var i=0; i<rowArray.length; i++){
			tbody.removeChild(rowArray[i]);
			tbody.appendChild(rowArray[i]);
		}
	}

</script>
<style type='text/css'>
	table{
		border: 1px solid #000000;
	}
	td{
		border-bottom: 1px solid #000000;
	}
</style>
</head>
<body>

<table>
	<tbody>
		<tr><td>Row 1</td></tr>
		<tr><td>Row 2</td></tr>
		<tr><td>Row 3</td></tr>
		<tr><td>Row 4</td></tr>
		<tr><td>Row 5</td></tr>
		<tr><td>Row 6</td></tr>
		<tr><td>Row 7</td></tr>
		<tr><td>Row 8</td></tr>
		<tr><td>Row 9</td></tr>
		<tr><td>Row 10</td></tr>
		<tr><td>Row 11</td></tr>
	</tbody>
</table>
<button onclick='sort()'>Sort</button>

</body>
</html>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1