JQuery - 将多个/变量表值连接成一个字符串

Question

我现在为新手问题道歉！

我有一个包含3列和5行的HTML表。我在4行的列中输入了具有唯一ID的字段，因此我可以捕获用户输入的数据。但是，我需要输入所有输入的值并将它们连接成一个隐藏字段中的一个字符串，以便将其提交到数据库。

字符串需要有一个分隔符（tbc），并且只有一个已输入列的“最新”值。我这样说是因为我有一些工作用Change事件触发，但这只是用分隔符连接输入的每个值 - 例如当我在列中输入'Hello'然后将其写入字符串并将其替换为'Bye'然后当我只想要输入的最后一个值（'Bye'）时，将其写为'Hello，Bye'字符串。我知道这是Change事件的预期行为。

理想情况下，我希望每次在表格中输入值时都会触发此脚本，因为由于我使用的软件的性质，单击按钮时极难执行此操作。

有人可以就此提供任何指导吗？

这是我的表格和隐藏字段：

<table class="table table-striped" data-tablesaw-mode="stack" id="BookChap">
  <thead>
    <tr>
      <th>Chapter Number</th>
      <th>Chapter Title</th>
      <th>Completed?</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1.</td>
      <td><textarea class="form-control" id="1a"></textarea></td>
      <td><input type="text" class="form-control" id="1b" /></td>
    </tr>

    <tr>
      <td>2.</td>
      <td><textarea class="form-control" id="2a"></textarea></td>
      <td><input type="text" class="form-control" id="2b" /></td>
    </tr>

    <tr>
      <td>3.</td>
      <td><textarea class="form-control" id="3a"></textarea></td>
      <td><input type="text" class="form-control" id="3b" /></td>
    </tr>

    <tr>
      <td>4.</td>
      <td><textarea class="form-control" id="4a"></textarea></td>
      <td><input type="text" class="form-control" id="4b" /></td>
    </tr>

  </tbody>
</table>



<input id="result" type="hidden" value="">

Answer 1

你需要遍历每个字段.on（每个字段的“输入”......

但是为什么不在服务器上进行连接？

无论如何，这是一个例子 - 注意我从sv-form-control

改变了一个类

$(function() {
  $(".form-control").on("input",function() {
    var arr = [];
    $(".form-control").each(function() {
      if (this.value) arr.push(this.value);
    });
    if (arr.length>0) $("#result").val(arr.join("|")); // or TBC instead of |
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input id="result" type="text" value="" />
<table class="table table-striped" data-tablesaw-mode="stack" id="BookChap">
  <thead>
    <tr>
      <th>Chapter Number</th>
      <th>Chapter Title</th>
      <th>Completed?</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1.</td>
      <td><textarea class="form-control" id="1a"></textarea></td>
      <td><input type="text" class="form-control" id="1b" /></td>
    </tr>

    <tr>
      <td>2.</td>
      <td><textarea class="form-control" id="2a"></textarea></td>
      <td><input type="text" class="form-control" id="2b" /></td>
    </tr>

    <tr>
      <td>3.</td>
      <td><textarea class="form-control" id="3a"></textarea></td>
      <td><input type="text" class="form-control" id="3b" /></td>
    </tr>

    <tr>
      <td>4.</td>
      <td><textarea class="form-control" id="4a"></textarea></td>
      <td><input type="text" class="form-control" id="4b" /></td>
    </tr>

  </tbody>
</table>

Answer 2

您可以在按钮上使用click事件，而不是更改事件。在按钮上单击循环所有表行并根据需要构造字符串。