Question

我有一个动态创建的表，我有代码来更改单击一个单元格的bg颜色，id要做的是能够将列更改为不同的bg颜色，因此它显示列已被选中如果一次只选择1个单元格，那么选择列中的哪个单元格也会很好

单击

将单元格bg更改为红色（正常），单击单元格时我需要将列更改为粉红色谢谢你的帮助

目前的样子：

我希望它看起来像： [ what id like it to look like 2

    <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){
                            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>

Answer 1

您可以使用jQuery：

首先在头标记中包含jQuery脚本。

其次获取点击事件：

<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 column of the clicked cell
   });
});
</script>

html / javascript onclick更改列bg颜色

1 个答案: