html - How to Change a Picture inside of a Table using jQuery -
when press plus button, change picture minus
![]()
when have toggled out, can see minus picture , click on picture, changed plus picture.
questions:
not know how create based on description above using jquery.
thanks!
$(function () { $('tr.parent td') .on("click", "span.btnn", function () { var idofparent = $(this).parents('tr').attr('id'); $('tr.child-' + idofparent).toggle('slow'); }); }); $('tr.child').hide(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <table> <tr> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th></th> </tr> <tr class="parent" id=1048> <td><span class="btnn">2015 july </span></td> <td></td> <td></td> <td><span class="btnn"><img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png" /></span></td> </tr> <tr class="child child-1048"> <td>july 7</td> <td>test</td> <td>test</td> <td></td> </tr> <tr class="child child-1048"> <td>july 7</td> <td>test</td> <td>test</td> <td></td> </tr> <tr class="parent" id=5000> <td><span class="btnn">2015 july </span></td> <td></td> <td></td> <td><span class="btnn"><img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png" /></span></td> </tr> <tr class="child child-5000"> <td>july 7</td> <td>test</td> <td>test</td> <td></td> </tr> <tr class="child child-5000"> <td>july 7</td> <td>test</td> <td>test</td> <td></td> </tr> </table>
try image using this.children[0].src jquery
$(function () { $('tr.parent td') .on("click", "span.btnn", function () { var idofparent = $(this).parents('tr').attr('id'); $('tr.child-' + idofparent).toggle('slow'); if( this.children[0].src=="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png") this.children[0].src="https://cdn0.iconfinder.com/data/icons/player-set/154/loop-minus-16.png"; else this.children[0].src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png" }); }); $('tr.child').hide(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <table> <tr> <th> </th> <th> b </th> <th> c </th> <th> d </th> <th></th> </tr> <tr class="parent" id=1048> <td><span class="btnn">2015 july </span></td> <td></td> <td></td> <td><span class="btnn"><img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png" /></span></td> </tr> <tr class="child child-1048"> <td>july 7</td> <td>test</td> <td><test/td> <td></td> </tr> <tr class="child child-1048"> <td>july 7</td> <td>test</td> <td>test</td> <td></td> </tr> <tr class="parent" id=5000> <td><span class="btnn">2015 july </span></td> <td></td> <td></td> <td><span class="btnn"><img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png" /></span></td> </tr> <tr class="child child-5000"> <td>july 7</td> <td>test</td> <td>test</td> <td></td> </tr> <tr class="child child-5000"> <td>july 7</td> <td>test</td> <td>test</td> <td></td> </tr> </table>
Comments
Post a Comment