表格HTML - >我怎样才能改变它的完成方式?

时间:2018-01-29 19:02:20

标签: html twitter-bootstrap checkbox html-table

我正在尝试在表的每一行创建一个带有复选框的表。

我有一个例子(代码示例链接),但我无法完成它。我不想使用“data-url”作为表的来源。除此之外,一切都符合我的需要。

我想自己喂“tbody”。

以下是我关注的示例:Code Example

我想要完成的事情:

<tbody>
    <tr>
        <!-- I do not know what to put over here in order to get it working-->
        <td data-field="state" data-checkbox="true"></th>
        <td>Foo</td>
        <td>666</td>
        <td>6969</td>
        <td>Let there be rock</td>
    </tr>
</tbody>

<!-- UPDATING CODE!  -->


<table data-toggle="table" data-click-to-select="true" class="table">
    <thead>
    <tr>
        <th class="bs-checkbox " data-field="state">
            <div class="th-inner">
                <input name="btSelectAll" class="selectall" type="checkbox">
            </div>
            <div class="fht-cell"></div>
        </th>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td class="bs-checkbox ">
                <input data-index="0" name="btSelectItem" type="checkbox">
            </td>
            <td style="">bootstrap-table</td>
            <td style="">526</td> <td style="">122</td>
            <td style="">Huehuehue</td> 
        </tr>
        <tr>
            <td class="bs-checkbox ">
                <input data-index="0" name="btSelectItem" type="checkbox">
            </td>
            <td style="">bootstrap-table</td>
            <td style="">528</td> <td style="">122</td>
            <td style="">huehuheheuhe</td> 
        </tr>
    </tbody>
</table>

更新说明

现在我可以自己喂“tbody”(感谢@Adriano Silva),但是“全选”复选框无效。

完成

@AdrianoSilva给出的解决方案示例:

JSFiddle Example

1 个答案:

答案 0 :(得分:0)

您可以在下面插入一行

<table data-toggle="table" data-click-to-select="true" data-url="none">
    <thead>
    <tr>
        <th class="bs-checkbox " data-field="state">
            <div class="th-inner">
                <input name="btSelectAll" type="checkbox">
            </div>
            <div class="fht-cell"></div>
        </th>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td class="bs-checkbox ">
                <input data-index="0" name="btSelectItem" type="checkbox">
            </td>
            <td style="">bootstrap-table</td>
            <td style="">526</td> <td style="">122</td>
            <td style="">An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)</td> 
        </tr>
    </tbody>
</table>