What'sUP What'sUP - 11 days ago 5
HTML Question

How to Change a Picture inside of a Table using jQuery

When I press the plus button, I would like to change the picture into minus



When you have toggled out, you can see the minus picture and you click on the picture, it will be changed into plus picture.

Questions:

I do not know how to create it based on description above by 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>




Answer

Try this get image using this.children[0].src from 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>
            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>

Comments