javascript - 颜色为具有相同颜色的相同 id 的线条

Question

我有下表，它可以在不同或相等的状态下返回具有相同 id 的多行，但处理方式不同。我希望当您返回多个具有相同 ID 的行时，将它们全部着色为相同的颜色。

<table class="table table-responsive" id="employee_table3"> 
<thead> 
<tr> 
<th>Data</th>
<th>Valência</th>
<th>Descrição</th>
<th>Colaborador</th>    
<th>Estado</th>
<th>Prestador de Serviços</th>
<th>Tratamento</th> 
<th>Data Tratamento</th>    
<th>Técnico</th>        
<th>Ação</th>   
<th>Eliminar</th>                               
</tr> 
</thead>
<tbody>
<?php  do{ ?>
<tr id="<?php echo $produto3["Id"]; ?>"> 
<td><?php echo $produto3["DataRegisto"]; ?></td> 
<td><?php echo $produto3["Destino"]; ?></td> 
<td><?php echo $produto3["Descricao"]; ?></td> 
<td><?php echo $produto3["nome"]; ?></td> 
<td><?php echo $produto3["Estado"]; ?></td>
<td><?php echo $produto3["Prestador"]; ?></td> 
<td><?php echo $produto3["Tratamento"]; ?></td> 
<td><?php echo $produto3["DataTermino"]; ?></td> 
<td><?php echo $produto3["Colaborador1"]; ?></td> 
<td><button type="button" name="edit3" data-id="<?php echo $produto3["Id"]; ?>"  data-target="#add_data_Modal3" class="btn btn-warning btn-sm edit_data3" ><span class="glyphicon glyphicon-pencil"></span></button></td>
<td><button class="btn btn-danger btn-sm remove3"><span class="glyphicon glyphicon-trash"></span></button></td>
</tr> 
<?php } while($produto3 = $result3->fetch_assoc()); ?>
</tbody>      
</table 

标签： javascripthtml

Answer 1

id must be unique. example: document.getelementbyid will get first one, and ignore others. Maybe you can try to use class.

// set same class name
<tr class="color_<?php echo $produto3["Id"]; ?>">

<style> .color_1 { color: red; } </style>
// or
document.querySelectorAll('.color_1').forEach(function(item){ item.style.color='red' });

EDIT:

<table> 
<thead> 
<tr> 
<th>name</th>
<th> # </th>
</tr> 
</thead>
<tbody>
<?php  do{ // example 4 ?>
<tr class="<?="color_$produto3['Id'];"?>" style="color: <?php echo $produto3["Color"]; ?>" > 
<td>henry</td>
<td><button onclick="change_color('<?php echo $produto3["Color"]; ?>', '<?php echo $produto3["Id"]; ?>')">click me change</button></td>
</tr> 
<?php } while($produto3 = $result3->fetch_assoc()); ?>
</tbody>
</table>

// example 1 css
<style>
 .color_1 { color: red; }
 .color_2 { color: axuis; }
 .color_3 { color: <?=$color?>; } // defined by php 
 ... as so on
</style>

// example 2 javascript 
<script>
window.onload = function(){

  let id;
  let color_list = ['red', 'axuis' , ... ];
  for (id = 1; id < 10; id++) { //

    document.querySelectorAll('.color_'+ id).forEach(function(item){
        item.style.color =  color_list[id];
    });
  }
}

// example 3 : change by user click button

var change_color(color, id){
    document.querySelectorAll('.color_'+ id).forEach(function(item){
        item.style.color =  color_list[id];
    });
}

<script>