How to append div and add class where div id is the same as td value with jquery?

Question

I have the following two HTML which is generated by PHP.

I want to append the second one to the first table td. I want to add class="date_has_event" to td if there are events. Each event has number which is the date in div id.

I am using jquery, but I am not sure. Could anyone tell me how to approach this one please?

HTML

<tr>
<td>17</td><td><div class="highlight">18</div></td><td>19</td><td>20</td>
<td>21</td><td>22</td><td>23</td>
</tr>

DIV I want to append to the above HTML.

--UPDATE--

The following will be generated dynamically by PHP/MYSQL. These are event lists. 17th div has to be appended to td is 17 and 19th div to td 19 etc.

<div id ="17" class="events">
     <ul style="opacity: 0; top:
20px; left: -76px; display: none; bottom: -202px;">
       <li><a href="index.php/admin
/calendar/edit/1">
       <span class="title">17th event 1</span>
       <span class="desc">event 1 of 17th</span></a>
       </li>
       <li><a href="index.php/admin/calendar/edit/4">
       <span class="title">17th event 2</span>
       <span class="desc">event 2 of 17th</span></a>
       </li>
       <li><a href="index.php/admin/calendar/edit/13">
       <span class="title">make pancake with
emile</span>
       <span class="desc">mix flour, water and raindrops with love</span></a>
       </li>
    </ul>
  </div>


    <div id="19" class="events">
   <ul style="opacity: 0;">
      <li><a href="index.php/admin/calendar/edit/2">
      <span class="title">19th event 1</span>
      <span class="desc">id 2 change</span>
</a></li>
      <li><a href="index.php/admin/calendar/edit/5">
      <span class="title">19th event 2</span>
      <span class="desc">event 2 of 19th</span></a>
      </li>
      <li><a href="index.php/admin/calendar/edit/6">
      <span class="title">19th event 3</span>
      <span class="desc">event 3 of 19th</span></a>
      </li>
    </ul>
 </div>
    ...
    ...

The final output I want to have.

<tr>
   <td class="date_has_event"> 17<div class="events">
     <ul style="opacity: 0; top:
20px; left: -76px; display: none; bottom: -202px;">
       <li><a href="index.php/admin
/calendar/edit/1">
       <span class="title">17th event 1</span>
       <span class="desc">event 1 of 17th</span></a>
       </li>
       <li><a href="index.php/admin/calendar/edit/4">
       <span class="title">17th event 2</span>
       <span class="desc">event 2 of 17th</span></a>
       </li>
       <li><a href="index.php/admin/calendar/edit/13">
       <span class="title">make pancake with
emile</span>
       <span class="desc">mix flour, water and raindrops with love</span></a>
       </li>
    </ul>
  </div>
</td>
<td id="today"> 18</td><td class="date_has_event"> 19<div 
class="events">
   <ul style="opacity: 0;">
      <li><a href="index.php/admin/calendar
/edit/2">
      <span class="title">19th event 1</span>
      <span class="desc">id 2 change</span>
</a></li>
      <li><a href="index.php/admin/calendar/edit/5">
      <span class="title">19th event 2</span>
      <span class="desc">event 2 of 19th</span></a>
      </li>
      <li><a href="index.php/admin/calendar/edit/6">
      <span class="title">19th event 3</span>
      <span class="desc">event 3 of 19th</span></a>
      </li>
    </ul>
 </div>
</td>
<td> 20</td><td> 21</td><td> 22</td><td> 
23</td></tr>

Answer 1

Try something like this:

if ($('div[@id]') == $(td).html())
{
    $('somediv').html('<div>whatever</div>')
    $('somediv').addClass('classname');
}

In the above code, you should specify correct div and td identifiers.

Answer 2

Consider your td cells have a class my_td. Maybe smth like:

$(document).ready(function(){
   $('.my_td').each(function(){
      var div_id = $(this).text();
      var matched_div = $('div#'+div_id);
      if(matched_div.children('ul li').length){
        $(this).addClass = 'date_has_event';
        $(this).append(matched_div)
      }
   });
});

Not tested but I wanted just to show basic idea how you can solve your problem.

Answer 3

Try:

$('#mytable td').each (function ()
{
    var cell = $(this), div = $('#' + cell.text());
    if (div.length)
        cell
        .addClass ('date_has_events')
        .append (div);
});

Replace #mytable with your table's id