How to Get value within button and append to div table-CodePudding

How do I get the value in the button (50 or 49) to append to my div table and the header name as well (Name/Nr.) ?

I need the value in the Input button (50 or 49) to appear in the div table when i click on the "use-address" button and remove it when I Re-click the "use-address" to remove selection:

$(".use-address").click(function() {
  var $item = $(this).closest("tr") // Finds the closest row <tr> 
    .find(".nr") // Gets a descendent with 
    .text(); // Retrieves the text within <td>

  $("#resultas").append($item); // Outputs the answer
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div  Id="resultas">
  <div id="resultas"></div>
</div>
<table id="choose-address-table"  border="1">
  <thead>
    <tr >
      <th>Name/Nr.</th>
      <th>Street</th>
      <th>Town</th>
      <th>Postcode</th>
      <th>Country</th>
      <th>Options</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="button"  value="50"></td>
      <td>Some Street 1</td>
      <td>Leeds</td>
      <td>L0 0XX</td>
      <td>United Kingdom</td>
      <td>
        <button type="button"  />
      </td>
    </tr>
    <tr>
      <td><input type="button"  value="49"></td>
      <td>Some Street 2</td>
      <td>Lancaster</td>
      <td>L0 0XX</td>
      <td>United Kingdom</td>
      <td>
        <button type="button"  />
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

You need to use val(), not text(), to retrieve the value from the related button. In addition you should use text() to set the content of #resultas so that only the last vaule which was clicked is dislpayed.

$(".use-address").click(function() {
  var item = $(this).closest("tr").find(".nr").val();
  $("#resultas").text((i, t) => t === item ? '' : item);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div  Id="resultas">
  <div id="resultas"></div>
</div>
<table id="choose-address-table"  border="1">
  <thead>
    <tr >
      <th>Name/Nr.</th>
      <th>Street</th>
      <th>Town</th>
      <th>Postcode</th>
      <th>Country</th>
      <th>Options</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="button"  value="50"></td>
      <td>Some Street 1</td>
      <td>Leeds</td>
      <td>L0 0XX</td>
      <td>United Kingdom</td>
      <td>
        <button type="button"  />
      </td>
    </tr>
    <tr>
      <td><input type="button"  value="49"></td>
      <td>Some Street 2</td>
      <td>Lancaster</td>
      <td>L0 0XX</td>
      <td>United Kingdom</td>
      <td>
        <button type="button"  />
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

you are almost there

replace

.text(); with .val()

And replace below if you dont want multiple results on click

$("#resultas").append($item); with $("#resultas").text(item);