Alright, welcome to part 2 of my Creating a Category Splitter tutorial. Before we begin, let's re-cap what we learned in the previous tutorial. Here's the code we have so far:
<script type='text/javascript'>
/* My Little Category Splitter */

var newHTML = "";
var theTable = document.getElementsByTagName('table');

var startHTML = "<table width='100%' cellspacing='1' cellpadding='4' class='bordercolor' border='0'>";
var finHTML = "</table><div style='height: 25px;'></div>";
</script>
If you forgot what some of the variables or for or what they are saying, re-read the first tutorial before continuing. That code will do this much to split the categories: doodley-squat. All it will do is define some variables. Woo-hoo! Isn't that cool? [/sarcasm]

Alright, it's time to make our code... DO something. So, how are we going to split the categories? So far, we have everything needed to store info gathered, as well as the info to begin and end each category. However, like I said before, that's not enough. A code is no good without stuff to put in it. We need to get the information from the table that has the categories and cells. To do this, we're going to have to find it, to begin with.

Now, let's find the table. It's the 6th table in a default ProBoards layout. However, some people have tables in their headers. That's too big of a margin for error. Thus, we can't declare which table we'll use with a specified number from the top. Well, that sucks. What about from the bottom? Well, we could. However, there's the problem of the info center. It has tables within it. It can be up to 4 extra tables. That's an even bigger margin for error. Ok, that officially eliminates the possibility of knowing which table has the info by default. It looks like we'll have to loop through all the tables to find which one it is.

To do this, we're just going to use a for loop. How? Simple, just loop through the tables. We'll start from the top. That gives us a better chance of finding it sooner.
<script type='text/javascript'>
/* My Little Category Splitter */

/*=== Declare Variables ===*/
var newHTML = "";
var theTable = document.getElementsByTagName('table');

var startHTML = "<table width='100%' cellspacing='1' cellpadding='4' class='bordercolor' border='0'>";
var finHTML = "</table><div style='height: 25px;'></div>";

/*=== Begin Coding ===*/
for(t=0; t<theTable.length; t++){

}
</script>
Alright, if you remember how for loops work, you should understand what that means. However, for those few who are confused, this is what we said: We have defined t as a variable that has the value of 0. Next, we said that t will always be less then the length of the array of tables we defined earlier. Remember that JavaScript counts from zero. However, array lengths are defined starting from one. This means that if there were 7 total tables, the array would stop once it hit 7 since it always has to be less then 7. Anywho, we lastly declare that t will increase by 1 after it loops through the defined code.

Excellent, we have a loop that will successfully loop through all tables loaded. Is that enough? No! We need to find our specific table. However, the margin for error is wide. We need to narrow it down enough to the point where we cannot find ANY table except for the one we want. To do this, we'll use an if statement.

Making the if statement is the hard part. We're going to search for a table where the first cell has "Forum Name" written in it. Simple enough, right? However, that text could be in the welcome table. To make sure we don't grab the welcome table, we'll look for specific table properties. The welcome table only has a padding of 3px. The table we want has a padding of 4px. That's not enough though. We want to make sure we grab the table itself, not the table it's nested withing. This is how we'll do it:
<script type='text/javascript'>
/* My Little Category Splitter */

/*=== Declare Variables ===*/
var newHTML = "";
var theTable = document.getElementsByTagName('table');

var startHTML = "<table width='100%' cellspacing='1' cellpadding='4' class='bordercolor' border='0'>";
var finHTML = "</table><div style='height: 25px;'></div>";

/*=== Begin Coding ===*/
for(t=0; t<theTable.length; t++){

if(theTable[t].cellSpacing == 1 && theTable[t].cellPadding == 4 && theTable[t].rows[0].cells[0].innerHTML.match(/Forum Name/i)){

}

}
</script>
First off, the code will only return a table who's cell spacing is set to 1px. That eliminates the possibility of grabbing the table that the one we want is nested within. Next, we make sure that the table returned will have a cell padding of 4px. That eliminates the possibility of grabbing the welcome table. Lastly, we make sure that the first cell of the first row has "Forum Name" written in it. That eliminates the possibility of grabbing any table except for the one that we want.

Alright, let's re-cap what we learned today. We have successfully looped through all of the tables that have been loaded so far. We have then found the table that we are looking for, and are ready to start grabbing the information. That is what we will tackle in the next tutorial.

Happy coding!