Colspan屬性沒有從變量設置

Question

我有一個單元格具有相同值的表格。我正嘗試使用colspan將它們合併在一起，但爲colspan設置屬性不起作用。

https://jsfiddle.net/afn4f1q9/4/

$(function() { 

    $('table.merge tr').each(function() { 
    var tr = this; 
    var counter = 1; 
    var prevValue = false; 
    var colspanTD = false; 

    $('td', tr).each(function(index, value) { 
     var td = $(this); 

     if (counter == 1) { 
     colspanTD = $(this); 
     } 

     if (prevValue !== false) { 
     if (td.text() == prevValue) { 

      if (td.text() != '' && td.text() != 'X' && td.text() != '*') { 
      counter++; 
      td.remove(); 

      } 
     } else { 
      $(colspanTD).attr('colspan', counter); 
      counter = 1; 
     } 

     } 
     prevValue = td.text(); 
    }); 

    }); 



}); 

Answer 1

我試圖用合併單元格，將它們合併在一起，但設置合併單元格是有沒有效果的屬性。

您的問題與您的代碼的一些問題有關。我解決了這些問題。這是我的建議（請參閱代碼中的註釋）。

$('table.merge tr').each(function() { 
 
    var tr = this; 
 
    var counter = -1; 
 
    var prevValue = false; 
 
    var colspanTD = false; 
 
    // 
 
    // save current selection 
 
    // 
 
    var tableCells = $('td', tr) 
 

 
    tableCells.each(function (index, value) { 
 
     var td = $(this); 
 

 
     if (prevValue !== false) { 
 
      if (td.text() == prevValue) { 
 
       // 
 
       // get text, trim it and transform in uppercase 
 
       // 
 
       var txt = td.text().trim().toUpperCase(); 
 
       if (txt != '' && txt != 'X' && txt != '*') { 
 
        // 
 
        // set the starting cell sequence... 
 
        // 
 
        if (colspanTD === false) { 
 
         counter = 1; 
 
         colspanTD = tableCells.eq(index - 1); 
 
        } 
 
        counter++; 
 
        td.remove(); 
 
       } 
 
      } else { 
 
       // 
 
       // if ending cell sequence... 
 
       // 
 
       if (colspanTD !== false) { 
 
        colspanTD.attr('colspan', counter); 
 
        colspanTD = false; 
 
       } 
 
      } 
 
     } 
 
     prevValue = td.text(); 
 
    }); 
 
    // 
 
    // if ending cell sequence in row... 
 
    // 
 
    if (colspanTD !== false) { 
 
     colspanTD.attr('colspan', counter); 
 
     colspanTD = false; 
 
    } 
 

 
});

th, 
 
