Ad

How Can I Limit The Table Icon Updated To Only A Clicked Icon In Jquery?

- 1 answer

When I click on the expansion icon on my html table, the clicked parent expands, but both parent icons are toggled. How can I prevent from both parent icons being toggled, and only the clicked parent icon is toggled? Please refer to my code snippet below. Thank you

Here's my code and demo:

$('td').addClass("clickh");
$('.hideme').find('div').hide();
$('.clickh').click(function() {
  var img = $(".center img");
  if (img.attr('src') == 'http://www.stemcor.com/images/plus.gif') {
    // row expanded, so collapse...
    img.attr('src', 'http://www.stemcor.com/images/minus.gif');
  } else {
    // row collapsed, so expand...
    img.attr('src', 'http://www.stemcor.com/images/plus.gif')
  }
  $(this).parent().next('.hideme').find('div').slideToggle(500);
});
table {
  width: auto;
  border: 1px solid #aaa;
  margin-bottom: 15px;
  border-collapse: collapse;
}
th,
td {
  width: auto;
  border: 1px solid #aaa;
  padding: 10px;
}
caption {
  color: #222;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="adv-table">
  <table cellpadding="0" cellspacing="0" border="0" class="display table table-bordered" id="hidden-table-info">
    <thead>
      <tr>
        <th>expand</th>
        <th>col 1</th>
        <th>col 2</th>
        <th>col 3</th>
        <th>col 4</th>
        <th>col 5</th>
        <th>col 6</th>
        <th>col 7</th>
        <th>col 8</th>
        <th>col 9</th>
      </tr>
    </thead>
    <tbody>
      <tr class="gradeA">
        <td class="center">
          <img src="http://www.stemcor.com/images/plus.gif" />
        </td>
        <td>item 1</td>
        <td>item 2</td>
        <td>item 3</td>
        <td>item 4</td>
        <td>item 5</td>
        <td>item 6</td>
        <td>item 7</td>
        <td>item 8</td>
        <td>Edit</td>
      </tr>
      <tr class="hideme">
        <td colspan="10">
          <div>
            Sample te1t, sample text, sample text, sample text, sample text, sample text
          </div>
        </td>
      </tr>
      <tr class="gradeA">
        <td class="center">
          <img src="http://www.stemcor.com/images/plus.gif" />
        </td>
        <td>item 1</td>
        <td>item 2</td>
        <td>item 3</td>
        <td>item 4</td>
        <td>item 5</td>
        <td>item 6</td>
        <td>item 7</td>
        <td>item 8</td>
        <td>Edit</td>
      </tr>
      <tr class="hideme">
        <td colspan="10">
          <div>
            Sample te1t, sample text, sample text, sample text, sample text, sample text
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Ad

Answer

Just use

var img = $(this).children(".center img");

Item you clicked on contains the img:

$('td').addClass("clickh");
$('.hideme').find('div').hide();
$('.clickh').click(function() {
  var img = $(this).children(".center img");
  if (img.attr('src') == 'http://www.stemcor.com/images/plus.gif') {
    // row expanded, so collapse...
    img.attr('src', 'http://www.stemcor.com/images/minus.gif');
  } else {
    // row collapsed, so expand...
    img.attr('src', 'http://www.stemcor.com/images/plus.gif')
  }
  $(this).parent().next('.hideme').find('div').slideToggle(500);
});
table {
  width: auto;
  border: 1px solid #aaa;
  margin-bottom: 15px;
  border-collapse: collapse;
}
th,
td {
  width: auto;
  border: 1px solid #aaa;
  padding: 10px;
}
caption {
  color: #222;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="adv-table">
  <table cellpadding="0" cellspacing="0" border="0" class="display table table-bordered" id="hidden-table-info">
    <thead>
      <tr>
        <th>expand</th>
        <th>col 1</th>
        <th>col 2</th>
        <th>col 3</th>
        <th>col 4</th>
        <th>col 5</th>
        <th>col 6</th>
        <th>col 7</th>
        <th>col 8</th>
        <th>col 9</th>
      </tr>
    </thead>
    <tbody>
      <tr class="gradeA">
        <td class="center">
          <img src="http://www.stemcor.com/images/plus.gif" />
        </td>
        <td>item 1</td>
        <td>item 2</td>
        <td>item 3</td>
        <td>item 4</td>
        <td>item 5</td>
        <td>item 6</td>
        <td>item 7</td>
        <td>item 8</td>
        <td>Edit</td>
      </tr>
      <tr class="hideme">
        <td colspan="10">
          <div>
            Sample te1t, sample text, sample text, sample text, sample text, sample text
          </div>
        </td>
      </tr>
      <tr class="gradeA">
        <td class="center">
          <img src="http://www.stemcor.com/images/plus.gif" />
        </td>
        <td>item 1</td>
        <td>item 2</td>
        <td>item 3</td>
        <td>item 4</td>
        <td>item 5</td>
        <td>item 6</td>
        <td>item 7</td>
        <td>item 8</td>
        <td>Edit</td>
      </tr>
      <tr class="hideme">
        <td colspan="10">
          <div>
            Sample te1t, sample text, sample text, sample text, sample text, sample text
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Ad
source: stackoverflow.com
Ad