Question

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

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

任何指针或对其他问题的引用都会有所帮助。

Answer 1

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);
        }   
    });  

});

Answer 2

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>

js：

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();
}

src：https://www.w3schools.com/js/js_ajax_intro.asp

希望这会有所帮助：）

Answer 3

我觉得这个问题有点模糊，所以这就是我一般会做的事情。

您所遵循的模式应该是：

点击表格单元格 - ＆gt;触发点击事件

这将使用<input>等替换该单元格中的字符串。

您填写输入，一旦您按Enter键或单击远离该输入单元格（也应触发单击/键盘事件等），输入的值应存储在首先存储表输入的变量中。（所以新字符串替换了输入的第一个字符串值）

当用户提交数据时，会向服务器发送一个put请求，其中包含更新的数据集，以便在客户端/服务器端对齐所有内容。

这种模式有一些变化，但需要进行一些权衡，但一般情况下，这种变化是可靠的。不过，您应该记住您的个人用例。

Answer 4

如果没有任何代码示例，它有点复杂：

步骤如下：

PHP必须在<input type="text" name="<?php echo $myfield ?>" value="<?php echo $myvalue ?>">标记内打印<td>，而不是直接在其中打印$myvalue;
Ajax和jQuery控制您的类型编辑并将其实时保存在数据库中：

＆＃13;

$("input:text").on('keyup', function(){
  var row = $(this).attr('r');
  var field = $(this).attr('f');
  var value = $(this).val();
  
  $("#testResults").html('Row ' + row + ' - Field ' + field + ' has this value ' + value);
  
  //ajax send
  
  $.ajax({
    type: 'post',
    url: 'myPhpFileToSaveOnDb.php',
    data: {row_id: row, field_name: field, value: value}
  })
})

＆＃13;

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1">
  <tr>
    <th>Field 1</th>
    <th>Field 2</th>
    <th>Field 3</th>

  </tr>
  <tr>
    <td><input type="text" r="1" f="field_1" value="myValue 1"></td>
    <td><input type="text" r="1" f="field_2" value="myValue 2"></td>
    <td><input type="text" r="1" f="field_3" value="myValue 3"></td>

  </tr>
  <tr>
    <td><input type="text" r="2" f="field_1" value="myValue 5"></td>
    <td><input type="text" r="2" f="field_2" value="myValue 6"></td>
    <td><input type="text" r="2" f="field_3" value="myValue 7"></td>

  </tr>
</table>
<br />
<div id="testResults"></div>

＆＃13;

Answer 5

据我所知，您正在寻找表值的内联编辑。如果您使用的是DataTables，可以尝试https://editor.datatables.net/examples/inline-editing/simple.html

或者您可以尝试https://markcell.github.io/jquery-tabledit/#examples

之类的内容

编辑列表而不离开网页

5 个答案: