Change button value on td click

Question

I currently have a table with blank <td> s. Each time a <td> is clicked, it changes its background color. I want to change the value of rcStatus button along with the colors. Here's my current code:

HTML:

foreach( //conditionals ){ 
    <td id="changeStatus">
       <input type="button" name="rcStatus" id="rcStatus" value=""/>
    </td>
}

javascript:

 $('#table #td').click(
   function(){
       var cell = $(this),
       state = cell.data('state') || 'first';

   switch(state){
       case 'first':
       cell.addClass('red');
       cell.data('state', 'second');  
       document.getElementById('rcStatus').value = "missed";
       break;
     // other cases here 
   }
 });

The problem is, since my <td> is in a foreach statement, the input name is not unique. So the only button value that changes onclick is the first button in the table.

Anyway I can fix this so that the button that changes is the one inside the <td> clicked? Thanks!

Answer 1

change the id to class .

foreach( //conditionals ){ 
    <td class="changeStatus">
       <input type="button" name="rcStatus" id="rcStatus" value=""/>
    </td>
}

$('#table .changeStatus').click(
var that=this;
   function(){
       var cell = $(this),
       state = cell.data('state') || 'first';

   switch(state){
       case 'first':
       cell.addClass('red');
       cell.data('state', 'second');

**update:**

$(that).find('input[type="button"]').val("missed"); 
       //document.getElementById('rcStatus').value = "missed";
       break;
     // other cases here 
   }
 });

update: assuming the id of the table is #table

Answer 2

This should do the job, but it's bad style to use ids more than once.

<script>
    $('#table td').click(
      function(){
          var cell = $(this);
          state = cell.data('state') || 'first';

      switch(state){
          case 'first':
          cell.addClass('red');
          cell.data('state', 'second');
          this.getElementsByTagName('input')[0].value = "missed";
          break;
        // other cases here 
      }
    });
</script>

And here a solution in pure Javascript:

var table = document.getElementById("table");
var tds = table.getElementsByTagName("td");
for(var i = 0; i < tds.length;i++ ){
    tds[i].addEventListener("click", function(){
        var that = this;
        that.getElementsByTagName("input")[0].value = "missed";
    }, false);
}

Answer 3

If you want to change button text for all td's click, then

Change

$('#table #td').click

to

$('#table td').click

Moreover, use class

<td class="changeStatus">

and,

$('.changeStatus').click

Answer 4

If I understand you, the issue that you're having is in selecting the RIGHT button to change the value of in your click handler. If you can append either the $key or the $value from your foreach conditional to the ID of both the td and the input , you should be able to select it accurately by retrieving that substring from the td 's ID and appending it to the input 's.

Alternatively, you could find the input from the td 's child nodes, either way, you'd have to modify your handling function to receive the event as a parameter.

in the php

foreach($statuses as $key=>value) {
?>
  <td id="changeStatus_<?php echo $key; ?>">
    <input type="button" name="rcStatus_$key" id="rcStatus_<?php echo $key; ?>" value=""/>
  </td>
<?php
}

in the js

$('#table td').click(function(event) {
  var cell = $(this),
      id = cell.id.split('_')[1],
      state = cell.data('state') || 'first';

  switch(state) {
  case 'first':
    cell.addClass('red');
    cell.data('state','second');
    cell.children('#rcStatus_'+id).val('missed');
    break;
  // case '*':
  }
}