How to Add Div Inside Table Above Every <Tr>

div into a tr : is it correct?

No it is not valid. tr elements can only contain th and td elements. From the HTML4 specification:

<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ATTLIST TR                           -- table row --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- horizontal alignment in cells --
  %cellvalign;                         -- vertical alignment in cells --
>

div' inside 'table'

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>test</title>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <div>content</div>
        </td>
      </tr>
    </table>
  </body>
</html>

This document was successfully checked as XHTML 1.0 Transitional!

how to properly insert div with tr inside a table?

Update

re-reading your structure you most likely need

<table>
  <thead>
   <tr>
      <th>name</th>
      <th>age</th>
      <th>gender</th>
   </tr>
  </thead>
  <tbody id="contents">
     <tr>
        <td>John</td>
        <td>12</td>
        <td>male</td>
     </tr>
     <tr>
        <td>Jess</td>
        <td>13</td>
        <td>female</td>
     </tr>
  </tbody>
</table>

Original answer

You can't have tr as direct children of a div.

You need to use a table

Either

<table>
   <tr>
      <th>name</th>
      <th>age</th>
      <th>gender</th>
   </tr>
   <td>
      <table id="contents">
       <tr>
          <td>John</td>
          <td>12</td>
          <td>male</td>
       </tr>
       <tr>
          <td>Jess</td>
          <td>13</td>
          <td>female</td>
       </tr>
      </table>
   <td>
</table>

<table>
   <tr>
      <th>name</th>
      <th>age</th>
      <th>gender</th>
   </tr>
   <td>
      <div id="contents">
       <table>
        <tr>
          <td>John</td>
          <td>12</td>
          <td>male</td>
        </tr>
        <tr>
          <td>Jess</td>
          <td>13</td>
          <td>female</td>
        </tr>
       </table>
      </div>
   <td>
</table>

how can i add a html div insid a tr tag to span the whole row

Why not just do a column that spans all the columns

<tr><td colspan="number_of_cols"> stuff here</td><tr>

Otherwise I would suggest building the entire table using divs

How to append a div tag into a tr tag with exactly position of tr tag

Just go with this and you don't need jquery if you want to highlight

table {

    font-family: arial, sans-serif;

    border-collapse: collapse;

    width: 100%;

}

td, th {

    border: 1px solid #dddddd;

    text-align: left;

    padding: 8px;

}

tr:nth-child(even) {

    background-color: #dddddd;

}

#playingBar {

  position: absolute;  

   margin: 0 0 0 0;

   padding: 0 0 0 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0,255,0,0.4);

    text-align: center; /* To center it horizontally (if you want) */

    line-height: 30px; /* To center it vertically */

    color: white;

}

tr#highlight {

background-color: rgba(0, 255, 0, 0.4);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

<table>

  <tr>

    <th>Company</th>

    <th>Contact</th>

    <th>Country</th>

  </tr>

  <tr>

    <td>Alfreds Futterkiste</td>

    <td>Maria Anders</td>

    <td>Germany</td>

  </tr>

  <tr id="highlight">

    <td>Centro comercial Moctezuma</td>

    <td>Francisco Chang</td>

    <td>Mexico</td>

  </tr>  

</table>

</body>

Access contents of div inside table cell

Use

$(check).closest(".task-modal-row").find(".task_description").text();

To access the content of the closest .task_description