Javascript 从sql中指定一个具有不同按钮id的模式_Javascript_Php

Javascript 从sql中指定一个具有不同按钮id的模式

javascript php

Javascript 从sql中指定一个具有不同按钮id的模式,javascript,php,Javascript,Php,我目前正在为我的学校做在线网络编程的最后一个项目，但我很难将特定的id从sql分配到按钮id，然后只使用一个模式打开它们。。。这是我的代码： <html> <head> <title>SICT ADMIN NEW</title> </head> <body> <div id="container"> <div id="admin">Admin | <a href="index.php">L

我目前正在为我的学校做在线网络编程的最后一个项目，但我很难将特定的id从sql分配到按钮id，然后只使用一个模式打开它们。。。这是我的代码：

<html>
<head>
<title>SICT ADMIN NEW</title>
</head>
<body>
<div id="container">
<div id="admin">Admin | <a href="index.php">Log Out</a></div>
<ul class="topnav" id="myTopnav">
<li><a href="Admin_Index.php">Home</a></li>
<li><a class="active" href="Admin_New.php">New</a></li>
<li><a href="#">Update</a></li>
<li><a href="#">Delete</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onClick="myFunction()">☰</a>
</li>
</ul>
<div id="content">
<div id="link_row">
<div id="link_row_1"><a href="Admin_New.php" style="color:black">New</a> >> <span style="color:#900">Campus</span></div>
<div id="link_row_2">
<div id="link_row_2_text"><button id="Add" ><a href="Admin_New_Campus.php">Add</a></button></div>
<div id="link_row_2_img"><img src="img/add_icon.png" width="15" height="15" alt="add"></div>
</div>
</div>

<table width="87%" align="center" border="1">
<tr>
<th width="17%">Campus_ID</th>
<th width="39%">Campus_Name</th>
<th width="38%">Location</th>
<th width="3%"></th>
<th width="5%"></th>
</tr>

<?php
$servername = "localhost";
$username = "root";
$password = "mysql";
$dbname = "SICT";

//Create connection
$con = mysqli_connect($servername, $username, $password, $dbname);
//Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$Campus_Record = mysqli_query($con, "SELECT * FROM Campus");
while($row = mysqli_fetch_array($Campus_Record))
{
echo "<tr>";
echo "<td>" . $row['Campus_ID'] . "</td>";
$Campus_ID = $row['Campus_ID'];
$Temp = $row['Campus_ID'];
$Edit = $row['Campus_ID'];
echo "<td>" . $row['Campus_Name'] . "</td>";
echo "<td>" . $row['Location'] . "</td>";
echo "<td><button id='$Edit'>Edit</button></td>";
echo "<td><a href='Admin_New_Campus_Delete.php?Campus_ID=$Campus_ID' onclick='return confirm(\"Confirm Delete Record?\")'><button id='Campus_ID'>Delete</button></a></td>";
echo "</tr>";
}
?> 
</table>

</div> 
<div id="footer">© 2017 Institute ofTechnical Education. · Privacy · Terms</div>


<div id="Campus_Modal" class="Modal">
<!-- Modal content -->
<div class="modal-content">
<span class="Close">&times;</span>
<form method = "post">
<div id="Modal_Content">
  Campus ID:<br>
  <input type="text" name="Campus_ID_2" required /><br><br>
  Campus Name:<br>
  <input type="text" name="Campus_Name_2" required /><br><br>
  Location:<br>
  <input type="text" name="Location_2" required /><br><br>
  <input type='text' id = "hidden" name="Temp" value = "<?php echo $Temp; ?>">
<div id="Submit"><input type="submit" name="submit" value="Submit" formaction ="Admin_New_Campus_Update.php" /></div>
    </div>
  </div>
</div>

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
    x.className += " responsive";
} else {
    x.className = "topnav";
}
}

var modal = document.getElementById('Campus_Modal');
var btn = document.getElementById("Edit");
var span = document.getElementsByClassName("Close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>


SICT管理新
行政|








>>校园
校园ID
校园名称
位置
有两种方法可以解决您的问题：
1） 您需要将模式代码放入while循环
2） 如果你想拥有单一模式，那么你需要在模式打开时在模式中动态绑定校园数据。因此，下面我更新了你的代码，每当用户点击校园列表中的编辑按钮时，隐藏字段“校园id”都是动态的：[code]通过这种方式，你还需要绑定模式的其他表单数据
<html>
<head>
<title>SICT ADMIN NEW</title>
</head>
<body>
<div id="container">
<div id="admin">Admin | <a href="index.php">Log Out</a></div>
<ul class="topnav" id="myTopnav">
<li><a href="Admin_Index.php">Home</a></li>
<li><a class="active" href="Admin_New.php">New</a></li>
<li><a href="#">Update</a></li>
<li><a href="#">Delete</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onClick="myFunction()">☰</a>
</li>
</ul>
<div id="content">
<div id="link_row">
<div id="link_row_1"><a href="Admin_New.php" style="color:black">New</a> >> <span style="color:#900">Campus</span></div>
<div id="link_row_2">
<div id="link_row_2_text"><button id="Add" ><a href="Admin_New_Campus.php">Add</a></button></div>
<div id="link_row_2_img"><img src="img/add_icon.png" width="15" height="15" alt="add"></div>
</div>
</div>

<table width="87%" align="center" border="1">
<tr>
<th width="17%">Campus_ID</th>
<th width="39%">Campus_Name</th>
<th width="38%">Location</th>
<th width="3%"></th>
<th width="5%"></th>
</tr>
<?php

$servername = "localhost";
$username = "root";
$password = "mysql";
$dbname = "SICT";

//Create connection
$con = mysqli_connect($servername, $username, $password, $dbname);
//Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$Campus_Record = mysqli_query($con, "SELECT * FROM Campus");
while($row = mysqli_fetch_array($Campus_Record))
{
  echo "<tr>";
  echo "<td>" . $row['Campus_ID'] . "</td>";
  $Campus_ID = $row['Campus_ID'];
  $Temp = $row['Campus_ID'];
  $Edit = $row['Campus_ID'];
  echo "<td>" . $row['Campus_Name'] . "</td>";
  echo "<td>" . $row['Location'] . "</td>";
  echo "<td><button id='$Edit' onclick ='reply_click(this);'>Edit</button></td>";
  echo "<td><a href='Admin_New_Campus_Delete.php?Campus_ID=$Campus_ID' onclick='return confirm(\"Confirm Delete Record?\")'><button id='Campus_ID'>Delete</button></a></td>";
  echo "</tr>";
}
?> 
</table>

</div> 
<div id="footer">© 2017 Institute ofTechnical Education. · Privacy · Terms</div>


<div id="Campus_Modal" class="Modal">
<!-- Modal content -->
<div class="modal-content">
<span class="Close">&times;</span>
<form method = "post">
<div id="Modal_Content">
  Campus ID:<br>
  <input type="text" name="Campus_ID_2" required /><br><br>
  Campus Name:<br>
  <input type="text" name="Campus_Name_2" required /><br><br>
  Location:<br>
  <input type="text" name="Location_2" required /><br><br>
  <input type='text' id = "hidden" name="Temp" value = "">
<div id="Submit"><input type="submit" name="submit" value="Submit" formaction ="Admin_New_Campus_Update.php" /></div>
    </div>
  </div>
</div>

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
    x.className += " responsive";
} else {
    x.className = "topnav";
}
}

