【问题标题】:TABLE HTML -> How can I change the way it is done?TABLE HTML -> 我怎样才能改变它的完成方式?
【发布时间】:2018-07-08 13:26:51
【问题描述】:

我正在尝试在表格的每一行上制作一个带有复选框的表格。

我有一个示例(代码示例链接),但我无法完成它。我不想使用“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

【问题讨论】:

    标签: html twitter-bootstrap checkbox html-table


    【解决方案1】:

    您可以插入一行,如下例所示

    <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>
    

    【讨论】:

    • 不错!但现在“全选”复选框不见了。图片:imgur.com/a/u7gHB[
    • 对不起,我的意思是错的。 “全选”复选框没有丢失,但它没有发挥它的功能:选择所有复选框。
    • 这种情况有没有涉及到JS?我发现了一些与此相关的问题,并使用 JS 来解决它。但我的案子没有成功。
    猜你喜欢
    • 2014-01-28
    • 1970-01-01
    • 1970-01-01
    • 2014-09-25
    • 2022-10-01
    • 2022-01-24
    • 1970-01-01
    • 2011-12-14
    • 2016-05-19
    相关资源
    最近更新 更多