Logan Voss Logan Voss - 1 month ago 7
HTML Question

Changing the .html of each <td> on click

This is my first attempt using

this
from scratch, I'm not sure I understand it correctly. I'm trying to change whichever
<td>
that has a
+
in it to a
-
on click and vice versa.
I'm not getting any errors and I'm not sure what specifically I'm doing wrong. Nothing happens on click. I have other jquery on the page that works fine.

echo "<script type'text/javascript'>
$('.plus_minus').each(function() {
$(this).click(function(){
if ($(this).html() == '+'){
$(this).html = '-';
}
else {
$(this).html = '+';
}

})
});

</script>";


the html looks like

echo '<tr align="right" class="loc"><td class="plus_minus" width="20" align="center"
bordercolor="#000000"
style="cursor:pointer;font-size:10pt;font-weight:bold;
border-style:solid;border-width:1pt">+</td>';


Any help would be much appreciated!

Answer

$('.plus_minus').each(function() {
   $(this).click(function(){
        if ($(this).text() == '+'){
            $(this).text('-');
        }
        else {
            $(this).text('+');
        }

   })
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr align="right" class="loc"><td class="plus_minus" width="20" align="center" 
            bordercolor="#000000"
            style="cursor:pointer;font-size:10pt;font-weight:bold;
            border-style:solid;border-width:1pt">+</td>
</tr>
</table>

Comments