js - Anzeige DIV aus Zeilen in einer Tabelle durch Klicken auf Symbol

Ich habe keine echte Programmierkenntnisse in js. Was ich versuche zu tun, ist in einer Tabelle, die ein verstecktes CVtxt-Feld hat, um diese Informationen in einem DOM außerhalb der Tabelle anzuzeigen, wenn Sie auf eine Aktionsschaltfläche klicken.js - Anzeige DIV aus Zeilen in einer Tabelle durch Klicken auf Symbol

Die Art, wie ich die Tabelle strukturiert habe, ist kein Muss, wenn es eine bessere Möglichkeit gibt, die CVtxt-Informationen in einen Dom zu bekommen, das kann ich auch. Wenn es eine bessere Möglichkeit gibt, den CVtext einer Variablen für js zuzuweisen, die auch funktionieren kann.

Diese Seite ist in PHP geschrieben.

<div class="row"> 
    <div class="col-md-6"> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="RelatedTab"> 
       <table id="related" class="table table-striped table-bordered dt-responsive hover nowrap compact" cellspacing="0" width="100%"> 
        <thead> 
         <tr> 
          <th> 
           <span class="custom-checkbox"> 
            <input type="checkbox" id="selectAll"> 
            <label for="selectAll"></label> 
           </span> 
          </th> 
          <th>Name</th> 
          <th>Job</th> 
          <th>Company</th> 
          <th>Tel</th> 
          <th>CV-hidden</th> 
          <th>Actions</th> 
         </tr> 
        </thead> 
        <tbody> 
        '; 
     foreach($objApi['Data'] as $row) 
    { 
      echo '<tr><td> 
           <span class="custom-checkbox"> 
            <input type="checkbox" id="checkbox1" name="options[]" value="1"> 
            <label for="checkbox1"></label> 
           </span> 
          </td> 
         <td><a href="Thinq.php?i=' . $row['AppDataId'] . '">' . $row['FirstName'] . ' ' . $row['LastName'] . '</a></td><td> ' . $row['JobTitle'] . '</td><td> ' . $row['CompanyName'] . '</td><td> ' . $row['Telephone'] . '</td><td>' . $row['CvTxtField'] . '</td><td><a href="#viewCV" class="edit"><i class="fa fa-eye" data-toggle="tooltip" title="View"></i></a></td></tr>'; 
    }    
echo ' 
        </tbody> 
       </table> 
     </div> 
     <col id="#CvText" class="col-md-6"></div> 
     <div> 
     '; 
?>

Quelle

2017-09-07 Natie R

Hier ist eine einfache HTML-JS Beispiel für Sie/show Code zu verstecken, ich hoffe, es

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#myDIV { 
    width: 100%; 
    padding: 50px 0; 
    text-align: center; 
    background-color: lightblue; 
    margin-top:20px; 
} 
</style> 
</head> 
<body> 
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p> 
<button onclick="myFunction()">Try it</button> 
<div id="myDIV"> 
This is my DIV element. 
</div> 
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p> 
<script> 
function myFunction() { 
    var x = document.getElementById('myDIV'); 
    if (x.style.display === 'none') { 
     x.style.display = 'block'; 
    } else { 
     x.style.display = 'none'; 
    } 
} 
</script> 
</body> 
</html>

Quelle

2017-09-07 12:03:17 melic

Hallo melic, vielen Dank für das hilft, aber Ihr Beispiel ist ein DIV zu verstecken, was ich habe ist eine Tabelle mit mehreren Zeilen und ich möchte Daten anzeigen, die sich auf eine Zeile in einem Div außerhalb der Tabelle beziehen, abhängig davon, welche Zeile Sie auswählen. –

oh ok, wenn Sie auf eine Zeile klicken oder wenn Sie auf dem Mausklick die entsprechenden Daten anzeigen möchten? – melic

Wenn ja, gibt es zwei Möglichkeiten, dies zu tun; Holen Sie sich alle Daten per PHP und erstellen Sie die Tabellen, aber halten Sie sie versteckt und verwenden Sie meinen einfachen Code oben, um sie zu zeigen oder die zweite Methode AJAX verwenden, um Daten zu erhalten über php bei der Verwendung derselben Beispiel oben – melic

js - Anzeige DIV aus Zeilen in einer Tabelle durch Klicken auf Symbol

Antwort

Verwandte Themen