JQuery - 將多個/變量表值連接成一個字符串

Question

現在我要爲新手問題道歉！

我有一個3列5行的HTML表格。我有輸入字段，具有唯一的ID，跨4行，因此我可以捕獲用戶輸入的數據。但是，我需要將所有輸入的值連接成一個隱藏字段中的一個字符串，以便將其提交到數據庫。

該字符串需要有一個分隔符（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

你需要循環的每個字段。對（「輸入」 ......每個字段的

但是爲什麼不這樣做服務器上的級聯

不管怎麼說，這是一個例子 - 注意我改變了一個類從SV-形式控制

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

相反變化的事件，你可以用點擊按鈕的事件。在按鈕上單擊可循環所有表格行並根據您的需要構建字符串。 ？