Yo! This is part 3 of the Creating a Category Splitter tutorial series. If you have not already, be sure to read parts 1 & 2 before continuing. If you don't, you'll probably be lost throughout this one.
So, recap time! In part 1, we learned how to setup the variables. In part 2, we learned how to find the table with the boards. Now, we're going to learn how to grab the info. First off, here's our code that we have so far:
<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>To this point, our code should be able to flawlessly locate the table. We also have most of the variables setup that we'll need. Thus, we're on easy street for this lesson. We already know exactly where the table is. Now, let's grab the information from it.
Remember, ALWAYS follow the K.I.S.S. rule. If you don't know what that means, it stands for Keep It Simple, Stupid. Don't go out of your way to do this. Find the easiest method, and use it. We don't need to use RegExp or something to grab the info. Let's just grab ALL the inner HTML from the rows. Easy? Yes. It's very easy, in fact.
Ok, to the code. Before we divide the categories, there's one small bug. Let's fix it now to save us the trouble later. The table behind the one with the boards is what has the border color. We need to remove it. That's pretty simple to do, though. We just need to say that the table before it needs to have a transparent background color.
<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)){
theTable[t-1].style.backgroundColor = 'transparent';
}
}
</script>Yes, it really is that simple. Congrats! Our code actually does something now! However, we both know that's not going to be enough. We need the actual information inside each of the cells. To do this, we're going to have to loop through the cells. This is actually the easy part. We'll just use the same method we used to loop through the tables.
<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)){
theTable[t-1].style.backgroundColor = 'transparent';
for(r=1; r<theTable[t].rows.length; r++){
}
}
}
</script>Now, you might notice something awkward about that for loop. I set the variable r to be equal to
1. Why? We already know what's in the first row (0). There's no point in looping through it. The real info that we need is in all the rows after the first one. Thus, that's where we'll start.
Ok, so we have our second for loop set up. Now, here's what we need to do. We need to set the code so that it will add the start HTML to the stored HTML every time we encounter a category cell. We'll then need to store more information when we encounter a board cell. Lastly, we'll need to close the category after we have all the boards for it. That's the tough part. We'll use some if loops to do it.
First, let's find the category cell. This isn't as simple as you'd think, though...
<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)){
theTable[t-1].style.backgroundColor = 'transparent';
for(r=1; r<theTable[t].rows.length; r++){
if(theTable[t].rows[r].cells[0].className == 'catbg' && theTable[t].rows[r].cells[0].align != 'right'){
}
}
}
}
</script>Notice how I had to use two aspects to find the category cells. I checked to make sure that the class of the cell was
catbg. Then, I made sure that it wasn't aligned to the right. Why? Don't forget about the mark-as-read bar. It has the
catbg class. However, it's aligned to the right. That's why I checked to make sure the cell wasn't aligned to the right.
Alright, I think I've filled your brain with enough info for now. We should know how to loop through the rows of a table. We should also know how to find the cell we want. It'll get much easier once we get to the board cells. We've taken care of the hard parts, for the most part. It should be smooth sailing from here-on-out.
Last Edit: Nov 19, 2006 22:30:23 GMT by Scorpian
