CODEWITHSUNDEEP
jqueryhtml
HelloWorld1
HelloWorld1

Reputation: 14108

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>

Upvotes: 0

Views: 57

Answers (3)

Kishan
Kishan

Reputation: 1190

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>

Upvotes: 0

Mateutek
Mateutek

Reputation: 184

Try this code

$(function () {
    $('tr.parent td')
        .on("click", "span.btnn", function () {
            var self = $(this),
                parent = self.parents('tr'),
                idOfParent = parent.attr('id');
            $('tr.child-' + idOfParent).toggle('slow');
            parent.toggleClass('minus');
        });
    $('tr.child').hide();
});

HTML

<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 btnn-icon"></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 btnn-icon"></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>

CSS

.btnn-icon{
    width:20px;
    height:20px;
    display:block;
    background:url('https://cdn0.iconfinder.com/data/icons/basic-ui-elements-   round/700/07_plus-16.png') 0 0 no-repeat;
}
.minus .btnn-icon{
    background:url('https://cdn0.iconfinder.com/data/icons/player-set/154/loop-minus-16.png') 0 0 no-repeat;
}

Working fiddle http://jsfiddle.net/vmyxa51o/

Upvotes: 2

Architect - Hitesh
Architect - Hitesh

Reputation: 1239

You Can Change by Jquery Like this

<tr class="parent" id=5000>
    <td><span class="btnn">2015 July </span></td>
    <td></td>
    <td></td>
    <td><span class="btnn" data-id="plus"><img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png" /></span></td>
</tr>

Just Add Data-id As Attribute in Span.btnn

Now Jquery

 $(document).ready(function ()
    {
      $('.btnn').click(function ()
      {
        var state = $(this).attr('data-id');
        if(state == 'plus')
        {
           //Change To Minus Image
          $(this).html('<img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_minus-16.png">');
          $(this).attr('data-id','minus');
        }
        else
        {
           //Change To Plus Image
           $(this).html('<img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png">');
          $(this).attr('data-id','plus');
        }
      })

    });

Upvotes: 2

Related Questions