jQuery：如何获取表格单元格数据并将其附加到输入字段？

Question

I am trying to get each value of table column and append to input field. So far I have this code below and it returns [object Object] on each click of each object from .token class. How do I reference the particular object that is being clicked to append to the input field?

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

Try this, get the targetted element value and append it.

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

For take the text inside element which get clicked, use:

var token = $(this).text()

Where $(this) represent the element clicked and text the text inside the tag.

Answer 3

check snippet below..

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