所以我试图制作一个表,使您可以内联编辑数据以及添加,搜索和删除数据。我在自己的个人服务器上运行了代码,但是当我上载代码时,它无法连接到我的PhpMyAdmin,我尝试观看更多有关它的视频,但是表上没有任何数据,这就是为什么我相信这是一个连接问题,如果我错了,请纠正我,如果有人可以看一下,那就太好了。 :)
Index.php
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<span id="result"></span>
<div id="live_data"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"select.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
});
}
fetch_data();
$(document).on('click', '#btn_add', function(){
var first_name = $('#first_name').text();
var last_name = $('#last_name').text();
var address = $('#address').text();
var email_address = $('#email_address').text();
var home_phone = $('#home_phone').text();
var mobile_phone = $('#mobile_phone').text();
var package_type = $('#package_type_').text();
var customer_status = $('#customer_status').text();
var mac_address = $('#mac_address').text();
var installer = $('#installer').text();
var static_ip = $('#static_ip').text();
var date_installed = $('#date').text();
$.ajax({
url:"insert.php",
method:"POST",
data:{first_name:first_name, last_name:last_name, address:address, email_address:email_address, home_phone:home_phone, mobile_phone:mobile_phone, package_type:package_type, customer_status:customer_status, mac_address:mac_address, installer:installer, static_ip, date_installed:date_installed},
dataType:"text",
success:function(data)
{
alert(data);
fetch_data();
}
})
});
function edit_data(id, text, column_name)
{
$.ajax({
url:"edit.php",
method:"POST",
data:{id:id, text:text, column_name:column_name},
dataType:"text",
success:function(data){
//alert(data);
$('#result').html("<div class='alert alert-success'>"+data+"</div>");
}
});
}
$(document).on('blur', '.first_name', function(){
var id = $(this).data("id1");
var first_name = $(this).text();
edit_data(id, first_name, "first_name");
});
$(document).on('blur', '.last_name', function(){
var id = $(this).data("id2");
var last_name = $(this).text();
edit_data(id,last_name, "last_name");
});
$(document).on('blur', '.address', function(){
var id = $(this).data("id3");
var address = $(this).text();
edit_data(id,address, "address");
});
$(document).on('blur', '.email_address', function(){
var id = $(this).data("id4");
var email_address = $(this).text();
edit_data(id,email_address, "email_address");
});
$(document).on('blur', '.home_phone', function(){
var id = $(this).data("id5");
var home_phone = $(this).text();
edit_data(id,home_phone, "home_phone");
});
$(document).on('blur', '.mobile_phone', function(){
var id = $(this).data("id6");
var mobile_phone = $(this).text();
edit_data(id,mobile_phone, "mobile_phone");
});
$(document).on('blur', '.package_type', function(){
var id = $(this).data("id7");
var package_type = $(this).text();
edit_data(id,package_type, "package_type");
});
$(document).on('blur', '.customer_status', function(){
var id = $(this).data("id8");
var customer_status = $(this).text();
edit_data(id,customer_status, "customer_status");
});
$(document).on('blur', '.mac_address', function(){
var id = $(this).data("id9");
var mac_address = $(this).text();
edit_data(id,mac_address, "mac_address");
});
$(document).on('blur', '.installer', function(){
var id = $(this).data("id10");
var installer = $(this).text();
edit_data(id,installer, "installer");
});
$(document).on('blur', '.static_ip', function(){
var id = $(this).data("id5");
var static_ip = $(this).text();
edit_data(id,static_ip, "static_ip");
});
$(document).on('blur', '.date_installed', function(){
var id = $(this).data("id5");
var date_installed = $(this).text();
edit_data(id,date_installed, "date_installed");
});
$(document).on('click', '.btn_delete', function(){
var id=$(this).data("id3");
if(confirm("Are you sure you want to delete this?"))
{
$.ajax({
url:"delete.php",
method:"POST",
data:{id:id},
dataType:"text",
success:function(data){
alert(data);
fetch_data();
}
});
}
});
});
</script>
Insert.php
<?php
$connect = mysqli_connect(");
$sql = "INSERT INTO tbl_sample(first_name, last_name, address, email_address, home_phone, mobile_phone, package_type, customer_status, mac_address, installer, static_ip, date) VALUES('".$_POST["first_name"]."', '".$_POST["last_name"]."', '".$_POST["address"]."', '".$_POST["email_address"]."', '".$_POST["home_phone"]."', '".$_POST["mobile_phone"]."', '".$_POST["package_type"]."', '".$_POST["customer_status"]."', '".$_POST["mac_address"]."', '".$_POST["installer"]."', '".$_POST["static_ip"]."', '".$_POST["date"]."' )";
if(mysqli_query($connect, $sql))
{
echo 'Data Inserted';
}
?>
select.php
<?php
$connect = mysqli_connect();
$output = '';
$sql = "SELECT * FROM tbl_sample ORDER BY id DESC";
$result = mysqli_query($connect, $sql);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="10%">Id</th>
<th width="30%">First Name</th>
<th width="30%">Last Name</th>
<th width="30%">Address</th>
<th width="40%">Email Address</th>
<th width="30%">Home Phone</th>
<th width="30%">Mobile Phone</th>
<th width="30%">Package Type</th>
<th width="30%">Customer Status</th>
<th width="30%">Mac Address</th>
<th width="30%">Installer</th>
<th width="30%">Static Ip</th>
<th width="30%">Date Installed</th>
<th width="10%">Delete</th>
</tr>';
$rows = mysqli_num_rows($result);
if($rows > 0)
{
if($rows > 10)
{
$delete_records = $rows - 10;
$delete_sql = "DELETE FROM tbl_sample LIMIT $delete_records";
mysqli_query($connect, $delete_sql);
}
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["id"].'</td>
<td class="first_name" data-id1="'.$row["id"].'" contenteditable>'.$row["first_name"].'</td>
<td class="last_name" data-id2="'.$row["id"].'" contenteditable>'.$row["last_name"].'</td>
<td class="address" data-id3="'.$row["id"].'" contenteditable>'.$row["address"].'</td>
<td class="email_address" data-id3="'.$row["id"].'" contenteditable>'.$row["email_address"].'</td>
<td class="home_phone" data-id3="'.$row["id"].'" contenteditable>'.$row["home_phone"].'</td>
<td class="mobile_phone" data-id3="'.$row["id"].'" contenteditable>'.$row["mobile_phone"].'</td>
<td class="package_type" data-id3="'.$row["id"].'" contenteditable>'.$row["package_type"].'</td>
<td class="customer_status" data-id3="'.$row["id"].'" contenteditable>'.$row["customer_status"].'</td>
<td class="mac_address" data-id3="'.$row["id"].'" contenteditable>'.$row["mac_address"].'</td>
<td class="installer" data-id3="'.$row["id"].'" contenteditable>'.$row["installer"].'</td>
<td class="static_ip" data-id3="'.$row["id"].'" contenteditable>'.$row["static_ip"].'</td>
<td class="date_installed" data-id3="'.$row["id"].'" contenteditable>'.$row["date_installed"].'</td>
<td><button type="button" name="delete_btn" data-id3="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>
</tr>
';
}
$output .= '
<tr>
<td></td>
<td id="first_name" contenteditable></td>
<td id="last_name" contenteditable></td>
<td id="address" contenteditable></td>
<td id="email_address" contenteditable></td>
<td id="home_phone" contenteditable></td>
<td id="mobile_phone" contenteditable></td>
<td id="package_type" contenteditable></td>
<td id="customer_status" contenteditable></td>
<td id="mac_address" contenteditable></td>
<td id="installer" contenteditable></td>
<td id="static_ip" contenteditable></td>
<td id="date_installed" contenteditable></td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
</tr>
';
}
else
{
$output .= '
<tr>
<td></td>
<td id="first_name" contenteditable></td>
<td id="last_name" contenteditable></td>
<td id="address" contenteditable></td>
<td id="email_address" contenteditable></td>
<td id="home_phone" contenteditable></td>
<td id="mobile_phone" contenteditable></td>
<td id="package_type" contenteditable></td>
<td id="customer_status" contenteditable></td>
<td id="mac_address" contenteditable></td>
<td id="installer" contenteditable></td>
<td id="static_ip" contenteditable></td>
<td id="date_installed" contenteditable></td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
</tr>';
}
$output .= '</table>
</div>';
echo $output;
?>
Edit.php
<?php
$connect = mysqli_connect();
$id = $_POST["id"];
$text = $_POST["text"];
$column_name = $_POST["column_name"];
$sql = "UPDATE Reave SET ".$column_name."='".$text."' WHERE id='".$id."'";
if(mysqli_query($connect, $sql))
{
echo 'Data Updated';
}
?>
delete.php
<?php
$connect = mysqli_connect("");
$sql = "DELETE FROM tbl_sample WHERE id = '".$_POST["id"]."'";
if(mysqli_query($connect, $sql))
{
echo 'Data Deleted';
}
?>
该脚本应该允许您添加,编辑,删除和编辑数据。它不显示数据库中的任何数据。