代码之家 › 专栏 › 技术社区 › Stan Howe

单击td-jquery/javascript时显示唯一子DIV

html jquery javascript

Stan Howe · 技术社区 · 8 年前

我有一个像日历一样的表格,一个表格行有31个表格单元格。

我正在努力显示这个 子分区 对TD的点击使其独一无二。

现在,如果我单击第二个td,它显示单元格1的DIV内容,我需要它显示自己的子DIV内容。

我有弹出窗口工作,但我只需要一只手,了解如何显示独特的day-div内容。

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

3 回复 | 直到 8 年前

jupeter 8 年前

使用jquery访问 <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>

Stephan T. 8 年前

可以在onclick函数中传递元素本身

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

或者使用jquery:

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

vikscool 8 年前

而不是写同样的东西 function 多次(视天数而定)到您的 html 绑定 功能 DOM .

您可以将此代码添加到您的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

});