td { 
 
    border: 1px solid #ccc 
 
}

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

 

 
<table class="merge table table-sm"> 
 
    <thead class="thead-default"> 
 
    <tr> 
 
     <th>Pitch</th> 
 
     <th>Identifier</th> 
 
     <th data-date="2017-08-01" data-roomid="22">1</th> 
 
     <th data-date="2017-08-02" data-roomid="22">2</th> 
 
     <th data-date="2017-08-03" data-roomid="22">3</th> 
 
     <th data-date="2017-08-04" data-roomid="22">4</th> 
 
     <th data-date="2017-08-05" data-roomid="22">5</th> 
 
     <th data-date="2017-08-06" data-roomid="22">6</th> 
 
     <th data-date="2017-08-07" data-roomid="22">7</th> 
 
     <th data-date="2017-08-08" data-roomid="22">8</th> 
 
     <th data-date="2017-08-09" data-roomid="22">9</th> 
 
     <th data-date="2017-08-10" data-roomid="22">10</th> 
 
     <th data-date="2017-08-11" data-roomid="22">11</th> 
 
     <th data-date="2017-08-12" data-roomid="22">12</th> 
 
     <th data-date="2017-08-13" data-roomid="22">13</th> 
 
     <th data-date="2017-08-14" data-roomid="22">14</th> 
 
     <th data-date="2017-08-15" data-roomid="22">15</th> 
 
     <th data-date="2017-08-16" data-roomid="22">16</th> 
 
     <th data-date="2017-08-17" data-roomid="22">17</th> 
 
     <th data-date="2017-08-18" data-roomid="22">18</th> 
 
     <th data-date="2017-08-19" data-roomid="22">19</th> 
 
     <th data-date="2017-08-20" data-roomid="22">20</th> 
 
     <th data-date="2017-08-21" data-roomid="22">21</th> 
 
     <th data-date="2017-08-22" data-roomid="22">22</th> 
 
     <th data-date="2017-08-23" data-roomid="22">23</th> 
 
     <th data-date="2017-08-24" data-roomid="22">24</th> 
 
     <th data-date="2017-08-25" data-roomid="22">25</th> 
 
     <th data-date="2017-08-26" data-roomid="22">26</th> 
 
     <th data-date="2017-08-27" data-roomid="22">27</th> 
 
     <th data-date="2017-08-28" data-roomid="22">28</th> 
 
     <th data-date="2017-08-29" data-roomid="22">29</th> 
 
     <th class="availability-box-header" data-date="2017-08-30" data-roomid="22">30</th> 
 
     <th class="availability-box-header" data-date="2017-08-31" data-roomid="22">31</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Glade - Electric</td> 
 
     <td>G1</td> 
 
     <td class="text-center"> 
 
      <a href="#">771</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">771</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">771</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">771</a> 
 
     </td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" 
 
      data-date="2017-08-05" data-block="false">X 
 
     </td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" 
 
      data-date="2017-08-06" data-block="false">X 
 
     </td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" 
 
      data-date="2017-08-07" data-block="false">X 
 
     </td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" 
 
      data-date="2017-08-08" data-block="false">X 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1286</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1286</a> 
 
     </td> 
 
     <td class="text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-28" 
 
      data-block="true"></td> 
 
     <td class="text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-29" 
 
      data-block="true"></td> 
 
     <td class="text-center"> 
 
      <a href="#">1194</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1194</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 

 
</table> 
 
<br/><br/> 
 

 
<table class="table table-sm"> 
 
    <thead class="thead-default"> 
 
    <tr> 
 
     <th>Pitch</th> 
 
     <th>Identifier</th> 
 
     <th data-date="2017-08-01" data-roomid="22">1</th> 
 
     <th data-date="2017-08-02" data-roomid="22">2</th> 
 
     <th data-date="2017-08-03" data-roomid="22">3</th> 
 
     <th data-date="2017-08-04" data-roomid="22">4</th> 
 
     <th data-date="2017-08-05" data-roomid="22">5</th> 
 
     <th data-date="2017-08-06" data-roomid="22">6</th> 
 
     <th data-date="2017-08-07" data-roomid="22">7</th> 
 
     <th data-date="2017-08-08" data-roomid="22">8</th> 
 
     <th data-date="2017-08-09" data-roomid="22">9</th> 
 
     <th data-date="2017-08-10" data-roomid="22">10</th> 
 
     <th data-date="2017-08-11" data-roomid="22">11</th> 
 
     <th data-date="2017-08-12" data-roomid="22">12</th> 
 
     <th data-date="2017-08-13" data-roomid="22">13</th> 
 
     <th data-date="2017-08-14" data-roomid="22">14</th> 
 
     <th data-date="2017-08-15" data-roomid="22">15</th> 
 
     <th data-date="2017-08-16" data-roomid="22">16</th> 
 
     <th data-date="2017-08-17" data-roomid="22">17</th> 
 
     <th data-date="2017-08-18" data-roomid="22">18</th> 
 
     <th data-date="2017-08-19" data-roomid="22">19</th> 
 
     <th data-date="2017-08-20" data-roomid="22">20</th> 
 
     <th data-date="2017-08-21" data-roomid="22">21</th> 
 
     <th data-date="2017-08-22" data-roomid="22">22</th> 
 
     <th data-date="2017-08-23" data-roomid="22">23</th> 
 
     <th data-date="2017-08-24" data-roomid="22">24</th> 
 
     <th data-date="2017-08-25" data-roomid="22">25</th> 
 
     <th data-date="2017-08-26" data-roomid="22">26</th> 
 
     <th data-date="2017-08-27" data-roomid="22">27</th> 
 
     <th data-date="2017-08-28" data-roomid="22">28</th> 
 
     <th data-date="2017-08-29" data-roomid="22">29</th> 
 
     <th class="availability-box-header" data-date="2017-08-30" data-roomid="22">30</th> 
 
     <th class="availability-box-header" data-date="2017-08-31" data-roomid="22">31</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Glade - Electric</td> 
 
     <td>G1</td> 
 
     <td class="text-center"> 
 
      <a href="#">771</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">771</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">771</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">771</a> 
 
     </td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" 
 
      data-date="2017-08-05" data-block="false">X 
 
     </td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" 
 
      data-date="2017-08-06" data-block="false">X 
 
     </td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" 
 
      data-date="2017-08-07" data-block="false">X 
 
     </td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" 
 
      data-date="2017-08-08" data-block="false">X 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1286</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1286</a> 
 
     </td> 
 
     <td class="text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-28" 
 
      data-block="true"></td> 
 
     <td class="text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-29" 
 
      data-block="true"></td> 
 
     <td class="text-center"> 
 
      <a href="#">1194</a> 
 
     </td> 
 
     <td class="text-center"> 
 
      <a href="#">1194</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 

 
