jQuery: как получить данные ячейки таблицы и добавить их в поле ввода?

Question

Я пытаюсь получить каждое значение столбца таблицы и добавить в поле ввода. Пока у меня есть этот код ниже, и он возвращает [object Object] при каждом щелчке каждого объекта из .token класса. Как мне сослаться на конкретный объект, по которому щелкают, чтобы добавить в поле ввода?

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

проверьте фрагмент ниже ..

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

Answer 3

Чтобы взять текст внутри элемента, по которому щелкают, используйте:

var token = $(this).text()

Где $ (this) представляет элемент, по которому щелкнули, и текст в теге.