jQuery：如何獲取表格單元格數據並將其附加到輸入字段？

Question

我試圖獲取表列的每個值並附加到輸入字段。 到目前為止，我在下面有這個代碼，並且每次點擊來自.token類的每個對象都會返回[object Object] 。 如何引用要單擊的特定對象以附加到輸入字段？

 $(function () { $('.token').on('click', function () { var url = $('#url'); var tkn = $('.token'); url.val(url.val() + tkn); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group"> <div class="col-sm-10"> <input type="url" class="form-control" name="e_postback_url" size="60" placeholder="URL" value="URL" id="url" maxlength="1024"> </div> </div> <table class="table table-bordered table-hover tc-table"> <thead> <tr> <th class="token">Token</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td class="token" id="token1">[commission_id]</td> <td class="typedesc">Numeric-16</td> <td class="typedesc">Unique order ID of the commission</td> </tr> <tr> <td class="token" id="token2">[offer_id]</td> <td class="typedesc">Numeric-10</td> <td class="typedesc">Unique offer ID</td> </tr> <tr> <td class="token" id="token3">[payout]</td> <td class="typedesc">Decimal-20,2</td> <td class="typedesc">Amount of the commission in EUR</td> </tr> </tbody> </table> 

Answer 1

試試這個，獲取目標元素值並附加它。

 $(function () { $('.token').on('click', function (event) { var url = $('#url'); var tkn = event.target url.val(url.val() + tkn.textContent); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group"> <div class="col-sm-10"> <input type="url" class="form-control" name="e_postback_url" size="60" placeholder="URL" value="URL" id="url" maxlength="1024"> </div> </div> <table class="table table-bordered table-hover tc-table"> <thead> <tr> <th class="token">Token</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td class="token" id="token1">[commission_id]</td> <td class="typedesc">Numeric-16</td> <td class="typedesc">Unique order ID of the commission</td> </tr> <tr> <td class="token" id="token2">[offer_id]</td> <td class="typedesc">Numeric-10</td> <td class="typedesc">Unique offer ID</td> </tr> <tr> <td class="token" id="token3">[payout]</td> <td class="typedesc">Decimal-20,2</td> <td class="typedesc">Amount of the commission in EUR</td> </tr> </tbody> </table> 

Answer 2

要獲取單擊的元素內的文本，請使用：

var token = $(this).text()

其中$（this）表示單擊的元素並在標記內部顯示文本。

Answer 3

檢查下面的代碼段..

 /*$(function () { $('.token').on('click', function () { var url = $('#url'); var tkn = $('.token'); url.val(url.val() + tkn); }); });*/ var urlVal = $('#url').val(); $('.token').click(function(){ urlVal = urlVal + $(this).text(); $('#url').val(urlVal); console.log(urlVal); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group"> <div class="col-sm-10"> <input type="url" class="form-control" name="e_postback_url" size="60" placeholder="URL" value="URL" id="url" maxlength="1024"> </div> </div> <table class="table table-bordered table-hover tc-table"> <thead> <tr> <th class="token">Token</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td class="token" id="token1">[commission_id]</td> <td class="typedesc">Numeric-16</td> <td class="typedesc">Unique order ID of the commission</td> </tr> <tr> <td class="token" id="token2">[offer_id]</td> <td class="typedesc">Numeric-10</td> <td class="typedesc">Unique offer ID</td> </tr> <tr> <td class="token" id="token3">[payout]</td> <td class="typedesc">Decimal-20,2</td> <td class="typedesc">Amount of the commission in EUR</td> </tr> </tbody> </table>