Houssem Chlegou Houssem Chlegou - 4 months ago 25
HTML Question

Execute an onclick function alone in every tr when $(this) clicked?

I want to execute the same code in every items in tr when it's clicked. The items are the same in all tr elements. So the problem is, the script didn't found any miss-much and execute the first element found with this id

Here is the HTML code when I need it:

<tbody id="bList">
<tr class="">
<td class="center" style="display:none;"></td>
<td></td>
<td class="center"></td>
<td class="center"></td>
<td class="center" style="width:200px !important;">
<span id="timer" class="countdown callback ended" onclick="return false;"
data-inc="0" data-time="10" data-id="btc2" rel="nofollow"></span>
<span id="starter" class="" active="yes"> > </span>
</td>
<td class="center">
<span id="open" class="">Open</span>
</td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr class="selected">
<td class="center" style="display:none;"></td>
<td></td>
<td class="center"></td>
<td class="center"></td>
<td class="center" style="width:200px !important;">
<span id="timer" class="countdown callback ended" onclick="return false;"
data-inc="0" data-time="10" data-id="btc1" rel="nofollow"></span>
<span id="starter" class="" active="no"> > </span>
</td>
<td class="center">
<span id="open" class=""> Open </span>
</td>
<td class="center"></td>
<td class="center"></td>
</tr>
</tbody>


To add selected class to the tr when clicked, I'm using .siblings() function with jquery. But I tried with it to execute the same wanted action, but I didn't figure it out.

this is the scripts that I tried:

$('#open').click(function(){
/*$(this).parent().parent().find('td:nth-child(5) #starter')
.html('Start Timer!&nbsp;>');*/
if($(this).parent().parent().find('#timer').hasClass('ended'))
{
$(this).parent().parent().find('#starter').html('Start Timer!&nbsp;&nbsp;>')
.attr({'active':'yes'});
}else{
//You can ignore this part. It does display a modal.
if($('#starterModal').is(':hidden')){
$('#starterModal').show().wait(6000).hide();
}
}
});

$('#starter').click(function(){
if($(this).attr('active') == "yes"){
$(this).parent().find('#timer').click();
$(this).html('>').attr({'active':'no'});

//Update rewards taken
console.log($(this).parent().parent().find('td:nth-child(1)').html());
$.ajax({
//You can ignore it either. It's working fine.
type : 'POST',
url : '../files/php/update_rewardHistory.php',
data : {id : $(this).parent().parent().find('td:nth-child(1)').html(),
currency : "btc"
},
success : function(data){}
});
}else{
//You can ignore this part! It does display a modal.
if($('#starterModal').is(':hidden')){
$('#starterModal').show().wait(6000).hide();
}
}
});

$('#bList tr').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
//console.log($(this).parent().parent().find('td:nth-child(1)').html());
});


So, is there a way to doing that?

Answer

As mentioned in the comments an id should be unique.
So to make this work, swap to classes and it will work fine:

$('.open').click(function() {
  var tr = $(this).closest('tr') ,
      timer = tr.find('.timer') ,
      starter = tr.find('.starter');
  
  if( timer.hasClass('ended')) {
    starter.html('Start Timer!&nbsp;&nbsp;>').attr({
      'active': 'yes'
    });
  } else {
    if ($('#starterModal').is(':hidden')) {
      $('#starterModal').show().wait(6000).hide();
    }

  }
});

$('.starter').click(function() {
  var elem = $(this),
      tr = elem.closest('tr'),
      timer = tr.find('.timer');
  if(elem.attr('active') == "yes") {
    timer.click();
    elem.html('>').attr({
      'active': 'no'
    });

    //update rewards taken
    console.log(tr.find('td:nth-child(1)').html());
    /*$.ajax({ //you can ignore it also! it's working fine!

      type: 'POST',
      url: '../files/php/update_rewardHistory.php',
      data: {
        id: $(this).parent().parent().find('td:nth-child(1)').html(),
        currency: "btc"
      },
      success: function(data) {}
    });*/

  } else { //you can ignore this part! do display a modal
    if ($('#starterModal').is(':hidden')) {
      $('#starterModal').show().wait(6000).hide();
    }
  }
});

$('#bList tr').click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  //console.log($(this).parent().parent().find('td:nth-child(1)').html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="">
      <td class="center" style="display:none;"></td>
      <td></td>
      <td class="center"></td>
      <td class="center"></td>
      <td class="center" style="width:200px !important;">
        <span class="timer countdown callback ended" onclick="return false;" data-inc="0" data-time="10" data-id="btc2" rel="nofollow"></span>
        <span class="starter" active="yes"> > </span>
      </td>
      <td class="center">
        <span class="open">Open</span>
      </td>
      <td class="center"></td>
      <td class="center"></td>
    </tr>
    <tr class="selected">
      <td class="center" style="display:none;"></td>
      <td></td>
      <td class="center"></td>
      <td class="center"></td>
      <td class="center" style="width:200px !important;">
        <span class="timer countdown callback ended" onclick="return false;" data-inc="0" data-time="10" data-id="btc1" rel="nofollow"></span>
        <span class="starter" active="no"> > </span>
      </td>
      <td class="center">
        <span class="open"> Open </span>
      </td>
      <td class="center"></td>
      <td class="center"></td>
    </tr>
  </tbody>
</table>