CODEWITHSUNDEEP
javascriptjqueryhtml
Stan Howe
Stan Howe

Reputation: 116

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

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>

Upvotes: 0

Views: 85

Answers (3)

jupeter
jupeter

Reputation: 746

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>

Upvotes: 1

vikscool
vikscool

Reputation: 1313

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

});

Upvotes: 0

Stephan T.
Stephan T.

Reputation: 6074

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

Upvotes: 0

Related Questions