twitter-bootstrap - 如何在表格中每 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;
    }
}