data- attribute help
Posted: Wed Mar 19, 2014 9:52 am
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...
OR
And the Javascript...
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:
OR
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.
Does anyone have any pointers on how to make this work, please?
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>
Code: Select all
<tr name='future'><td>$eventDate</td><td>$eventDetails</td></tr>
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 = "";
}
}
}
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>
Code: Select all
<tr name='future' data-semester='SEM'><td>$eventDate</td><td>$eventDetails</td></tr>
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);
}