CODEWITHSUNDEEP
javascripthtmlcss
mohamed moustafa
mohamed moustafa

Reputation: 47

Show and hide content by JavaScript from PHP script in html table

I have a HTML table and want to show and hide class for multiple div separate only with javascript. This table will be generated from PHP script there will like 1000 tag.

I hope a smart javascript function can do this job:

function showiteam() {
  document.querySelector(".zoom").style.display = "block";
}

function hideiteam(x) {
  document.querySelector(".zoom").style.display = "none";
}
#customers td,
#customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

.zoom {
  display: none;
}
<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  
  <tr>
    <td onmouseover="showiteam()" onmouseout="hideiteam()">
      Google
      <div class="zoom">This Testing text</div>
    </td>
    <td>Yahoo</td>
    <td>Facebook</td>
  </tr>

  <tr>
    <td onmouseover="showiteam()" onmouseout="hideiteam()">
      Google
      <div class="zoom">This Testing text</div>
    </td>
    <td>Yahoo</td>
    <td>Facebook</td>
  </tr>
</table>

Upvotes: 0

Views: 392

Answers (3)

Nate G
Nate G

Reputation: 132

First, I'll say that a CSS solution would be easier, so I'll include that below.

But, since you specified Javascript in your question, I'll answer your question directly. The problem is that your querySelector is on the whole document, not on the event.target. So pure javascript fix is:

event.target.querySelector(".zoom").style.display = "block";

However, I really think the better solution would be to remove your javascript altogether, put the zoom class on the td and add this CSS definition:

.zoom:hover div {display:block}

That's a lot tidier, if you can do it.

Upvotes: 0

David
David

Reputation: 218837

The call to querySelector returns only the first matched element. You can use querySelectorAll to match multiple elements. However, you probably don't want to show/hide all of the .zoom elements when hovering over any one table cell.

Instead, pass a reference to the table cell that's invoking the mouseover and mouseout events in the HTML, and call querySelector on that element so you're only matching the .zoom element contained within that cell:

function showiteam(cell) {
  cell.querySelector(".zoom").style.display = "block";
}

function hideiteam(cell) {
  cell.querySelector(".zoom").style.display = "none";
}
#customers td,
#customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

.zoom {
  display: none;
}
<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td onmouseover="showiteam(this)" onmouseout="hideiteam(this)">
      Google
      <div class="zoom">This Testing text</div>
    </td>
    <td>Yahoo</td>
    <td>Facebook</td>
  </tr>
  <tr>
    <td onmouseover="showiteam(this)" onmouseout="hideiteam(this)">
      Google
      <div class="zoom">This Testing text</div>
    </td>
    <td>Yahoo</td>
    <td>Facebook</td>
  </tr>
</table>

Upvotes: 2

ltdev
ltdev

Reputation: 4457

Not sure if I understand correct what you 're asking, but this is what I would do

// in html
<td  onmouseover="showiteam()" onmouseout="hideiteam()"> 
     Google
     <div class="zoom is-hidden">This Testing text</div>
</td>

// in css (just replace .zoom with .is-hidden)
.is-hidden {
    display: none;
}

// in js
function showiteam(){
   document.querySelector(".zoom").classList.remove("is-hidden");
}

function hideiteam(x){
    document.querySelector(".zoom").classList.add("is-hidden");
}

Upvotes: 1

Related Questions