Question

我有一个表格，其结构类似于日历，1个表格行，包含31个表格单元格。

我正在尝试显示点击的TD的子div ，以使其在当天独一无二。

目前如果我点击第二个TD它显示了单元格1的div内容，我需要它来显示自己的子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>

Answer 1

使用jquery access <td>

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以在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
});

Answer 3

而不是将function多次写入html而不是function将DOM绑定到您希望它处理的元素上，以避免增加代码在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 });。

您可以将此代码添加到您的javascript：

df["value"]=1
pd.pivot_table(df, values="value", index=["ID"], columns="P", fill_value=0)

单击TD-jQuery / Javascript时显示唯一的子DIV

3 个答案: