Page 1 of 1

data- attribute help

Posted: Wed Mar 19, 2014 9:52 am
by Eric Praline
Hi everyone

I've developed a system to display various events, ordered by date. By default it only displays events which occur in the future, but by using a button to do some Javascript/CSS the past events can also be displayed eg.
The HTML / PHP for each table-row...

Code: Select all

<tr name='archive' style='display:none'><td>$eventDate</td><td>$eventDetails</td></tr>
OR

Code: Select all

<tr name='future'><td>$eventDate</td><td>$eventDetails</td></tr>
And the Javascript...

Code: Select all

function toggleArchive() {
	var archiverow = document.getElementsByName("archive");
	var archivelength = archiverow.length;
	for (var i=0; i<archivelength; i++) {
		if (archiverow[i].style.display=="" || archiverow[i].style.display=="table-row") {
			archiverow[i].style.display = "none";
		} else {
			archiverow[i].style.display = "";
		}
	 }
}
This works fine, but now I'm trying to add a bit more choice for the events which are displayed/hidden. Events can either be in Autumn or Spring semester. Obviously they can also be in the past or the future. I'd like to be able to display/hide Autumn or Spring semester events, using a separate button for each, as I have done for the archive events.
I've thought about adding a data- attribute to each table-row eg something like:

Code: Select all

<tr name='archive' data-semester='AUT'><td>$eventDate</td><td>$eventDetails</td></tr>
OR

Code: Select all

<tr name='future' data-semester='SEM'><td>$eventDate</td><td>$eventDetails</td></tr>
However I can't figure out how to then access the value of the attribute and display/hide each table-row as required.

I tried using getAttribute() but that doesn't seem to do what I want to to (or I'm doing it wrong)! I think the following *should* get how many Autum semester events there are, but it doesn't.

Code: Select all

function toggleAutumn() {
	var tr = document.getElementsByName("tr");
	var numAUT = 0;
	for (var i=0; i<tr.length; i++) {
		if (tr[i].getAttribute("data-semester") == "AUT") {
			numAUT++;
		}
	}
        alert(numAut);
}
Does anyone have any pointers on how to make this work, please?