Javascript 编辑列表而不离开网页_Javascript_Php_Sql

Javascript 编辑列表而不离开网页

javascript php sql

Javascript 编辑列表而不离开网页,javascript,php,sql,Javascript,Php,Sql,对不起，我真的不知道如何命名这个问题。因为我真的不知道从哪里开始搜索我的问题如下。我正在从数据库加载字符串列表，并将其显示在网页的表中。当我停留在页面上时，如何编辑这些字符串？例如，单击一个条目以显示inputfield 任何指向其他问题的指针或参考都会有所帮助。HTML代码 <input type="text" name="edit" class="editstring" value="" id="1"> JQuery代码 $(document).on('focusout'

对不起，我真的不知道如何命名这个问题。因为我真的不知道从哪里开始搜索

我的问题如下。我正在从数据库加载字符串列表，并将其显示在网页的表中。当我停留在页面上时，如何编辑这些字符串？例如，单击一个条目以显示inputfield

任何指向其他问题的指针或参考都会有所帮助。

HTML代码

<input type="text" name="edit" class="editstring" value="" id="1">

JQuery代码

$(document).on('focusout',".editstring",function(){

    var id = $(this).attr('id');
    var change = $(this).val();
    $.ajax(
    {
        type: "POST",
        url : "<?=site_url('your controller url')?>/"+id,
        data:{'change' : change},
        success:function(data)
        {   
            console.log(data);
        }   
    });  

});

$（document）.on（'focusout'，“.editstring”，function（））{
var id=$（this.attr（'id'）；
var change=$（this.val（）；
$.ajax(
{
类型：“POST”，
url:“/”+id，
数据：{'change'：change}，
成功：功能（数据）
{   
控制台日志（数据）；
}   
});  
});

AJAX是解决方案
AJAX=异步JavaScript和XML。

AJAX的工作原理：

示例：
html

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

src:

希望这能有所帮助：）

我觉得这个问题有点模糊，所以我一般会这样做

您遵循的模式应该是：

单击表格单元格->触发单击事件

这将用

等替换该单元格中的字符串

填充输入，一旦按enter键或从该输入单元格中单击（还应触发单击/键控事件等），输入的值应存储在首先存储表输入的变量中。（因此，新字符串将替换输入的第一个字符串值）

当用户提交数据时，将向服务器发送一个put请求和更新的数据集，以便在客户端/服务器端对所有内容进行对齐

这种模式有一些变化，但有一些折衷，但上述情况总体上是可靠的。不过，您应该记住您的个人用例。

据我所知，您正在寻找表值的内联编辑。如果您使用的是DataTables，可以尝试

或者，您可以尝试类似的方法，没有任何代码示例，它有点复杂：

这些步骤是：

PHP必须打印一个

看看AJAXAJAX将是您的解决方案。
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "example.txt", true);
  xhttp.send();
}