var modal = document.getElementById('Campus_Modal');
var btn = document.getElementById("Edit");
var span = document.getElementsByClassName("Close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}

function reply_click(obj)
{
  var test = obj.id;
  document.getElementById("hidden").value = test;
}

</script>
</body>
</html>


SICT管理新
行政|








>>校园
校园ID
校园名称
位置
有两种方法可以解决您的问题：
1） 您需要将模式代码放入while循环
2） 如果你想拥有单一模式，那么你需要在模式打开时在模式中动态绑定校园数据。因此，下面我更新了你的代码，每当用户点击校园列表中的编辑按钮时，隐藏字段“校园id”都是动态的：[code]通过这种方式，你还需要绑定模式的其他表单数据
<html>
<head>
<title>SICT ADMIN NEW</title>
</head>
<body>
<div id="container">
<div id="admin">Admin | <a href="index.php">Log Out</a></div>
<ul class="topnav" id="myTopnav">
<li><a href="Admin_Index.php">Home</a></li>
<li><a class="active" href="Admin_New.php">New</a></li>
<li><a href="#">Update</a></li>
<li><a href="#">Delete</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onClick="myFunction()">☰</a>
</li>
</ul>
<div id="content">
<div id="link_row">
<div id="link_row_1"><a href="Admin_New.php" style="color:black">New</a> >> <span style="color:#900">Campus</span></div>
<div id="link_row_2">
<div id="link_row_2_text"><button id="Add" ><a href="Admin_New_Campus.php">Add</a></button></div>
<div id="link_row_2_img"><img src="img/add_icon.png" width="15" height="15" alt="add"></div>
</div>
</div>

<table width="87%" align="center" border="1">
<tr>
<th width="17%">Campus_ID</th>
<th width="39%">Campus_Name</th>
<th width="38%">Location</th>
<th width="3%"></th>
<th width="5%"></th>
</tr>
<?php

$servername = "localhost";
$username = "root";
$password = "mysql";
$dbname = "SICT";

//Create connection
$con = mysqli_connect($servername, $username, $password, $dbname);
//Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$Campus_Record = mysqli_query($con, "SELECT * FROM Campus");
while($row = mysqli_fetch_array($Campus_Record))
{
  echo "<tr>";
  echo "<td>" . $row['Campus_ID'] . "</td>";
  $Campus_ID = $row['Campus_ID'];
  $Temp = $row['Campus_ID'];
  $Edit = $row['Campus_ID'];
  echo "<td>" . $row['Campus_Name'] . "</td>";
  echo "<td>" . $row['Location'] . "</td>";
  echo "<td><button id='$Edit' onclick ='reply_click(this);'>Edit</button></td>";
  echo "<td><a href='Admin_New_Campus_Delete.php?Campus_ID=$Campus_ID' onclick='return confirm(\"Confirm Delete Record?\")'><button id='Campus_ID'>Delete</button></a></td>";
  echo "</tr>";
}
?> 
</table>

</div> 
<div id="footer">© 2017 Institute ofTechnical Education. · Privacy · Terms</div>


<div id="Campus_Modal" class="Modal">
<!-- Modal content -->
<div class="modal-content">
<span class="Close">&times;</span>
<form method = "post">
<div id="Modal_Content">
  Campus ID:<br>
  <input type="text" name="Campus_ID_2" required /><br><br>
  Campus Name:<br>
  <input type="text" name="Campus_Name_2" required /><br><br>
  Location:<br>
  <input type="text" name="Location_2" required /><br><br>
  <input type='text' id = "hidden" name="Temp" value = "">
<div id="Submit"><input type="submit" name="submit" value="Submit" formaction ="Admin_New_Campus_Update.php" /></div>
    </div>
  </div>
</div>

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
    x.className += " responsive";
} else {
    x.className = "topnav";
}
}

var modal = document.getElementById('Campus_Modal');
var btn = document.getElementById("Edit");
var span = document.getElementsByClassName("Close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}

function reply_click(obj)
{
  var test = obj.id;
  document.getElementById("hidden").value = test;
}

</script>
</body>
</html>


SICT管理新
行政|








>>校园
校园ID
校园名称
位置
为什么对同一个id使用不同的变量？您可以在所有位置访问一个变量，为什么对同一id使用不同的-不同的变量？您可以在所有位置访问一个变量