Showing unique child DIV when clicking a TD - jQuery/Javascript

Question

I have a table which is structured like a calendar, 1 table row with 31 table cells.

I am trying to show the child div of the TD clicked on so that its unique to that day.

At the moment if i click on the second TD it shows cell 1's div content, I need it to show its own child div content.

I have the popup working but I just need a hand figuring out how to show the unique day div content.

// When the user clicks on <div>, open the popup unique to that cell 
function openPopup() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

<table>
  <thead>

  </thead>
  <tbody>
    <tr>
      <td onclick="openPopup()">
        <p class="day-number-red">1 </p>
        <p class="sports-on-day">
          Cricket <br> Tennis <br> Darts </p>

        <div class="popup">
          <span class="popuptext" id="myPopup">Example 1</span>
        </div>



      </td>


      <td onclick="openPopup()">
        <p class="day-number-red">2 </p>
        <p class="sports-on-day">- </p>

        <div class="popup">
          <span class="popuptext" id="myPopup">Example 2</span>
        </div>
      </td>
    </tr>
  </tbody>

</table>

Identifiers in HTML __must__ be __Unique__, You can't use `myPopup` id at multiple locations — Satpal, May 25 '18 at 09:33
instead of writing `openPopup()` to each `td` `onclick` event, declare a single function and bind it to the `td` of your table via javascript. — vikscool, May 25 '18 at 09:36

jupeter · Accepted Answer · 2018-05-30T07:35:03.173

use jquery access <td>

// remove id of popup #1
$('table tbody tr td').on('click', function(e){
  // your code 
  //...
    var titles = $(this).find(".sports-on-day").html();
    var desc = $(this).find(".popup").html();
    
    var md = $('#td-detail');
    
    $('.modal-title').html(titles);
    $('.modal-body').html(desc);
    md.modal('show');
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<table class="table">
  <thead>
    <th>title 1</th>
    <th>title 2</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <p class="day-number-red">1 </p>
        <p class="sports-on-day">
          Cricket <br> Tennis <br> Darts
        </p>
        <div class="popup">
          <span class="popuptext">Example 1</span>
        </div>
      </td>
      <td>
        <p class="day-number-red">2 </p>
        <p class="sports-on-day">- </p>
        <div class="popup">
          <span class="popuptext">Example 2</span>
        </div>
      </td>
    </tr>
  </tbody>

</table>


<!-- Modal [bootstrap] -->
<div class="modal fade" id="td-detail" tabindex="-1" role="dialog" aria-labelledby="td-title-md" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="td-title-md"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

This seems to be working best by showing me the contents of the TD which is good, however I am not sure what code I need to show my popup DIV, any idea? — Stan Howe, May 25 '18 at 16:10
Added the following to 'Your Code' section' to get it working: $(this).find(".popuptext").css("visibility","visible"); — Stan Howe, May 26 '18 at 14:35
In jquery can use `:visible` to call visible selector ref : https://api.jquery.com/visible-selector/ — jupeter, May 30 '18 at 07:21

score 0 · Answer 2 · answered May 25 '18 at 09:37

You could pass the element itself in the onclick function

<td onclick="openPopup(this)"> 
// ...
// When the user clicks on <div>, open the popup unique to that cell 
function openPopup(ele) {
    // get the div with ele
}

Or with jquery:

$('.yourTable').on("click", "td", function(ele){
    // show your div with ele
});

score 0 · Answer 3 · answered May 25 '18 at 09:44

0

Instead of writing a same function multiple times(depending on the days) to your html bind the function to the element you want it to work on ,to avoid increasing the code on the DOM.

you can add this code to your javascript:

var td = document.querySelector('table td');
td.addEventListener('click', function() {
  var text = this.querySelector('.popuptext').innerHTML;//here you get the day
  //now do your code to display the date here

});

answered May 25 '18 at 09:44

vikscool

1,263
1
10
21

Hey Ive tried this but no luck var td = document.querySelector('table td'); td.addEventListener('click', function() { var text = this.querySelector('.popuptext').innerHTML;//here you get the day //now do your code to display the date here text.classList.add("popup.show"); }); – Stan Howe May 26 '18 at 14:01
@StanHowe the object `this` inside the click function will represent the `td` , on which the `click event` has occurred & more about the `this` keyword can be found at [link](https://stackoverflow.com/a/3127440/2417602). And for the code `text.classList.add("popup.show");` will not work as the `text` is just a `string object` and not an `DOM` hence will throw an error of `undefined` object. If you want to add classes to the object with class `.popup` do a query selector on it and then add the class like `var popup = this.querySelector('.popup'); popup.classList.add('show');`. – vikscool May 28 '18 at 04:45

Showing unique child DIV when clicking a TD - jQuery/Javascript

3 Answers3