From my question How to change CSS with jquery?, I now understant what I need to learn and what I want to do.
I want to add class active or inactive depends on the value with jquery.
For example changing
<td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/21">active</a></td>
to
<td align='center'><a class="active" href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/21">active</a></td>
and
<td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/15">inactive</a></td>
to
<td align='center'><a class="inactive" href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/15">inactive</a></td>
The following HTML is generated dynamically. When I click, active, inactive, edit and delete, the page is reloaded.
...
...
<tr valign='top'>
<td align='center'>21</td>
<td>Kontakt</td>
<td>/kontakt.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/21">active</a></td>
<td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/21">edit</a> | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/21">delete</a></td>
</tr>
<tr valign='top'>
<td align='center'>15</td>
<td>Web Design Tjenester</td>
<td>/webdesigndetails.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/15">inactive</a></td>
<td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/15">edit</a> | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/15">delete</a></td>
</tr>
<tr valign='top'>
<td align='center'>5</td>
<td>Forsiden</td>
<td>/forsiden.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/5">active</a></td>
<td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/5">edit</a> | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/5">delete</a></td>
</tr>
$("a:contains('active'), a:contains('inactive')").each(function()
{
$(this).addClass($(this).text());
});
Perhaps?
You could put your default class in, then toggle another class (activeClass) such as
$('a').click(function(myevent) {
$(this).toggleClass('activeClass');
myevent.preventDefault();// if you do not want the link to be activated...
});
Note that you do not really need a link 'a' element, for this if you are preventing defaults and a div with text or an image element in it might be better - it has no default you would need to prevent. You could then inject the html in the div with the .html() jQuery or text with the .text().
EDIT1: One other tidbit, you can detect the class automatically using the .hasClass('active') such as:
$(this).click(function()
{
if ($(this).hasClass('active'))
{
// do what you want here
};
});
This would do the trick if you want to set class to the links depending on their text.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<style>
.inactive
{
color: red;
}
.active
{
color: green;
}
</style>
<script type="text/javascript">
// ensure that the jquery and the page contents has
// been loaded, and run the class adding script
$(document).ready
(
function()
{
// get all links, and iterate trough them
$('a').each
(
function (index, value)
{
// set the class of each item to be equal to its text (or inner html)
$(value).addClass($(value).html());
}
)
}
);
</script>
</head>
<body>
<table>
<tr valign='top'>
<td align='center'>21</td>
<td>Kontakt</td>
<td>/kontakt.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/21">active</a></td>
<td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/21">edit</a> | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/21">delete</a></td>
</tr>
<tr valign='top'>
<td align='center'>15</td>
<td>Web Design Tjenester</td>
<td>/webdesigndetails.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/15">inactive</a></td>
<td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/15">edit</a> | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/15">delete</a></td>
</tr>
<tr valign='top'>
<td align='center'>5</td>
<td>Forsiden</td>
<td>/forsiden.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/5">active</a></td>
<td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/5">edit</a> | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/5">delete</a></td>
</tr>
</table>
</body>
</html>
