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

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -