编辑列表而不离开网页

Sorry, I didn't really know how to name the question. Because I don't really know where to start searching.

My question is as follows. I'm loading a list of Strings from a database and showing it in a table in a webpage. How would I go about editing those strings while staying on the page? For example by clicking an entry so an inputfield would appear.

Any pointers or references to other questions would help.

AJAX is the solution
AJAX = Asynchronous JavaScript And XML.

How AJAX Works:

example :
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

Hope this would help :)

HTML Code

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

JQuery Code

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

});

I feel the question is a bit vague so here's what I would do in general.

The pattern you're following should be something like:

Click on table cell -> Triggers a click event

This replaces the string in that cell with an <input> etc.

You fill the input and once you press enter or click away from that input cell (should also trigger a click/keyup event etc.), the entered value should be stored in the variable that stores your table input in the first place. (so the new string replaces the first string value that's been entered)

When user submits the data, a put request is sent to the server with the updated set of data so that everything is aligned on client/server side.

There are some variations to this pattern with some trade-offs but above is solid in general. You should keep in mind your individual use case in mind though.

As I understand you are looking for the inline editing for your tables values. If you are using DataTables you can try https://editor.datatables.net/examples/inline-editing/simple.html

Or you can try something like https://markcell.github.io/jquery-tabledit/#examples

It's a little bit complicated without any code example:

The steps are:

PHP must prints a <input type="text" name="<?php echo $myfield ?>" value="<?php echo $myvalue ?>"> inside the <td> tag, istead of print the $myvalue directly inside it;
Ajax and jQuery controls your type editing and save it on a database, in real time:

$("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}
  })
})

table {
    border-collapse: collapse;
}

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

<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>

</div>