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

Question

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>

What specifically are you asking? What isn't working as expected? — David
– David, Commented Jun 11, 2020 at 19:12
i need this <div class="zoom"> show and hide when mousover td — mohamed moustafa
– mohamed moustafa, Commented Jun 11, 2020 at 19:16

ℛɑƒæĿᴿᴹᴿ · Accepted Answer · 2020-06-12 00:19:36Z

2

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>

edited Jun 12, 2020 at 0:19

ℛɑƒæĿᴿᴹᴿ

5,4765 gold badges42 silver badges61 bronze badges

answered Jun 11, 2020 at 19:18

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mohamed moustafa Over a year ago

Excellent, excellent. Thank you for understanding what I mean. Thank you David

ltdev · Accepted Answer · 2020-06-11 19:16:49Z

1

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");
}

answered Jun 11, 2020 at 19:16

ltdev

4,54720 gold badges77 silver badges134 bronze badges

1 Comment

mohamed moustafa Over a year ago

this code only show and i hide only one item in table td and want to be all and Separate

Nate G · Accepted Answer · 2020-06-28 13:14:41Z

0

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.

edited Jun 28, 2020 at 13:14

answered Jun 11, 2020 at 19:38

Nate G

1425 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related