CODEWITHSUNDEEP
javascriptjqueryhtml
user8556
user8556

Reputation: 3

How can I limit the table icon updated to only a clicked icon in jquery?

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>

Upvotes: 0

Views: 43

Answers (2)

Kisspa
Kisspa

Reputation: 584

https://jsfiddle.net/kisspa/ooqyd6h2

$('td').addClass("clickh");
$('.hideme').find('div').hide();
$('.clickh:first-child').click(function() {
  var img = $(this).find('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);
});

Upvotes: 0

artm
artm

Reputation: 8584

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>

Upvotes: 2

Related Questions