Add Empty Rows After Each Dynamic Row

ikay007

I have a styled table that I need to implement to become a data table while still maintaining it's styling. It is styled in such a way that each row tr containing data is followed my an empty row <tr class="spacer"></tr> without children and has a particular class name.

I have attached an image to visualize what my table looks like, but here's the html code:

<table class="table table-data2">
  <thead>
     <tr>
        <th>
          <label class="au-checkbox">
            <input type="checkbox">
            <span class="au-checkmark"></span>
         </label>
        </th>
        <th>name</th>
        <th>email</th>
        <th>description</th>
        <th>date</th>
        <th>status</th>
        <th>price</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
       <tr class="tr-shadow">
          <td>
            <label class="au-checkbox">
              <input type="checkbox">
              <span class="au-checkmark"></span>
            </label>
         </td>
         <td>Lori Lynch</td>
         <td><span class="block-email">lori@example.com</span></td>
         <td class="desc">Samsung S8 Black</td>
         <td>2018-09-27 02:12</td>
         <td><span class="status--process">Processed</span> </td>
         <td>$679.00</td>
         <td>
            <div class="table-data-feature">
               <button class="item" data-toggle="tooltip" data-placement="top" title="" data-original-title="Send">
                 <i class="zmdi zmdi-mail-send"></i>
               </button>
               <button class="item" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit">
                 <i class="zmdi zmdi-edit"></i>
               </button>
               <button class="item" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete">
                  <i class="zmdi zmdi-delete"></i>
               </button>
               <button class="item" data-toggle="tooltip" data-placement="top" title="" data-original-title="More">
                  <i class="zmdi zmdi-more"></i>
               </button>
             </div>
          </td>
        </tr>
        <tr class="spacer"></tr>
       <tr class="tr-shadow">
          <td>
            <label class="au-checkbox">
              <input type="checkbox">
              <span class="au-checkmark"></span>
            </label>
         </td>
         <td>Lori Lynch</td>
         <td><span class="block-email">lori@example.com</span></td>
         <td class="desc">Samsung S8 Black</td>
         <td>2018-09-27 02:12</td>
         <td><span class="status--process">Processed</span> </td>
         <td>$679.00</td>
         <td>
            <div class="table-data-feature">
               <button class="item" data-toggle="tooltip" data-placement="top" title="" data-original-title="Send">
                 <i class="zmdi zmdi-mail-send"></i>
               </button>
               <button class="item" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit">
                 <i class="zmdi zmdi-edit"></i>
               </button>
               <button class="item" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete">
                  <i class="zmdi zmdi-delete"></i>
               </button>
               <button class="item" data-toggle="tooltip" data-placement="top" title="" data-original-title="More">
                  <i class="zmdi zmdi-more"></i>
               </button>
             </div>
          </td>
        </tr>
        <tr class="spacer"></tr>
       <tr class="tr-shadow">
          <td>
            <label class="au-checkbox">
              <input type="checkbox">
              <span class="au-checkmark"></span>
            </label>
         </td>
         <td>Lori Lynch</td>
         <td><span class="block-email">lori@example.com</span></td>
         <td class="desc">Samsung S8 Black</td>
         <td>2018-09-27 02:12</td>
         <td><span class="status--process">Processed</span> </td>
         <td>$679.00</td>
         <td>
            <div class="table-data-feature">
               <button class="item" data-toggle="tooltip" data-placement="top" title="" data-original-title="Send">
                 <i class="zmdi zmdi-mail-send"></i>
               </button>
               <button class="item" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit">
                 <i class="zmdi zmdi-edit"></i>
               </button>
               <button class="item" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete">
                  <i class="zmdi zmdi-delete"></i>
               </button>
               <button class="item" data-toggle="tooltip" data-placement="top" title="" data-original-title="More">
                  <i class="zmdi zmdi-more"></i>
               </button>
             </div>
          </td>
        </tr>
     </tbody>
   </table>

Anyway to go about this?

kthorngren

Inserting <tr class="spacer"></tr> between each row won't work with Datatables. It expects each row to have the same number of columns and would use the empty data as part fo searching, sorting and paging (number of total table rows). Actually it would cause Javascript errors and the Datatable wouldn't initialize.

Maybe you can use CSS to achieve the same affect for the normal rows.

Kevin