</table>

Answer 2

試試這個：

else { 
 
    this.colSpan = counter 
 
    counter = 1; 
 
} 
 

 
/** 
 
* And Not, 
 
* 
 
* else { 
 
*  $(colspanTD).attr('colspan', counter); 
 
*  counter = 1; 
 
* } 
 
*/

順便問一下，你的代碼是有點重複。你可以這樣做：

$(function() { 
 

 
    $('table.merge tr').each(function() { 
 

 
    var counter = 1; 
 
    var $prevTD = null; 
 

 
    $('td', this).each(function(index, value) { 
 

 
     // We only need the text once. 
 
     var $this = $(this); 
 
     var text = $this.text(); 
 

 
     // We skip if : 
 
     // 1. It's the first td. 
 
     // 2. If the string is empty. 
 
     // 3. The string is a "*" or "X". 
 
     // 4. The current text matches the last text. 
 
     if ($prevTD && text && !/^[*X]$/.test(text) && text == $prevTD.text()) { 
 
     $prevTD.remove(); 
 
     this.colSpan = ++counter; 
 
     } 
 

 
     // We reset our counter 
 
     else counter = 1; 
 
     
 
     // We save the current <td>. 
 
     $prevTD = $this; 
 
    }); 
 
    }); 
 
});

th, 
 
