2017-03-02 37 views
1

我目前正在做我的學校在線web編程的最終項目,但我有困難分配特定的ID從SQL到按鈕ID,然後打開它們只有一個模式。 ..這是我的編碼:一個模式與不同的按鈕ID分配從sql

<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> 
+0

爲什麼你對同一個ID使用不同的變量?你可以在所有地方訪問一個變量 –

回答

0

有通過它可以解決你的問題,有兩種方式:

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> 

通過這種方式,您還需要綁定其他形式的模態數據。 添加評論

相關問題