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。但是我不想把未更改的值写回来。我可以迭代对象，但由于行基本上是无限的，可能导致服务器性能问题。

我想知道是否存在检测该特定行中的值是否已更改并在我的服务器收到的对象中以某种方式标记它的情况。这样我就可以在整个Object上迭代一次，只编写那些已经改变的Configs。

我看到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

}

检测已更改的输入HTML输入表的值

1 个答案: