Zeilenwerte einer Tabelle in Formular übertragen

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Fragenfrager

Erfahrenes Mitglied
Hallo liebes Forum,

ich habe eine (aus einer DB generierte) Tabelle. Ich möchte, dass wenn in eine Zeile geklickt wird,
a) die Zeile markiert wird
b) die Werte dieser Zeile in ein Formular übertragen werden.

Teil a funktioniert, doch für b werden die Daten aus der Tabelle 'vorhandener_belag' nicht in das Formular 'edit_belag' übernommen.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<html lang="de">
 <head>
  <meta charset="utf-8" />
  <title>Administration</title>
  <link rel="stylesheet" href="../incs/default.css" type="text/css" />
  <link rel="shortcut icon" href="incs/favicon.ico" type="image/x-icon" />
 
<script type="text/javascript">
var oldRow = null;
var zeile ='';
var test='';

function zeile_markieren( evt )                                                 // markiert die ausgewählte Zeile und gibt die Daten an das Formular edit_belag
{
   
    var selectedRow = ( evt.target || evt.srcElement );                         // gewählte Reihe der Tabelle
    while ( selectedRow.tagName != "TR")                                        // wenn eine Reihe -gekennezichnet durch <tr>- gewählt wurde
        selectedRow = selectedRow.parentNode;
    if ( oldRow )
    {
        oldRow.style.backgroundColor = "";
        if ( oldRow == selectedRow )
            return true;
    };
    selectedRow.style.backgroundColor = "yellow";                               // Zeile einfärben
    oldRow = selectedRow;
    zeile=selectedRow.id;  

    var table = document.getElementById('vorhandener_belag');                         // Alle Elemente aus der Tabelle "'vorhandener_belag'" holen
    var bezeichnung=table.rows[zeile].cells[0].innerHTML;                       // Werte aus der ersten Zelle lesen
    var preis=table.rows[zeile].cells[1].innerHTML;                                // ...
    var hinweis=table.rows[zeile].cells[2].innerHTML;                            // ...
   


    document.edit_belag.bezeichnung.value=bezeichnung;                       // Ausgelesene Daten in das Formular edit_belag schreiben
    document.edit_belag.preis.value=preis;  
    document.edit_belag.hinweise.value=hinweise;  
   

           
}
</script>  
 
 
 </head>
 <body>
  <div class="zentrierte-tabelle">
   <form name='edit_belag' id='edit_belag'>
    <table>
     <tr>
      <td>Bezeichnung</td>
      <td>Preis</td>
      <td>Hinweise</td>
     </tr>
     <tr>
      <td><input type='text' maxlength='15' length='15' name='bezeichnung' value='Bezeichnung' placeholder='Bezeichnung' /></td>
      <td><input type='text' maxlength='6' length='6' name='preis' value='Preis' placeholder='Preis' /></td>      
      <td><input type='text' maxlength='3000' length='100' name='hinweise' value='Hinweise' placeholder='Hinweise' /></td>      
     </tr>
   
    </table>
   </form>
  </div>
  <div class="zentrierte-tabelle">
   <table onclick='zeile_markieren(event)' id='vorhandener_belag'>
    <tr>
     <th colspan='3'>Vorhandene Beläge</th>
    </tr>
    <tr>
     <td>Bezeichnung</td>
     <td>Preis</td>
     <td>Hinweise</td>
    </tr>

    <tr>
     <td>Blauschimmelkäse</td>
     <td>0.25</td>
     <td>Enthält Laktose</td>
    </tr>
    <tr>
     <td>Bärchenwurst</td>
     <td>0.25</td>
     <td>Kann Spuren von Senf enthalten.</td>
    </tr>
    <tr>
     <td>Fleischsalat</td>
     <td>0.25</td>
     <td>Enthält Konservierungsmittel.</td>
    </tr>
    <tr>
     <td>Putensalami</td>
     <td>0.25</td>
     <td>Enthält Sulfate.
Kann Spuren von Senf und Schalenfrüchten enthalten.</td>
    </tr>   </table>
  </div>
 </body>
</html>
 
Da fällt schnell auf, dass Du die Zeilennummer in Zeile 30 aus der ID ermittelst, jedoch diese im HTML nicht zuweist. Statt der ID empfehle ich, besser ein Data-Attribut zu verwenden:
Javascript:
zeile = selectedRow.getAttribute('data-nr');
HTML:
            <tr data-nr="2">
                <td>Blauschimmelkäse</td>
                <td>0.25</td>
                <td>Enthält Laktose</td>
            </tr>
            <tr data-nr="3">
                <td>Bärchenwurst</td>
                <td>0.25</td>
                <td>Kann Spuren von Senf enthalten.</td>
            </tr>
Wenn ich das so ändere, funktioniert das Übertragen in das Formular.
 
PPS: Auf den zweiten Blick bemerke ich, dass man das noch etwas vereinfachen kann: Die selektierte Zeile hast Du ja bereits, von da aus kannst Du direkt auf die Zellen zugreifen:
Code:
            selectedRow.style.backgroundColor = "yellow";                               // Zeile einfärben
            oldRow = selectedRow;
            // zeile = selectedRow.getAttribute('data-nr');

            // var table = document.getElementById('vorhandener_belag');                         // Alle Elemente aus der Tabelle "'vorhandener_belag'" holen
            var bezeichnung = selectedRow.cells[0].innerHTML;                       // Werte aus der ersten Zelle lesen
            var preis = selectedRow.cells[1].innerHTML;                                // ...
            var hinweise = selectedRow.cells[2].innerHTML;                            // ...
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…
Zurück