Copy a line with button of a html table with the data from the database

I have the following problem. I have a table where the respective entries are output via the database. Now I want to insert a button in this table where I can copy the respective line with a click. I already have a code that only works with the html heading but unfortunately not with the entries. I would be very grateful for any help or tips.

    // Ausgabe �ber eine Foreach-Schleife.
echo '<table id="tabelle" border="1" cellspacing="0" cellpadding="2" style="table-layout:fixed;">';
//echo '<tr><th style="width: 5%">Übertragen</th>'; 
echo '<tr><th style="width: 15%">Übertragen</th>';      
echo '<th style="width: 12%">Datum</th>';
echo '<th style="width: 8%">Uhrzeit</th>';
echo '<th style="width: 50%">Von</th>';
echo '<th style="width: 50%">Nach</th>';
echo '<th style="width: 7%">Pa.</th>';
echo '<th style="width: 8%">Preis</th>';
echo '<th style="width: 7%">BZ</th>';
echo '<th style="width: 25%">Kunde</th>';
echo '<th style="width: 18%">Telefonnr.</th>';
echo '<th style="width: 20%">Fahrer</th>';
echo '<th style="width: 20%">Unternehmer</th>';
echo '<th style="width: 10%">Prov.</th>';
echo '<th style="width: 50%">Nachricht</th>';
echo '<th style="width: 12%">Datum</th></tr>';
echo '</table>';
foreach ($nachrichten as $nachricht){
 echo '<table id="tabelle" border="1" cellspacing="0" cellpadding="2" style="table-layout:fixed;">';
 echo '<tr>';
    
echo '<td style="width: 15%;"><div style="width: 100%; height: 100%; overflow : auto;"><button id="copy_btn" onclick="selectElementContents( document.getElementById(`tabelle`) );">Kopieren</button></td>';   
    
      
   sscanf($nachricht->datu, "%4s-%2s-%2s", $j, $m, $t);
  echo '<td style="width: 12%"><div style="width: 100%; height: 100%; overflow : auto;">'. $t . '.' . $m . '.' . $j .'</td>';
 echo '<td style="width: 8%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->uhrzeit .'</td>';
 echo '<td style="width: 50%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->von .'</td>';
 echo '<td style="width: 50%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->nach .'</td>';
 echo '<td style="width: 7%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->personenanzahl .'</td>';
 echo '<td style="width: 8%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->preis .'</td>';
 echo '<td style="width: 7%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->bezahlart .'</td>';
 echo '<td style="width: 25%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->kunde .'</td>';
 echo '<td style="width: 18%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->telefonnummer .'</td>';
 echo '<td style="width: 20%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->fahrer .'</td>';
 echo '<td style="width: 20%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->unternehmer .'</td>';
 echo '<td style="width: 10%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->provision .'</td>';
 echo '<td style="width: 50%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->nachricht .'</td></div>';
 sscanf($nachricht->datum, "%4s-%2s-%2s", $jahr, $monat, $tag);
  echo '<td style="width: 12%"><div style="width: 100%; height: 100%; overflow : auto;">'. $tag . '.' . $monat . '.' . $jahr .'</td>';
 echo '</tr>';
 echo '</table>';
}
?>

HTML Table Picture

Answer

In the column where you want the copy button just add a button :

<td…><button type=“button”
       onclick=“myCopyProc(“.$stringToBeCopied.”)”</td>

Then add JavaScript code in the page header for the myCopyProc() function

<html>
    <head>
        …
        <script type="text/javascript">
    function myCopyProc(someString) {
var copyText = someString;
copyText.select();
document.execCommand("copy");
}
</script>
        …
    </head>

This JavaScript code could also be put in a file in the server . In this case, you include code like this:

<script type=“text/javascript” src=“relative path to JavaScript file”/>

Other JavaScript code :

function myCopyProc( str) {
      const el = document.createElement('textarea');
     el.value = str;
     el.setAttribute('readonly', '');
     el.style.position = 'absolute';
     el.style.left = '-9999px';
     document.body.appendChild(el);
     el.select();
     document.execCommand('copy');
     document.body.removeChild(el);
};

To test if you enter the code you can add a line like :

alert(str);

Advertisement

Answer