Insert data from Table into a textarea using Jquery

December 25, 2023

Basically I want the the user that when on click the button1, the data from table should be inserted into the textarea, i already started with the fallowing code.

function myFunction() {
  var x = document.getElementById("krtable").defaultValue;
  document.getElementById("input_14_182").innerHTML = x;
}

function myFunction2() { 
  document.getElementById("demo").innerHTML = "testing only";
}

<button type="button1" onclick="myFunction()">Insert table to textbox</button>


<table id="krtable">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>     
  </thead>
  <body>
    <tr>
      <td>23:48</td>
      <td>1LARIOS</td>
      <td>260 DRIFWOOD</td>
      <td>NO </td>
    </tr>
    <tr>
      <td>22:32</td>
      <td>WALKER</td>
      <td>1DRIFTWOOD</td>
      <td>NO</td>
    </tr>
    <tr>
      <td>22:30</td>
      <td>WALKER</td>
      <td>1 DRIFTWOOD</td>
      <td>NO </td>
   </tr>
   <tr>
     <td>22:09</td>
     <td>WALKER</td>
     <td>3 DRIFTWOOD</td>
     <td>NO</td>
  </tr>
 </tbody>
</table>

<textarea id="input_182" id="textarea" class="textarea small"  rows="10" cols="50"></textarea>

i will appreciate any help and thank you very much in advance and merry christmas to all.

>Solution :

Updated Working codepen

function myFunction() {
  var tableContent = '';
    // $('#krtable tbody tr').each(function() { 
      // $(this).find('td').each(function() {
        // tableContent += $(this).text() + '\t';
      // });
      // tableContent += '\n';
    // });
    // $('#input_182').val(tableContent.trim());

    // For adding table headers.
    $('#krtable thead th').each(function() {
      tableContent += $(this).text() + '\t';
    });

    tableContent += '\n';
  
   $('#krtable tbody tr').each(function() {
     $(this).find('td').each(function() {
       tableContent += $(this).text() + '\t';
     });
     tableContent += '\n';
   });

   $('#input_182').val(tableContent.trim());
  }

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<button type="button" onclick="myFunction()">Insert table to textbox</button>

<table id="krtable">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
    </tr>     
  </thead>
  <tbody>
    <tr>
      <td>23:48</td>
      <td>1LARIOS</td>
    </tr>
    <tr>
      <td>22:32</td>
      <td>WALKER</td>
    </tr>
 </tbody>
</table>

<textarea id="input_182" class="textarea small" rows="10" cols="50"></textarea>