如果我们有简单的表（列表）作为 sql 选择的结果，有没有一种简单的方法可以通过单击单个单元格来更改二进制值？
表结构为：
ID Name Bin1 Bin2 Bin3
1 Mila 0 0 1
2 John 0 0 0
3 Pato 1 0 0
所以我搜索了一些简单的 JQUERY 或 AJAX 来更改单击单元格的值，因此如果可能，页面不需要刷新...
这个想法是有一个带有名称的表格和三个（或更多）列，其中单元格在值为 1 时具有特定颜色（如果为 0，则没有），并且列表示列出的 IN-OUT-PAUSE 状态这种情况下的人。
我现在拥有的是来自数据库的简单列表：
有人能指出我正确的方向吗？我正在使用 MySQL-PHP-HTML 组合。谢谢。
【问题讨论】：
标签： php jquery html mysql ajax
这应该可以帮助您入门
您的 Ajax 代码
$(document).ready(function(){
$(".my_element").click(function(){
$.ajax({
type: "POST",
cache: false,
url: "my_backend.php",
data: {value: "new value"}, //send a new value to the "my_backend.php" script
beforeSend: function (html) {
//show a preloader here
},
success: function (html) {
//do something if request is successfully completed
}
})
})
})
您的后端 PHP 脚本
<?php
$value = $_POST['value']; // you need to do additional sql injection protection yourself;
$query = mysqli_query($db,"my mysqli updating query")or trigger_error(mysqli_error());
?>
【讨论】：
您可以单击获取表格单元格中的文本，并使用 jquery ajax 将其提供给 php 脚本。此脚本可以运行 mysql 查询以将值更改为 0/1，具体取决于 ajax/post 请求传输的值。然后你可以开始另一个查询来询问数据库中的新值并输出这个新值（在 php 脚本中）。
例如：
$(document).ready(function(){
$('table').on('click','td',function(){
var currentValue = $(this).text();
var dbEntryId = $(this).attr('data-dbEntryId');
$.ajax({
url: "script.php",
method: "POST",
data: { dbEntryId: dbEntryId, currentValue: currentValue },
success: function(result){
$(this).text(result);
}
});
});
});
如您所见，您可以使用 php 输出，将其作为新文本放入表格单元格中。
这只是js部分的一个例子。在这种情况下，您必须使用 data-dbEntryId 属性来补充您的表格单元格，以便您知道您必须在数据库中编辑哪个条目。
【讨论】：
一个可能的事情是在你的桌子上使用属性。
<table id="table-to-click">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Bin1</th>
<th>Bin2</th>
<th>Bin3</th>
</tr>
</thead>
<tbody>
<tr data-id="1" class="table-tr">
<td data-prop="id" class="t-id">1</td>
<td data-prop="name" class="t-id">Mila</td>
<td data-prop="bin1" class="t-id">0</td>
<td data-prop="bin2" class="t-id">0</td>
<td data-prop="bin3" class="t-id">1</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function() {
//On click on a td in this table
$("table.table-to-click > tbody > tr.table-tr td").on('click', function(e) {
//Get field in database to update
var fieldName = $(this).attr('data-prop');
//Get id in database (easier that read first td's value)
var id = $(this).parent().attr('data-id');
//Call server with datas
$.ajax({
method: "POST",
url: "update-field.php",
data: {
field: fieldName,
id: id
}
});
};
});
</script>
上面的代码显示一个表格，点击表格单元格发送请求以更新给定字段。请参阅 jQuery 和 AJAX。注意：data-prop 是数据库中字段的名称。
下面的代码是你的页面update-field.php，它接收请求，并在数据库中更新
if (empty($_POST['field']) || empty($_POST['id'])) {
exit();
}
$fields = ["name", "bin1", "bin2", "bin3"];
//It is only possible to update field in $fields array,
//This is for security reason (to not update id for example)
if (! in_array($_POST['field'], $fields)) {
exit();
}
$db = new PDO('mysql:host=localhost;dbname=yourdbname;charset=utf8', 'yourusername', 'yourpassword');
$stmt = $db->prepare("UPDATE yourTable SET :fieldname = (:fieldname + 1) % 2 WHERE id = :id");
$stmt->execute(array(
'fieldname' => mysql_real_escape_string($_POST['field']),
'id' => intval($_POST['id']),
));
【讨论】：