如何在表格中的每个3个单元格周围添加阴影？

Question

我在表中使用Bootstrap buttons作为单元格。我想为每3个细胞添加一个阴影，以便每3个细胞组成一组。

代码：

<table id="Tableid" class="table " > 
</table> 
<script> 
var table = $('#Tableid'); 
var hostId = 1; 
var count = 0; 
var row = $('<tr></tr>').addClass('test'); 
for(var i=0; i<10; i++){    

    for(j=0; j<3; j++){ 

     var button = "<button data-id=\""+hostId+"\"class=\"btn btn-primary btn-lg open-InfoModal\" data-toggle=\"modal\" data-target=\"#hostInfo\" href=\"#infoModal\"></button>"; 

     var cell = $('<td style="text-align:center">'+hostId+'</td>').addClass('test').wrapInner(button); //We use wrapInner to add HTML content 
     hostId++; 
     row.append(cell); 
    } 
    if(count<9) { 
     count++; 
    } else { 

    table.append(row); 
    row = $('<tr></tr>').addClass('test'); 
    count = 0; 
    } 
} 

</script> 

由于

Answer 1

代替在每个单元中一个按钮的我在相同的细胞中加入3-按钮。

这里是JSFiddle。

HTML：

<table id="Tableid" class="table " style="width: 1800px" > 
    <thead> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
      <td>10</td> 
      <td>11</td> 
      <td>12</td> 
      <td>13</td> 
      <td>14</td> 
      <td>15</td> 
      <td>16</td> 
      <td>17</td> 
      <td>18</td> 
      <td>19</td> 
      <td>20</td> 
      <td>21</td> 
      <td>22</td> 
      <td>23</td> 
      <td>24</td> 
      <td>25</td> 
      <td>26</td> 
      <td>27</td> 
      <td>28</td> 
      <td>29</td> 
      <td>30</td> 
     </tr> 
    </thead> 
</table> 

的JavaScript：

var table = $('#Tableid'); 
var hostId = 1; 
var count = 0; 
var row = $('<tr></tr>').addClass('test'); 
for(var i=0; i<50; i++){    

    var button="" 
    for(j=0; j<3; j++){ 
     button += "<button data-id=\""+hostId+"\"class=\"btn btn-primary btn-lg open-InfoModal\" data-toggle=\"modal\" data-target=\"#hostInfo\" href=\"#infoModal\">"+hostId+"</button>"; 
     hostId++; 
    }  

    var cell = $('<td style="text-align: center; box-shadow: 5px 5px 5px gray;" colspan=3>'+hostId+'</td>').addClass('test').html(button); 
    row.append(cell); 

    if(count<9) { 
     count++; 
    } else { 

    table.append(row); 
    row = $('<tr></tr>').addClass('test'); 
    count = 0; 
    } 
}