Javascript HTML输入字段内容不断消失

我正在建立一个网页来监控我的股票，并为每只股票标记一些评论。 我从我构建的api中获得了每种股票的数量和价格，并编写了一些代码将它们放入表中。 该表还有一些其他字段：

名称、价格、数量、评论、目标价格

注释和目标价格包含输入字段，我可以为每只股票键入一些注释。 但是，我的代码每隔10秒构建一个新表，以更新股票价格和成交量，并在每次排序操作后，通过按我要排序的相应标题触发排序操作。在此之后，我的输入字段内容将消失。是否有办法在触发更新或排序后保持这些内容的完整性

<script
              src="https://code.jquery.com/jquery-3.6.0.min.js"
              integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
              crossorigin="anonymous"></script>

<table class="table table-striped" style="float: left; width: 60%">
    <tr  class="bg-primary">
        <th data-column="name" data-order="dsc">Name &#9650</th>
        <th data-column="price" data-order="dsc">price &#9650</th>
        <th data-column="volume" data-order="dsc">Volume &#9650</th>
        <th data-column="targetPrice" data-order="dsc">Target Price &#9650</th>
        <th data-column="comments" data-order="dsc">Comments &#9650</th>
        <th data-column="submit" data-order="dsc">Send &#9650</th>
    </tr>

    <tbody id="myTable">
        
    </tbody>
</table>

<script>

var myArray = []
var sortOrder = 'name'
var sortColumn = 'dsc'

setInterval(function() {
    $.ajax({
      method:'GET',
      url:'http://127.0.0.1:5000',
      success:function(response){
        myArray = response.data
        if(sortOrder == 'dsc'){
            myArray = myArray.sort((a,b) => a[sortColumn] > b[sortColumn] ? 1 : -1)

        }else{
            myArray = myArray.sort((a,b) => a[sortColumn] < b[sortColumn] ? 1 : -1)
        }
        buildTable(searchTable(myArray))
      }
    })
}, 10000)

function buildTable(data){
    var table = document.getElementById('myTable')

    table.innerHTML = "" 
    for (var i = 0; i < data.length; i++){
      var row = `<tr>
              <td>${data[i].name}</td>
              <td>${data[i].price}</td>
              <td>${data[i].volume}</td>
              <td><input type="number" name="${data[i].symbol}_targetPrice" style='width:60px;'></td>
              <td><input type="number" name="${data[i].symbol}_comments" style='width:60px;'></td>
              <td><input type="submit"></td>
            </tr>`
      table.innerHTML += row

    }
  }

</script>

姓名▲
价格▲
第9650卷
目标价格▲
评论和#9650
发送▲
var myArray=[]
var sortOrder='name'
var sortColumn='dsc'
setInterval（函数（）{
$.ajax({
方法：'GET'，
网址：'http://127.0.0.1:5000',
成功：功能（响应）{
myArray=response.data
如果（排序器=='dsc'）{
myArray=myArray.sort（（a，b）=>a[sortColumn]>b[sortColumn]？1:-1）
}否则{
myArray=myArray.sort（（a，b）=>a[sortColumn]

---

submit按钮是将名称、目标价格和评论作为字典发送回服务器，我仍在研究如何做，但是，字段内容消失的问题是一个更大的问题。提前感谢。

我认为您的问题更多地在于用户体验而不是代码

每10秒重新构建包含输入元素的HTML是个坏主意，因为：

• 您将失去输入的焦点
• 它将被新数据覆盖。（你面临的问题）
• 让人困惑的是，您不更改的输入会自动更新

---

对我来说，有一个包含所有数据（但没有输入）的表更有意义，它可以每10秒更新一次。单击该按钮时，会显示一个表单，其中的输入在您键入时不会更新。

如果注释只需要在会话中保留，则不必重建整个表：只需使用新数据更新内容即可。如果您的评论需要在会话之间保留，请查看使用