问题描述
所以我对使用 Javascript 开发有点陌生，并且我被困住了 3 天我无法继续 我的记录每行旁边都有一个更新按钮，我有一个模态 我的问题是模式总是为顶行打开，其他行按钮似乎不起作用 如何将记录的 id 传递给函数修饰符（），以便在每次单击更新按钮后显示模态并显示正确的模态，因为它仅显示第一行的模态 任何帮助将不胜感激
function onTabClick() {
let activeTabs = document.querySelectorAll('.active');
activeTabs.forEach(function(tab) {
tab.className = tab.className.replace('active','');
});
document.getElementById(event.target.href.split('#')[1]).className += ' active';
}
const element = document.getElementById('nav-tab');
element.addEventListener('click',onTabClick,false);
function Delete(identifiant) {
var confirmation = confirm("Voulez-vous vraiment effacer cette réparation?");
if(confirmation)
document.location.href = "delete.PHP?idReparation="+identifiant ;
}
function modifier() {
var modal = document.getElementById("modifier");
// Get the button that opens the modal
var btn = document.getElementById("ModifierForm");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("CloseModifierForm")[0];
// When the user clicks the button,open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x),close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal,close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.topnav {
background-color: rgba(0,.2);
position: fixed;
left : 0;
top: 0;
width: 100%;
}
.topnav a {
text-transform: uppercase;
float: left;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
letter-spacing: 2px;
}
.topnav a:hover {
background-color: #b671ee;
color: black;
}
.topnav-right {
float: right;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the Box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0); /* Fallback color */
background-color: rgba(0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 60%;
Box-shadow: 0 4px 8px 0 rgba(0,0.2),0 6px 20px 0 rgba(0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.CloseModifierForm {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.CloseModifierForm:hover .CloseModifierForm:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #b671ee;
color: white;
text-align: center;
}
.modal-body {
padding: 2px 16px;
}
/*------------------ Contact ------------------>*/
input[type=text],input[type=date],input[type=email],input[type=password],input[type=tel],select,textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
Box-sizing: border-Box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
#button1 {
background-color: #b671ee;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button,add a darker green color */
input[type=submit]:hover {
background-color: rgba(0,.2);
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: rgba(0,.12);
width: 50%;
padding: 20px;
margin: 0 auto;
}
#contact h3 {
text-align: center;
padding: 80px;
font-size: 34px;
}
/*------------------ Réparation & Compte ------------------>*/
body {font-family: Arial,Helvetica,sans-serif;}
.required {
color : red;
}<!DOCTYPE html>
<html>
<head>
<!-- head -->
<title> Administrateur </title>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<!-- Barre de navigation -->
<div class="topnav" id="nav-tab">
<a class="active" href="#gestionReclamations" onclick="onTabClick()"> Gérer les réclamations </a>
<a href="#gestionUtilisateurs" onclick="onTabClick()"> Gérer les utilisateurs </a>
<a href="#messagesRecues" onclick="onTabClick()"> Messages Reçues </a>
<div class="topnav-right">
<a href="#profile" onclick="onTabClick()"> Profile </a>
<a href="#deconnexion" onclick="onTabClick()"> Déconnexion </a>
</div>
<div class="tab-pane active" id="gestionReclamations">
<form name="recherche" method="GET">
<p>
<label for="motcle"> Chercher une réclamation : </label>
<input type="text" name="motcle" id="motcle" placeholder="Mot clé.." value="<?PHP if(isset($_REQUEST["motcle"])){echo $_REQUEST["motcle"];} ?>" />
<button type="submit"> Chercher </button>
</p>
</form>
<?PHP
include_once("../connexion/config.PHP");
$conn = myConnection();
$table1='reparation';
$table2='utilisateur';
$table3='contact';
if(isset($_REQUEST['motcle']) && (strlen($_REQUEST['motcle'])>=3)) {
$motcle="%".$_REQUEST['motcle']."%";
$motcle=$conn->quote($motcle);
$sql="SELECT * FROM $table1 where NomPrenom LIKE $motcle OR email LIKE $motcle OR tel LIKE $motcle OR type LIKE $motcle OR marque LIKE $motcle OR reference LIKE $motcle OR date LIKE $motcle OR probleme LIKE $motcle";
}
else
$sql="SELECT * FROM $table1";
$update = "";
$result = $conn->query($sql) or die ($conn->errorInfo()[2]);
$count=$result->rowCount();
if($count===0) {
?>
<p> Aucun réclamation trouvé </p>
<?PHP
}
else {
echo "<p> Nombre total des reclamations: $count </p>";
?>
<table>
<tr>
<th> Nom et Prénom </th>
<th> E-mail </th>
<th> Téléphone </th>
<th> Type </th>
<th> Marque </th>
<th> Référence </th>
<th> Date d'achat </th>
<th> Problème </th>
<th> Modification </th>
<th> Suppression </th>
</tr>
<?PHP
while ($row = $result->fetchObject()) {
?>
<tr>
<td> <?=$row->NomPrenom; ?> </td>
<td> <?=$row->email; ?> </td>
<td> <?=$row->tel; ?> </td>
<td> <?=$row->type; ?> </td>
<td> <?=$row->marque; ?> </td>
<td> <?=$row->reference; ?> </td>
<td> <?=$row->date; ?> </td>
<td> <?=$row->probleme; ?> </td>
<td id="ModifierForm"> <a href="#update.PHP?idReparation=<?=$row->idReparation?>" onclick="modifier()"> Modifier </a> </td>
<td> <a href='#' onClick='Delete(<?=$row->idReparation?>)'> Supprimer </a> </td>
<?PHP
$update .= '<div id="modifier" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="CloseModifierForm">×</span>
<h2> Modification </h2>
</div>
<div class="modal-body">
<div class="container">
<form name="modifierForm" method="GET" action="update.PHP?id='.$row->idReparation.'">
<label for="idReparation"> ID Réparation </label>
<input type="text" name="idReparation" value="'.$row->idReparation.'" readonly>
<label for="nomPrenom"> Nom et Prénom </label>
<input type="text" name="NomPrenom" value="'.$row->NomPrenom.'">
<label for="email"> E-mail </label>
<input type="email" name="email" value="'.$row->email.'">
<label for="tel"> Téléphone </label>
<input type="tel" name="tel" value="'.$row->tel.'">
<label for="produit"> Type du Produit </label>
<input type="text" name="type" value="'.$row->type.'">
<label for="marque"> Marque du Produit </label>
<input type="text" name="marque" value="'.$row->marque.'">
<label for="reference"> Référence du Produit </label>
<input type="text" name="reference" value="'.$row->reference.'">
<label for="date"> Date dachat </label>
<input type="date" name="date" value="'.$row->date.'">
<label for="probleme"> Problème </label>
<input type="text" name="probleme" value="'.$row->probleme.'">
<button type="submit" name="modifier"> Confirmer </button>
</form>
</div>
</div>
</div>
</div>';
echo $update;
}
}
?>
</table>
</div>解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）