从sql分配一个具有不同按钮id的模态

时间:2017-03-02 11:44:44

标签: javascript php

我目前正在为我的学校进行在线网络编程的最终项目,但是我很难将特定的id从sql分配给按钮id,然后只用一个模式打开它们......这里&#39我的编码:

final Map<String, Object> jsonAsObj = (Map<String, Object>) JsonParser.fromJson(JsonJavaFactory.instance, body);

1 个答案:

答案 0 :(得分: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>

通过这种方式,您还需要绑定模态的其他表单数据。 添加评论