jquery onclick to change cell and column bgcolor

hyster · October 21, 2015

im try to get the cell to be 1 color and the column to another color on click. I can get the cell to do it and I have found code that should do both

but I cant work out how to use it or im doing it wrong.

this works for the cell bgcolor

<script type="text/javascript">
function changeColor(elem){
	var cellcolor = elem.style.backgroundColor;
	if(!(cellcolor == 'red')){
		elem.style.backgroundColor = "red";	
	}
	else{
		elem.style.backgroundColor= "";
	}
}
</script>

and I want to change it with this code for the cell and column bg color

<script type="text/javascript">
$(document).ready(function(){
    $('td').click(function(){
       _index = $(this).index();
       $(this).addClass('red');
       $('table th:eq(' + _index + '), table td:eq(' + _index + ')').addClass('pink');
        //This line adds class red to the clicked cell and adds class pink to collumn of the clicked cell
    });
});
</script>

full page code

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
function changeColor(elem){
	var cellcolor = elem.style.backgroundColor;
	if(!(cellcolor == 'red')){
		elem.style.backgroundColor = "red";	
	}
	else{
		elem.style.backgroundColor= "";
	}
}
</script>
</head>
<style>
.top1{
    background-color:yellow;
}
.left {
  float: left;
    text-align: center;
    background-color: #fff;
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding-left: 5px; 
    width: 100px; margin: auto;
  }
.right {
  float: right;
    text-align: center;
    background-color: #fff;
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 1px; 
    width: 25px; margin: auto;
    text-align: center;
  }
.name{
    background-color:green;
}
.tank{
    background-color:green;
}
.name td:first-child { 
     background-color:blue;
     width: 180px;
 }  
.tank td:first-child{ 
     background-color:blue;
     width: 180px;
 } 
.tank tr{ 
     background-color: yellow;
 }
 .tank td{ 
     width: 20px;
 } 
 .tank tr:hover {
  background-color:#aaa;
}
.name tr { 
     background-color: yellow;
     width: 20px;
     }
     
.tlist{
    overflow-y: scroll;
    height:700px; 
    top:20px; 
}   
.players{
position: static;
}  

</style>

<table class="top1" align="center"><tr><td><a href="./pick_clan.php">back to selection</a></td></tr></table></br>
<?php
//db connection data
include './include/config.php';

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
} 

@$clanname = $_POST['clanname'];
@$tier = $_POST['tier'];
@$map = $_POST['map'];

@$invite = implode(', ',$_POST['player']);
$player1 = '('.$invite.')';

?>
<div class="players">
         <table class="name" >

<?php
          $sql = "SELECT tank_list.name_i18n, 
                 tank_list.tank_id, 
                 tank_list.name, 
                 tank_list.image,
                 tank_list.short_name_i18n, 
                 player_list.account_id, 
                 player_list.nickname, 
                 player_list.clan,
                 garage_list.master, 
                 garage_list.tank_id IS NOT NULL AS combination_exists 
          FROM   player_list 
                 CROSS JOIN tank_list 
                            LEFT JOIN garage_list 
                                   ON player_list.account_id = garage_list.account_id 
                                      AND tank_list.tank_id = garage_list.tank_id 
          WHERE  player_list.nickname IN $player1 
                 AND tank_list.level = '$tier' 
                 AND player_list.clan = '$clanname' 
ORDER  BY  FIELD(tank_list.type, 'lighttank', 'mediumTank', 'heavyTank', 'AT-SPG', 'SPG'), name ASC,  
          tank_list.name ASC, 
          tank_list.nation ASC, 
          player_list.nickname ASC ";

$result = $conn->query($sql);

$rows = $result->fetch_all(MYSQLI_ASSOC);
$data = array();
foreach ($rows as $row)
{
    $data[$row['image']][$row['nickname']] = ($row['combination_exists'] == 1);
}

if(empty($data)){
    echo "Please select again, no players found matching your search";
} else {

                    $firstTank = reset($data);
                    $players = array_keys($firstTank);
                    $array = array_keys($firstTank);

                          $count = count($array);
                          ?>
                          <tr><td class="first">
                          
<div id="pageone" data-role="main" class="ui-content">
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="./img/maps/<?php echo $map ; ?>.jpg" alt="<?php echo $map ; ?>" style="width:100px;"></a>

<div data-role="popup" id="myPopup">
<p><?php echo $map ; ?></p> 
<a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="./img/maps/<?php echo $map ; ?>.jpg" style="width:800px;height:800px;" alt="<?php echo $map ; ?>">
</div>
                          
                          </td>
                          
                          <?php
                          for ($i = 0; $i < $count; $i++) {
                               echo  '<td><img src="./img/name/vrt'.$array[$i].'.png" title="'.$array[$i].'"></td>';
                              //echo "<td>".$array[$i] . "\n</td>";
                         
                          }
                          ?>
</tr>
</table>
</div>
<div class="tlist">
<table class="tank" >
<?php
            foreach($data as $tank_name=>$arr){
            
        echo '<tr><td class="first"><div class="left"><img src="./img/tank/'.$tank_name. '"></div><div class="right">' . array_sum($arr).'</div></td>'; // tank name as row label  
                        foreach($arr as $nickname=>$element){
                            // output the data for each cell
                            if ($element == 1){
                            /////////////////
                            //ONCLICK IS HERE
                            /////////////////
                            echo '<td onclick="changeColor(this)"><img src="./img/' . $element . '.png" height="20" width="20" title="'.$nickname . '"></td>';
                            }else{
                            echo "<td></td>";
                            }
                            
                        }
        //echo '</tr>';
        // may use this later
        echo '<td><div class="right">'. array_sum($arr) .'</div></td></tr>';
    }
    
}
?>
</tbody>
</table></div>

scootstah · October 23, 2015

Your code works. Example here: http://jsfiddle.net/hjqs4L4f/

You need to remove the td selector from this line though:

$('table th:eq(' + _index + '), table td:eq(' + _index + ')').addClass('pink');

Otherwise, both the cell and the header get colored pink.

I also added this at the top to remove the color from other cells when you click a new one (not sure if that is desired or not):

$('table th').removeClass('pink');
$('table td').removeClass('red');

I don't see you using any <th></th> in your example HTML though, which may be why you can't get it to work?

hyster · October 24, 2015

its close to what im after,

i tried to add a pic but it wouldn't let me before.

the idea is that u click the green dot to select the tank, the green dot then has a red bg to show thats the 1 selected (2nd click to de-select it), the column colour then goes pink so when ur scrolling lower than the selected item u can still see the column has been chosen further up.

there was no th before as the player names was 1 table and the grid was a 2nd, i tried to have a sticky th in a single table with the names but i could not get that to work

slj90 · October 29, 2015

Maybe this will help you http://jsfiddle.net/qrn0p43k/

This line gets the column number of the cell that was clicked...

var column_num = parseInt( $(this).index() ) + 1;

And this line tells the css which column to change

table th:nth-child(" + column_num + "), table td:nth-child(" + column_num + ")

This line changes the css

$(code).addClass('pink');

Sign In

jquery onclick to change cell and column bgcolor

Recommended Posts

hyster

Link to comment

Share on other sites

scootstah

Link to comment

Share on other sites

hyster

Link to comment

Share on other sites

slj90

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information