HTML 输入字段内容不断消失

Question

I am building a webpage to monitor my stocks and mark some comments for each stock. I got the volume and the price of each of the stocks from an api I built and wrote some code to put them into a table. The table has some other fields as well:

Name, Price, Volume, Comments, Target Price

The comments and target prices contain input fields which I can type in some notes for each stock. However, my code builds a new table every 10s to update the stock prices and volume, and after each sort action which is triggered by pressing the corresponding heading I want to sort by. After this, my inputs fields contents will disappear. Is there a way to keep these contents intact after an update or a sorting is triggered?

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

The submit button is to send back the name, target price and comments as a dictionary back to the server, which I'm still figuring out how to do, however, the problem of the field contents disappearing is a much larger problem. Thanks in advance.

Answer 1

I think that your problem is in the UX more than in the code.

Re-building the HTML containing input elements every 10 seconds is a bad idea because:

• You're going to lose focus of the input that you're typing in.
• It's going to be overridden with the new data. (the problem you're facing)
• It's confusing that inputs that you don't change get updated automatically.

To me it makes more sense to have a table with all the data (but no inputs), that can be updated every 10s. And an edit button that when is clicked shows a form with the inputs that won't update while you're typing.