1

I am trying to add div element inside the th element using jquery but I ain't able to append it. How do I add div when there is multiple class inside the th element. I have also tried append by table thead tr th .col_heading.level0.col0 but it didn't work. I don't know why it's failing.

$('.col_heading.level0.col2').prepend('<div class="tooltiptext">This is it.</div>')
.col_heading.level0.col2 {
  position: relative;
  display: inline-block;
}

.col_heading.level0.col2 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.col_heading.level0.col2:hover .tooltiptext {
  visibility: visible;
}

#T_3bac276a_15f8_11ea_b73d_475809f3cfcd {
  position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="T_3bac276a_15f8_11ea_b73d_475809f3cfcd">
  <thead>
    <tr>
      <th class="blank level0"></th>
      <th class="col_heading level0 col0"> a</th>
      <th class="col_heading level0 col1">b</th>
      <th class="col_heading level0 col2">c</th>
      <th class="col_heading level0 col3">d</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdlevel0_row0" class="row_heading level0 row0"> 0
      </th>
      <td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow0_col0" class="data row0 col0">1</td>
      <td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow0_col1" class="data row0 col1">x</td>
      <td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow0_col2" class="data row0 col2">0</td>
      <td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow0_col3" class="data row0 col3">0.0106405</td>
    </tr>
    <tr>
      <th id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdlevel0_row1" class="row_heading level0 row1">1</th>
      <td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow1_col0" class="data row1 col0">2</td>
      <td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow1_col1" class="data row1 col1">y</td>
      <td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow1_col2" class="data row1 col2">0</td>
      <td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow1_col3" class="data row1 col3">0.00423519</td>
    </tr>
    <tr>
      <th id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdlevel0_row2" class="row_heading level0 row2">2</th>
      <td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow2_col0" class="data row2 col0">3</td>
      <td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow2_col1" class="data row2 col1">z</td>
      <td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow2_col2" class="data row2 col2">0</td>
      <td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow2_col3" class="data row2 col3">0.0071003</td>
    </tr>
  </tbody>
</table>

I want this <th class="col_heading level0 col2" >c</th> to be <th class="col_heading level0 col2" ><div class="tooltiptext">This is it.</div>c</th>

Jsfiddle

hungerstar
  • 19,473
  • 5
  • 41
  • 57
ninjakx
  • 35
  • 11
  • 4
    Your fiddle has the JS part set to "bottom of " which means the code runs before the table exists. Wrap it in `$(function() {` and `});` to run it after the page has loaded, or move it to the end of body. – Chris G Dec 03 '19 at 19:47
  • 1
    Your code works when the JS is in the proper order. Which is why the Stack Snippet of your code is working. Change the JSFiddle _LOAD TYPE_ to _On Load_ and it will work. _LOAD TYPE_ is in the dropdown of the upper left corner of the JavaScript panel. – hungerstar Dec 03 '19 at 19:49
  • @ChrisG: Thanks for making me aware about these things. – ninjakx Dec 03 '19 at 19:55

0 Answers0