PHP

Je voudrais sélectionner une ligne du tableau

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Je voudrais sélectionner une ligne du tableau

vinkey

Bonjour j'ai réaliser un code sélection de ligne dans tableau mais le seul soucis c'est quand je coche le checkbox, la ligne ce met pas en surbrillance
merci

Code :

<?php
//PHP avant tout
if (!empty($_POST)) {
//la connexion
$connect = mysqli_connect("localhost", "root", "Mm101010", "smartphone" );
//la requete de recherche
$query = "Select * from vu_affect_empl ";
if (!empty($_POST["query"])) {
$search = mysqli_real_escape_string($connect, $_POST["query"]);
$query .= "WHERE USER_ID LIKE '";
$query .= $search;
$query .= "%' OR USER_ID LIKE '";
$query .= $search;
$query .= "%' OR Num_SIM LIKE '";
$query .= $search;
$query .= "%' ORDER BY Nom asc";
} else {
$query .= "ORDER BY USER_ID";
}
//Lancement de la requete
$resultat = mysqli_query($connect, $query);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
.selected > td {
background-color : pink;
}
</style>
<script type="text/javascript">
function changeValueOfCheckbox(check) {
var tr = document.getElementById(check.value);
var cssClass = tr.getAttribute('class');
if (cssClass === null) {
cssClass = '';
}
if (check.checked) {
// add class selected
cssClass += ' selected';
} else {
// suppression class selected
var sel = ' selected';
var i = cssClass.indexOf(sel);
if (i > -1) {
var tmp = cssClass.substring(0, i);
tmp += cssClass.substring(i + sel.length);
cssClass = tmp;
}
}
tr.setAttribute('class', cssClass);
}
</script>
</head>
<body>
<?php
if(isset($resultat) && mysqli_num_rows($resultat) > 0) {
?>
<div class="table-responsive">
<table class="table table bordered">
<thead>
<tr>
<th> </td>
<th>USER ID</th>
<th>Nom</th>
<th>Prenom</th>
<th>Num SIM</th>
<th>PIN Terminal</th>
<th>PIN SIM</th>
<th>Num EMEI</th>
<th>Date Debut</th>
<th>Date Fin</th>
<th>Vitre</th>
<th>Coque</th>
<th>Support Vehicule</th>
<th>Actif</th>
<th>Or Affectation1</th>
<th>Statut</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($resultat)) {
?>
<tr id="<?= $row["USER_ID"] ?>">
<td><input type="checkbox" onchange="changeValueOfCheckbox(<?= $row["USER_ID"] ?> )" name="Select[]" value="<?php echo $row['USER_ID'];?>" class="Selected"> </td>
<td><?php echo $row["USER_ID"]; ?></td>
<td><?php echo $row["Nom"]; ?></td>
<td><?php echo $row["Prenom"]; ?></td>
<td><?php echo $row["Num_SIM"]; ?></td>
<td><?php echo $row["PIN_Terminal"]; ?></td>
<td><?php echo $row["PIN_SIM"]; ?></td>
<td><?php echo $row["Num_IMEI"]; ?></td>
<td><?php echo $row["Date_Debut"]; ?></td>
<td><?php echo $row["Date_Fin"]; ?></td>
<td><?php echo $row["Vitre"]; ?></td>
<td><?php echo $row["Coque"]; ?></td>
<td><?php echo $row["Support_Vehicule"]; ?></td>
<td><?php echo $row["Actif"]; ?></td>
<td><?php echo $row["Or_Affectation1"]; ?></td>
<td><?php echo $row["Statut"]; ?></td>
</tr>
<?php
}
echo '</tbody></table>';
} else { echo 'Pas enregistrement pour le moment'; }
?>
</body>
</html>
<?php
mysqli_free_result($resultat);
mysqli_close($connect);

merci

Message édité par vinkey le 27-04-2017 à 17:23:30

Publicité

MaybeEijOrNot

but someone at least

Pas certain d'avoir tout capté, en fait tu veux que ta fonction js fonctionne avec n'importe quelle classe CSS? (si ce n'est pas le cas alors tu fais un truc totalement à la mords moi le noeud)

Un truc du genre n'irait pas?

Code :

<!DOCTYPE HTML>
<html>
<head>
<title>page test</title>
<meta charset="UTF-8">
<style type="text/css">
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #000000;
padding: 5px;
text-align: center;
}
th {
background-color: #0070FF;
}
tr.xxx > td {
background-color: transparent;
}
tr.xxx-selected > td {
background-color: #FFFF80;
}
tr.yyy > td {
background-color: transparent;
}
tr.yyy-selected > td {
background-color: #FFFF80;
}
</style>
<script type="text/javascript">
function switchStyleSelected(el, id) {
var parentTh = document.getElementById(id);
var nameClass = parentTh.getAttribute("class" );
if(el.checked) {
parentTh.setAttribute("class", nameClass + "-selected" );
} else {
parentTh.setAttribute("class", nameClass.replace("-selected", "" ));
}
}
</script>
</head>
<body>
<div id="main_div">
<div id="div_table1">
<p>Tableau 1:</p>
<table id="table1">
<thead>
<tr>
<th>id</th>
<th>nom</th>
<th>prénom</th>
<th>info</th>
</tr>
</thead>
<tbody>
<tr id="tab1_tr_1" class="xxx">
<td><input type="checkbox" onChange="switchStyleSelected(this, 'tab1_tr_1');">1</td>
<td>AAA</td>
<td>Aaa</td>
<td>aaa</td>
</tr>
<tr id="tab1_tr_2" class="xxx">
<td><input type="checkbox" onChange="switchStyleSelected(this, 'tab1_tr_2');">2</td>
<td>BBB</td>
<td>Bbb</td>
<td>bbb</td>
</tr>
<tr id="tab1_tr_3" class="xxx">
<td><input type="checkbox" onChange="switchStyleSelected(this, 'tab1_tr_3');">3</td>
<td>CCC</td>
<td>Ccc</td>
<td>ccc</td>
</tr>
<tr id="tab1_tr_4" class="xxx">
<td><input type="checkbox" onChange="switchStyleSelected(this, 'tab1_tr_4');">4</td>
<td>DDD</td>
<td>Ddd</td>
<td>ddd</td>
</tr>
<tr id="tab1_tr_5" class="xxx">
<td><input type="checkbox" onChange="switchStyleSelected(this, 'tab1_tr_5');">5</td>
<td>EEE</td>
<td>Eee</td>
<td>eee</td>
</tr>
<tr id="tab1_tr_6" class="xxx">
<td><input type="checkbox" onChange="switchStyleSelected(this, 'tab1_tr_6');">6</td>
<td>FFF</td>
<td>Fff</td>
<td>fff</td>
</tr>
</tbody>
</table>
</div>
<div id="div_table2">
<p>Tableau 2:</p>
<table id="table2">
<thead>
<tr>
<th>id</th>
<th>nom</th>
<th>prénom</th>
<th>info</th>
</tr>
</thead>
<tbody>
<tr id="tab2_tr_1" class="yyy">
<td><input type="checkbox" onChange="switchStyleSelected(this, 'tab2_tr_1');">1</td>
<td>AAA</td>
<td>Aaa</td>
<td>aaa</td>
</tr>
<tr id="tab2_tr_2" class="yyy">
<td><input type="checkbox" onChange="switchStyleSelected(this, 'tab2_tr_2');">2</td>
<td>BBB</td>
<td>Bbb</td>
<td>bbb</td>
</tr>
<tr id="tab2_tr_3" class="yyy">
<td><input type="checkbox" onChange="switchStyleSelected(this, 'tab2_tr_3');">3</td>
<td>CCC</td>
<td>Ccc</td>
<td>ccc</td>
</tr>
<tr id="tab2_tr_4" class="yyy">
<td><input type="checkbox" onChange="switchStyleSelected(this, 'tab2_tr_4');">4</td>
<td>DDD</td>
<td>Ddd</td>
<td>ddd</td>
</tr>
<tr id="tab2_tr_5" class="yyy">
<td><input type="checkbox" onChange="switchStyleSelected(this, 'tab2_tr_5');">5</td>
<td>EEE</td>
<td>Eee</td>
<td>eee</td>
</tr>
<tr id="tab2_tr_6" class="yyy">
<td><input type="checkbox" onChange="switchStyleSelected(this, 'tab2_tr_6');">6</td>
<td>FFF</td>
<td>Fff</td>
<td>fff</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

Message édité par MaybeEijOrNot le 28-04-2017 à 15:17:01

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

MaybeEijOrNot

but someone at least

Sinon je viens de relire ce que tu avais écrit, et si ça ne fonctionne pas c’est pour plusieurs raisons.
Premièrement tu déclares dans la partie HTML appelé la fonction js comme suit :

Code :

onchange="changeValueOfCheckbox(<?= $row["USER_ID"] ?> )"

Donc ta variable « check » est soit un nombre soit une chaîne de caractères contenant l’id de l’objet auquel tu souhaites changer la class css. Donc la ligne suivante doit retourner une erreur :

Code :

var tr = document.getElementById(check.value);

Puisque « check » n’est pas un objet. Normalement tu n’as pas besoin du « .value » puisque ta variable « check » correspond déjà à l’id.

Deuxièmement, tu déclares que ta class css s’appelle comme suit dans ton css :

Code :

.selected

Et dans ton js tu écris :

Code :

cssClass += ' selected';

Ce qui ne correspond évidemment plus puisque dans ton js elle commence par un espace. De toute façon commencer le nom d’une class css par un espace est soit incorrecte soit à proscrire absolument.

Troisièmement dans ton js :

Code :

var sel = ' selected';
var i = cssClass.indexOf(sel);
if (i > -1) {
var tmp = cssClass.substring(0, i);
tmp += cssClass.substring(i + sel.length);
cssClass = tmp;

La première ligne indique le motif recherché, ok.
La deuxième indique sa position dans la chaîne de caractères, ok.
La quatrième indique qu’on ne garde que la partie de la chaîne de caractères qui précède le motif (donc le nom de la class css non sélectionnée), ok.
La cinquième indique qu’à ce nom de class css non sélectionnée on ajoute le motif, pas ok, tu annules ce que tu viens de faire précédemment…

Mais encore une fois, à moins de vouloir gérer plusieurs noms de class avec cette même fonction js tu te casses la tête pour rien.

Message édité par MaybeEijOrNot le 28-04-2017 à 14:07:19

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

FORUM HardWare.fr

Programmation

PHP

Je voudrais sélectionner une ligne du tableau

Sujets relatifs
Modification structure table, quid des vues ?!?	supprimer le premier ligne d'un fichier
selection ligne tableau pour requête	Executer une ligne de commande windows en java
Id absolu et Id relatif dans la même table MySQL	table conversion en assembleur
Sélectionner en automatique les lignes d'un résultat d'un filtre	supprimer retour à la ligne
supprimer plusieurs retours à la ligne	lancer un programme python en ligne de commande sous windows
Plus de sujets relatifs à : Je voudrais sélectionner une ligne du tableau

Page générée en 0.156 secondes