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

}