php - how I change the cell color clicking on it with jquery?

516

I'm having a hard time trying to solve this, as I'm not a front-end programmer, I have a table, the lines are my clients nad the collumns are the twelve months of the year, each cell has only a checkbox, as i click on the checkbox, I need the cell collor to turn from red to blue, I did it, but only works for january...

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    function countDouble(id) {      
        var d = $(".check-"+id+"-id-<?php echo $dado->idCliente; ?>").is(':checked');

        if (d === true) {
            $(".celula-"+id+"-id-<?php echo $dado->idCliente; ?>").prop("disabled",true).addClass('check-azul');
        } else {
            $(".celula-"+id+"-id-<?php echo $dado->idCliente; ?>").prop("disabled",false).removeClass('check-azul');
        }

    }

    jQuery(document).ready(function(){              
        $('input[type=checkbox]').click( function() {
            var id = $('input[type=checkbox]').attr('id');
            countDouble(id);
        });
    });
});//]]>  

<tr>
    <td>
      <?php echo $dado->idCliente; ?>
    </td>
    <td>
      <?php echo $dado->nomeCliente; ?> <br>
      R$ <?php echo $dado->mensalidade; ?>,00 <br>
      Vence: <?php echo $dado->vencimento; ?>
    </td>
    <?php if($dado->ano == date("Y") && $dado->mes == '1'){ ?>
    <td >
      Janeiro <br>
      <input type="checkbox" id="1" name="janeiro" value="1" checked>
      <?php }else{ ?>
    <td >
      Janeiro <br>
      <input type="checkbox" id="1" name="janeiro" value="1">
    <?php } ?>
    </td>
    <?php if($dado->ano == date("Y") && $dado->mes == '2'){ ?>
    <td >
      Fevereiro <br>
      <input type="checkbox" id="2" name="fevereiro" value="2" checked>
      <?php }else{ ?>
    <td >
      Fevereiro <br>
      <input type="checkbox" id="2" name="fevereiro" value="2">
    <?php } ?>
    </td>
    <td >
      Março <br>
      <input type="checkbox" name="janeiro">
    </td>
    <td >
      Abril <br>
      <input type="checkbox" name="janeiro">
    </td>
    <td >
      Maio <br>
      <input type="checkbox" name="janeiro">
    </td>
    <td >
      Junho <br>
      <input type="checkbox" name="janeiro">
    </td>
    <td >
      Julho <br>
      <input type="checkbox" name="janeiro">
    </td>
    <td >
      Agosto <br>
      <input type="checkbox" name="janeiro">
    </td>
    <td >
      Setembro <br>
      <input type="checkbox" name="janeiro">
    </td>
    <td >
      Outubro <br>
      <input type="checkbox" name="janeiro">
    </td>
    <td >
      Novembro <br>
      <input type="checkbox" name="janeiro">
    </td>
    <td >
      Dezembro <br>
      <input type="checkbox" name="janeiro">
    </td>
  </tr>
978

Answer

Solution:

I guess the reason why your code works only for the first checkbox is this line:

var id = $('input[type=checkbox]').attr('id');

It returns the id of the first checkbox, not of the recently clicked one. Try to replace it with this line instead:

var id = $(this).attr('id');
850

Answer

Solution:

$(document).ready(function() {
  $('td').on('click', function() {
    $(this).css('background-color', 'lightgray');
  });
});
td {
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Cell</td>
    <td>Cell</td>  
    <td>Cell</td>
    <td>Cell</td>  
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>  
    <td>Cell</td>
    <td>Cell</td>  
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>  
    <td>Cell</td>
    <td>Cell</td>  
  </tr>
</table>



234
votes

Answer

Solution:

http://jsfiddle.net/9etqyb84/

HTML

<table>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <input type="checkbox">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <input type="checkbox">
        </td>
    </tr>
</table>

JS

$(document).ready(function(){
    $('input[type=checkbox]').on('click', function(){
        // detect if is checked or unchecked when this click is performed
        var checkedStatus = $(this).prop('checked'); // true or false

        if( checkedStatus ) {
            $(this).parent('td').css('background-color', 'blue');
        } else {
            $(this).parent('td').css('background-color', 'red');
        }
    })
}); 

CSS

table tr td {
    border: 1px solid #000;
    padding: 5px;
    background-color: red;
}



People are also looking for solutions to the problem: gd library extension not available with this php installation.
Source

Share


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.


Similar questions

Find the answer in similar questions on our website.

274 PHP - How to search through multiple two-dimensional arrays and change values within them?
903 jquery - Search for a table within a database in Laravel 4 PHP Framework
533 php - How to get the website name based on whether the website supports http or https?
834 php - get an inline editable dropdown in Datatable with editor
119 php - jQuery: How to iterate through JSON encoded string (array)
991 php - Custom cart item currency symbol based on product category in Woocommerce 3.3+
66 javascript - Change a variable value on ajax success according to server response vai php
280 php - display logged in user details from in codeigniter
841 php - Automatic git pull to server: Host key verification failed
679 php - Fetch DPI from JPEG without library returns incorrect result
234

Answer

Solution:

http://jsfiddle.net/9etqyb84/

HTML

<table>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <input type="checkbox">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <input type="checkbox">
        </td>
    </tr>
</table>

JS

$(document).ready(function(){
    $('input[type=checkbox]').on('click', function(){
        // detect if is checked or unchecked when this click is performed
        var checkedStatus = $(this).prop('checked'); // true or false

        if( checkedStatus ) {
            $(this).parent('td').css('background-color', 'blue');
        } else {
            $(this).parent('td').css('background-color', 'red');
        }
    })
}); 

CSS

table tr td {
    border: 1px solid #000;
    padding: 5px;
    background-color: red;
}

People are also looking for solutions to the problem: Jquery (Datatables) features not fully initializing? php/mysql

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.