javascript - jQuery:如何获取表格单元格数据并将其 append 到输入字段？

Question

我正在尝试获取表列的每个值并 append 到输入字段。到目前为止，我在下面有这段代码，每次单击 .token 类中的每个对象时，它都会返回 [object Object] 。如何引用被单击以 append 到输入字段的特定对象？

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

试试这个，获取目标元素值并 append 它。

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