我正在使用php连接到数据库,并将表的所有行显示为网页上的表。现在我想要的是每行都有一个复选框和一个隐藏按钮,这样当我单击一行中的复选框时,该行的相应按钮变得可见,当我单击该按钮时,该行将被删除。
这是我的php代码。我正在使用wordpress,并且由于wordpress不允许页面上的php,所以我正在使用插件shortcode-exec-php在wordpress页面上启用php。但我认为这更像是一个编程问题,而不是wordpress支持问题。
// Connect to the database
$dbLink = new mysqli('127.0.0.1', 'abc', '123', 'test');
if(mysqli_connect_errno()) {
die("MySQL connection failed: ". mysqli_connect_error());
}
// Query for a list of all existing files
$sql = 'SELECT `id`, `name`, `mime`, `size`, `created` FROM `file`';
$result = $dbLink->query($sql);
// Check if it was successfull
if($result) {
// Make sure there are some files in there
if($result->num_rows == 0) {
echo '<p>There are no files in the database</p>';
}
else {
// Print the top of a table
echo '<table width="100%">
<tr>
<td><b>Name</b></td>
<td><b>Mime</b></td>
<td><b>Size (bytes)</b></td>
<td><b>Created</b></td>
<td><b> </b></td>
</tr>';
// Print each file
while($row = $result->fetch_assoc()) {
echo "
<tr>
<td>{$row['name']}</td>
<td>{$row['mime']}</td>
<td>{$row['size']}</td>
<td>{$row['created']}</td>
<td><a href='get_file.php?id={$row['id']}'>Download</a></td>
//here i want a code that insert a checkbox and a hidden button with the above mentioned functionalty
</tr>";
}
// Close table
echo "</table>";
}
// Free the result
$result->free();
}
else
{
echo 'Error! SQL query failed:';
echo "<pre>{$dbLink->error}</pre>";
}
// Close the mysql connection
$dbLink->close();
有人可以帮助我吗?
如果你提到javascript,那么告诉我一种将其与现有代码一起使用的方法。
这里有一个可能对你有帮助的代码(使用 jquery):
菲律宾语:
echo "
<tr>
<td>{$row['name']}</td>
<td>{$row['mime']}</td>
<td>{$row['size']}</td>
<td>{$row['created']}</td>
<td><a href='get_file.php?id={$row['id']}'>Download</a></td>
<td><input type='checkbox' class='checkbox'><input type='button' style='display:none' value='delete' name='delete'><input type='button' style='display:none' value='edit' name='edit'></td>
</tr>";
Jquery:
$(document).ready(function(){
$("input[type=checkbox]").on("click", function () {
($(this).is(":checked")) ? $(this).nextAll("input").show() : $(this).nextAll("input").hide();
});
$("input[name='delete']").on("click", function () {
$(this).closest("table tr").remove();
});
$("input[name='edit']").on("click", function () {
$(this).closest("tr").attr("contenteditable",true).focus();
});
});
这是一个演示:http://jsfiddle.net/hctyP/2/