Question

如果我们从sql select中得到简单的表（列表），有没有一种简单的方法如何在单个单元格上使用onclick更改二进制值？

表结构是：

ID  Name  Bin1  Bin2  Bin3
1   Mila  0     0     1
2   John  0     0     0
3   Pato  1     0     0

所以我搜索一些简单的JQUERY或AJAX来改变点击单元格的值，这样如果可能的话，页面不需要刷新......

这个想法是让表格具有名称和三个（或更多）列，当值为1时，单元格具有特定颜色（如果为0，则为none），列表示列出的IN-OUT-PAUSE状态在这种情况下的人。

我现在拥有的是数据库中的简单列表：

Presence table

有人能指出我正确的方向吗？我正在使用MySQL-PHP-HTML组合。谢谢。

Answer 1

这应该可以帮助你开始

您的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());

?>

Answer 2

您可以在单击时获取表格单元格中的文本，并使用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属性来补充表格单元格，以便您知道必须在数据库中编辑哪个条目。

Answer 3

可能的事情是在你的桌子上使用属性。

<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']),
));

请参阅PDO和prepared statements。

使用＆＃34; onclick＆＃34;更改SQL值在桌子上？

3 个答案: