js - アイコンをクリックしてテーブルの行からDIVを表示

jsには実際のコーディングスキルはありません。私がやろうとしているのは、アクションボタンをクリックしたときに表の外にあるDOMにその情報を表示するCVtxtフィールドが隠されているテーブルです。js - アイコンをクリックしてテーブルの行からDIVを表示

私がテーブルを構造化した方法は、DomにCVtxt情報を得るためのよりよい方法があれば、それを行うこともできません。 CVtextをjsの変数に代入するより良い方法があれば、これも機能します。

このページはPHPで書かれています。ここで

<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> 
     '; 
?>

出典

2017-09-07 Natie R

あなたは/ショーのコードを非表示にするための基本的なHTMLのJSの一例ですが、私はそれが

<!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>

出典

2017-09-07 12:03:17 melic

こんにちはmelic、このためのおかげではなく、あなたの例では、私が持っているもの、DIVを非表示にすることで役に立てば幸い複数の行を持つテーブルで、選択した行に応じて、テーブルの外にあるDivにある行に関連するデータを表示したいとします。 –

ああ、行をクリックするか、onmouseoverのときに関連データを表示したいのですか？ – melic

もしそうなら2つの方法があります。 phpですべてのデータを取得してテーブルを作成しますが、それらを隠しておいてください。上記の私の簡単なコードを使用してください。または2番目の方法はAJAXを使用してPHPでデータを取得します。 – melic

js - アイコンをクリックしてテーブルの行からDIVを表示

答えて

関連する問題