concatenate values in input with jquery

Question

concatenate values in input with jquery

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

I have an html table which when clicked in a row gets me a value that I want to recover, How can I concatenate values in an input every time I get a value?

$("table tbody tr").click(function() {
  var total = $(this).find("td:last-child").text();
  alert(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>header 1</th>
      <th>header 2</th>
      <th>header 3</th>
      <th>total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>celda 1</td>
      <td>celda 2</td>
      <td>celda 3</td>
      <td>3.000</td>
    </tr>
    <tr>
      <td>celda 1</td>
      <td>celda 2</td>
      <td>celda 3</td>
      <td>2.000</td>
    </tr>
  </tbody>
</table>

jquery html5 html

asked by Ivxn 13.03.2018 в 20:49

source

2 answers

0

You get the content of the input then you concatenate it with the text obtained and you assign it to the input

$("table tbody tr").click(function() {
  var total = $(this).find("td:last-child").text();
  var $Input = $('#ConcatInput');
  $Input.val($Input.val()+total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>header 1</th>
      <th>header 2</th>
      <th>header 3</th>
      <th>total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>celda 1</td>
      <td>celda 2</td>
      <td>celda 3</td>
      <td>3.000</td>
    </tr>
    <tr>
      <td>celda 1</td>
      <td>celda 2</td>
      <td>celda 3</td>
      <td>2.000</td>
    </tr>
  </tbody>
</table>
<input id="ConcatInput" />

answered by 13.03.2018 в 21:08

How to pass a javascript variable to a php variable? Read a value between two labels in a string

score 3 · Accepted Answer

Really just need to add the code to read and concatenate the input:

$("table tbody tr").click(function() {
  var textoInput = $("#final").val(); //obtenemos el valor actual
  var total = $(this).find("td:last-child").text();
  var nuevoTexto = textoInput + total; //concatenamos
  $("#final").val(nuevoTexto); //aplicamos el nuevo valor al input
  //alert(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>header 1</th>
      <th>header 2</th>
      <th>header 3</th>
      <th>total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>celda 1</td>
      <td>celda 2</td>
      <td>celda 3</td>
      <td>3.000</td>
    </tr>
    <tr>
      <td>celda 1</td>
      <td>celda 2</td>
      <td>celda 3</td>
      <td>2.000</td>
    </tr>
  </tbody>
</table>
<input type="text" id="final" value="">

In this way the text will be concatenated, is that what you were looking for?