td { 
 
    border: 1px solid #ccc 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="merge table table-sm"> 
 
    <thead class="thead-default"> 
 
    <tr> 
 
     <th>Pitch</th> 
 
     <th>Identifier</th> 
 
     <th data-date="2017-08-01" data-roomid="22">1</th> 
 
     <th data-date="2017-08-02" data-roomid="22">2</th> 
 
     <th data-date="2017-08-03" data-roomid="22">3</th> 
 
     <th data-date="2017-08-04" data-roomid="22">4</th> 
 
     <th data-date="2017-08-05" data-roomid="22">5</th> 
 
     <th data-date="2017-08-06" data-roomid="22">6</th> 
 
     <th data-date="2017-08-07" data-roomid="22">7</th> 
 
     <th data-date="2017-08-08" data-roomid="22">8</th> 
 
     <th data-date="2017-08-09" data-roomid="22">9</th> 
 
     <th data-date="2017-08-10" data-roomid="22">10</th> 
 
     <th data-date="2017-08-11" data-roomid="22">11</th> 
 
     <th data-date="2017-08-12" data-roomid="22">12</th> 
 
     <th data-date="2017-08-13" data-roomid="22">13</th> 
 
     <th data-date="2017-08-14" data-roomid="22">14</th> 
 
     <th data-date="2017-08-15" data-roomid="22">15</th> 
 
     <th data-date="2017-08-16" data-roomid="22">16</th> 
 
     <th data-date="2017-08-17" data-roomid="22">17</th> 
 
     <th data-date="2017-08-18" data-roomid="22">18</th> 
 
     <th data-date="2017-08-19" data-roomid="22">19</th> 
 
     <th data-date="2017-08-20" data-roomid="22">20</th> 
 
     <th data-date="2017-08-21" data-roomid="22">21</th> 
 
     <th data-date="2017-08-22" data-roomid="22">22</th> 
 
     <th data-date="2017-08-23" data-roomid="22">23</th> 
 
     <th data-date="2017-08-24" data-roomid="22">24</th> 
 
     <th data-date="2017-08-25" data-roomid="22">25</th> 
 
     <th data-date="2017-08-26" data-roomid="22">26</th> 
 
     <th data-date="2017-08-27" data-roomid="22">27</th> 
 
     <th data-date="2017-08-28" data-roomid="22">28</th> 
 
     <th data-date="2017-08-29" data-roomid="22">29</th> 
 
     <th class="availability-box-header" data-date="2017-08-30" data-roomid="22">30</th> 
 
     <th class="availability-box-header" data-date="2017-08-31" data-roomid="22">31</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Glade - Electric</td> 
 
     <td>G1</td> 
 
     <td class="text-center"> 
 
     <a href="#">771</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">771</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">771</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">771</a> 
 
     </td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-05" data-block="false">X</td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-06" data-block="false">X</td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-07" data-block="false">X</td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-08" data-block="false">X</td> 
 
     <td class="text-center"> 
 
     <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1286</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1286</a> 
 
     </td> 
 
     <td class="text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-28" data-block="true"></td> 
 
     <td class="text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-29" data-block="true"></td> 
 
     <td class="text-center"> 
 
     <a href="#">1194</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1194</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 

 
</table> 
 
<br /><br /> 
 

 
<table class="table table-sm"> 
 
    <thead class="thead-default"> 
 
    <tr> 
 
     <th>Pitch</th> 
 
     <th>Identifier</th> 
 
     <th data-date="2017-08-01" data-roomid="22">1</th> 
 
     <th data-date="2017-08-02" data-roomid="22">2</th> 
 
     <th data-date="2017-08-03" data-roomid="22">3</th> 
 
     <th data-date="2017-08-04" data-roomid="22">4</th> 
 
     <th data-date="2017-08-05" data-roomid="22">5</th> 
 
     <th data-date="2017-08-06" data-roomid="22">6</th> 
 
     <th data-date="2017-08-07" data-roomid="22">7</th> 
 
     <th data-date="2017-08-08" data-roomid="22">8</th> 
 
     <th data-date="2017-08-09" data-roomid="22">9</th> 
 
     <th data-date="2017-08-10" data-roomid="22">10</th> 
 
     <th data-date="2017-08-11" data-roomid="22">11</th> 
 
     <th data-date="2017-08-12" data-roomid="22">12</th> 
 
     <th data-date="2017-08-13" data-roomid="22">13</th> 
 
     <th data-date="2017-08-14" data-roomid="22">14</th> 
 
     <th data-date="2017-08-15" data-roomid="22">15</th> 
 
     <th data-date="2017-08-16" data-roomid="22">16</th> 
 
     <th data-date="2017-08-17" data-roomid="22">17</th> 
 
     <th data-date="2017-08-18" data-roomid="22">18</th> 
 
     <th data-date="2017-08-19" data-roomid="22">19</th> 
 
     <th data-date="2017-08-20" data-roomid="22">20</th> 
 
     <th data-date="2017-08-21" data-roomid="22">21</th> 
 
     <th data-date="2017-08-22" data-roomid="22">22</th> 
 
     <th data-date="2017-08-23" data-roomid="22">23</th> 
 
     <th data-date="2017-08-24" data-roomid="22">24</th> 
 
     <th data-date="2017-08-25" data-roomid="22">25</th> 
 
     <th data-date="2017-08-26" data-roomid="22">26</th> 
 
     <th data-date="2017-08-27" data-roomid="22">27</th> 
 
     <th data-date="2017-08-28" data-roomid="22">28</th> 
 
     <th data-date="2017-08-29" data-roomid="22">29</th> 
 
     <th class="availability-box-header" data-date="2017-08-30" data-roomid="22">30</th> 
 
     <th class="availability-box-header" data-date="2017-08-31" data-roomid="22">31</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Glade - Electric</td> 
 
     <td>G1</td> 
 
     <td class="text-center"> 
 
     <a href="#">771</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">771</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">771</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">771</a> 
 
     </td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-05" data-block="false">X</td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-06" data-block="false">X</td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-07" data-block="false">X</td> 
 
     <td class="availability-box text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-08" data-block="false">X</td> 
 
     <td class="text-center"> 
 
     <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">747</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">802</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1276</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1286</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#">1286</a> 
 
     </td> 
 
     <td class="text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-28" data-block="true"></td> 
 
     <td class="text-center text-danger" data-roomid="22" data-identifier="70" data-date="2017-08-29" data-block="true"></td> 
 
     <td class="text-center"> 
 
     <a href="#">1194</a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <a href="#"></a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 

 
</table>