<html>
<head>
<TITLE>Category selection</TITLE>
<style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function getsubcat(val) {
$.ajax({
type: "POST",
url: "get_subcat.php",
data:'subcat_id='+val,
success: function(data){
$("#subcat-list").html(data);
}
});
}
function selectcat(val) {
$("#search-box").val(val);
}
</script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function arrangeSno()
{
var i=0;
$('#pTable tr').each(function() {
$(this).find(".sNo").html(i);
i++;
});
}
$(document).ready(function(){
$(".add-row").click(function(){
// var cat = $("#cat_name").val();
var sno = $('#pTable tr').length;
var cat = $("#cat-list").val();
var display = $("#displayname").val();
var subcat = $('#subcat-list').val();
var order = $('#privilage').val();
var markup = "<tr><td>" + sno + "</td><td>"+ cat + "</td><td>" + display + "</td><td>"+ subcat+ "</td><td>"+ order+"</td><td><input type='button' id='edit' value='Edit'></td></tr>";
$("table tbody").append(markup);
});
});
</script>
</head>
<body>
</br></br>
<form method="POST" action="">
<div id="results">
<h3 align="center">Welcome<i>  <?php echo$row['email']?></i></h3>
<h3 align="center"><strong>Choose Your Templates</strong></h3>
</br></br>
<div align="center">
<div class="row">
<label>Select your Category:</label>
<select name="category" id="cat-list" class="demoInputBox" onChange="getsubcat(this.value);">
<option value="">Select Category</option></td>
<?php
$results=mysqli_query($con,"SELECT * FROM category");
foreach($results as $category) {
?>
<option value="<?php echo $category["cat_name"]; ?>"><?php echo $category["cat_name"]; ?></option>
<?php
}
?>
</select>
</div>
</br>
<div class="row">
<label> Display Name:</label>
<input type="text" name="display_name" id="displayname"/>
</div>
<div class="row">
<label> Select your Subcategory:</label>
<select name="pagename" id="subcat-list" class="demoInputBox">
<option value="select">Select</option>
</select>
</div>
<div>
<label>Set Order</label>
<select name="privilage" id="privilage">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div></br>
<label>Database</label>
<input type="text" id="db" name="database" value="<?php echo $row['databasenme'];?>" readonly />
</div>
<div></br>
<input type="button" class="add-row" value="Submit">
</form>
</div>
</form>
</div>
<?php
}
?>
</div>
<table id="pTable">
<thead>
<tr>
<th>Slno</th>
<th>Category</th>
<th>Display Name</th>
<th>Subcategory</th>
<th>Order</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
上下文： 这是用于显示和编辑创建的表单的代码。首先，当单击表单中的提交按钮时，表单详细信息将添加到表格行中。我想动态编辑该行详细信息并将该表格内容输入数据库。
<?php
require('connection.php');
session_start();
$sql=mysqli_query($con,"SELECT * FROM `main_regis` WHERE `databasenme`= '". $_SESSION["databasenme"]."'");
while($row = mysqli_fetch_array($sql)) {
?>
<html>
<head>
<TITLE>Category selection</TITLE>
<style>
body{width:610px;font-family:calibri;}
.frmDronpDown {border: 1px solid #7ddaff;background-color:#C8EEFD;margin: 2px 0px;padding:40px;border-radius:4px;}
.demoInputBox {padding: 10px;border: #bdbdbd 1px solid;border-radius: 4px;background-color: #FFF;width: 50%;}
.row{padding-bottom:15px;}
form{
margin: 20px 0;
}
form input, button{
padding: 5px;
}
table{
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #cdcdcd;
}
table th, table td{
padding: 10px;
text-align: left;
}
</style>
</head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function getsubcat(val) {
$.ajax({
type: "POST",
url: "get_subcat.php",
data:'subcat_id='+val,
success: function(data){
$("#subcat-list").html(data);
}
});
}
function selectcat(val) {
$("#search-box").val(val);
}
</script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function arrangeSno()
{
var i=0;
$('#pTable tr').each(function() {
$(this).find(".sNo").html(i);
i++;
});
}
$(document).ready(function(){
$(".add-row").click(function(){
// var cat = $("#cat_name").val();
var sno = $('#pTable tr').length;
var cat = $("#cat-list").val();
var display = $("#displayname").val();
var subcat = $('#subcat-list').val();
var order = $('#privilage').val();
var markup = "<tr><td>" + sno + "</td><td>"+ cat + "</td><td>" + display + "</td><td>"+ subcat+ "</td><td>"+ order+"</td><td><input type='button' id='edit' value='Edit'></td></tr>";
$("table tbody").append(markup);
});
});
</script>
</head>
<body>
<form method="POST" action="">
<label>category</label>
<input type="text" name="category" id="category" />
<label>sub category</label>
<input type="text" name="sub_category" id="sub_category" />
<label>Display name</label>
<input type="text" name="display" id="display" />
<label>privilege</label>
<input type="text" name="privilege" id="privilege" />
<input type="submit" name="submit" class="add-row"/>
</form>
<table id="pTable">
<thead>
<tr>
<th>Slno</th>
<th>Category</th>
<th>Display Name</th>
<th>Subcategory</th>
<th>Order</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
上下文：我有一个包含类别和子类别的表单。选择类别和相应的子类别后，我需要动态地将值输入到表单底部显示的表中，而不将数据输入数据库。此处显示的工作代码。我想通过单击编辑按钮动态编辑每一行，然后将内容保存到表中。
代码包含java脚本部分以动态包含每一行，但它不包含任何要传递给数据的id值。因此，我无法通过单击编辑按钮动态编辑行。
表单包含类别字段，子类别字段，显示名称，权限，并通过单击添加行按钮将这些值插入到表中。动态地，编辑按钮出现在表格内，但是在单击编辑按钮时，我无法动态编辑行。