javascript - 检测 HTML 输入表的更改输入值

Question

我试图找出如何检测以下预填充输入表中更改的值。我从我的 MongoDB 获取数据并使用 Express-Handlebars 和 nodejs 将数据填充到 HTML。

<form action="/someaction" method="post">
    <table class="responsive-table-input-matrix">
     <thead>
      <tr>
         <th>name</th>
         <th>some setting</th>
         <th>some setting</th>
         <th>some setting</th>
         <th>some setting</th>
      </tr>
    </thead>
     {{# each values }}
        <tbody>
            <tr>
                <td> {{ this.name}} </td>
                <td><input type="string" style="position: relative;" name="some setting" value={{this.some setting}} autofocus></td>
                <td><input type="string" style="position: relative;" name="some setting" value={{ this.some setting}}></td>
                <td><input type="text" style="position: relative;" value="some setting" value={{ this.some setting}}></td>
                <td><input type="text" style="position: relative;" value="some setting" value={{ this.some setting}}></td>
                <input type="hidden" name="someid" value={{ this.some id}}>
            </tr>
        </tbody>
    {{/each}}
   </table>
          <button type="submit" class="btn btn-success">Submit</button>
</form>

当我单击“提交”按钮时，服务器将收到一个包含所有配置的对象。然后我想写回 MongoDB。但我不想将未更改的值写回它。我可以遍历对象，但由于行基本上是无限的，这可能会导致服务器性能问题。

我想知道是否有办法检测该特定行中的值是否已更改，并以某种方式在我的服务器接收到的对象中对其进行标记。这将允许我在整个对象上迭代一次，并且只写那些改变的配置。

我看到在 HTML 或 JS 中有某种 onChanged 东西可以做到这一点。但我只看到它被用于直接更改，我只希望在按下按钮时应用更改。

如果可能的话，我想避免使用 Javascript!

我希望我能以某种方式表达我想要实现的目标。提前致谢!

Answer 1

您可以用 data- 标记每一行属性并使用它来检查它是否发生变化。

例如在给定的行中:

<tr id="tr1" data-foo-bar="original">
   <td><input type="text" onchange="change();"></td>
</tr> 

当此行中的值发生更改时，您会触发此函数:

function change(){
    document.getElementById("tr1").dataset.fooBar = "modified";
}

然后你可以访问这个属性:

if (document.getElementById("tr1").dataset.fooBar == "original"){
    // hasn't been changed

}
else
{
    // it has changed

}