时间戳

首页 > 解决方案 > HTML输入字段内容不断消失

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>

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

标签： javascripthtmljquery

解决方案

我认为您的问题出在用户体验中，而不是在代码中。

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

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

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

推荐阅读