1
votes

jQuery: comment obtenir les données des cellules du tableau et les ajouter au champ de saisie?

J'essaie d'obtenir chaque valeur de la colonne de table et de l'ajouter au champ de saisie. Jusqu'à présent, j'ai ce code ci-dessous et il renvoie [object Object] à chaque clic de chaque objet de la classe .token . Comment référencer l'objet particulier sur lequel l'utilisateur clique pour l'ajouter au champ de saisie?

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

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

javascript jquery html append

0 commentaires

3 Réponses :

0
votes

Pour prendre le texte à l'intérieur de l'élément sur lequel on clique, utilisez:

var token = $(this).text()

Où $ (this) représente l'élément sur lequel vous avez cliqué et texte le texte à l'intérieur de la balise.

p >

0 commentaires

3
votes

Essayez ceci, obtenez la valeur de l'élément ciblé et ajoutez-la.

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

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

2 commentaires

Travaux! Merci beaucoup!!

:) avec plaisir :)

0
votes

vérifier l'extrait ci-dessous ..

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

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

0 commentaires