表 <tbody> 宽度损坏？

Question

我正在用 css/js 做一些数据 id href 内容显示/隐藏，但是在 jquery 采取行动后，tbody 的宽度并没有占据表格的所有宽度：

重新加载后的第一个 tbody 视图

转到另一个人之后

html:

<table>
                    <tr style="background: steelblue;">
                        <td colspan="3" style="background: steelblue;"><h4>Total Users: <%= users.length %></h4></td>
                    </tr>
                <tbody id="1" class="userTable">

                    <% var k=0; for(var i=0; i<5; i++){ %>
                    <tr>
                        <td><%= i+1 %></td>
                        <td >
                            <%= users[i].username %>
                        </td>
                        <td>
                            <a class="btn btn-xs btn-primary" href="<%= users[i]._id%>/edit">Edit</a>
                            <form style="display: inline" action="<%= users[i]._id%>/delete?_method=DELETE" method="POST">
                                <button class="btn btn-xs btn-danger">Delete</button>
                            </form>
                        </td>
                    </tr>                               
                    <% } %>
                </tbody>
                    <% var k=1; var length = users.length-5; while(length > 0){ if(length>5){ %>
                <tbody class="userTable" id="<%= k+1%>" style="display: none">
                    <% for(var i=5*k; i<5*k+5; i++){  %>

                    <tr>
                        <td><%= i+1 %></td>
                        <td >
                            <%= users[i].username %>
                        </td>
                        <td>
                            <a class="btn btn-xs btn-primary" href="<%= users[i]._id%>/edit">Edit</a>
                            <form style="display: inline" action="<%= users[i]._id%>/delete?_method=DELETE" method="POST">
                                <button class="btn btn-xs btn-danger">Delete</button>
                            </form>
                        </td>
                    </tr>   
                    <% } %>
                </tbody>
                    <% length -= 5; %>
                    <% k++; } else { %>
                <tbody class="userTable" id="<%= k+1 %>" style="display: none">
                    <% for(var i=5*k; i < length+5*k; i++){ %>
                    <tr>
                            <td><%= i+1 %></td>
                            <td>
                                <%= users[i].username %>
                            </td>
                            <td>
                                <a class="btn btn-xs btn-primary" href="<%= users[i]._id%>/edit">Edit</a>
                                <form style="display: inline" action="<%= users[i]._id%>/delete?_method=DELETE" method="POST">
                                    <button class="btn btn-xs btn-danger">Delete</button>
                                </form>
                            </td>
                    </tr>
                    <% } %>
                </tbody>
                    <% length-= 5;}} %>
                    <tr>

                        <td colspan="3" style="width: 1px">
                            <% var k=0; var length = users.length; while(length>0){if(length>=5){ for(var i=0; i<5; i+=5){ %>
                            <a href="#<%= k+1 %>" class="btn tableBtn"><%= k+1 %></a>
                            <% } length-=5; k++; %>

                            <% }else { for(var i=5*k; i<length+5*k; i+=length){ %>
                                <a href="#<%= k+1 %>" class="btn tableBtn"><%= k+1 %></a>
                                <input type="number" id="searchTable">
                                <a href="#" class="btn btn-primary btn-xs searchTableBtn">Go</a>
                            <% } length-=5;}} %>
                        </td>
                    </tr>
                </table>

css:

<style>
    td:nth-of-type(odd) {
        padding: 10px;
    }
    td {
        padding: 10px;
    }

    tr{ 
         background: gainsboro;
    }
    tr:nth-of-type(odd) {
        background: white;
    }
    table {
        margin: 30px auto;
        background: white;
        width: 300px;
        border-collapse: separate;
        box-shadow: 4px 4px 2px #888888;
    }
    #searchTable {
        width: 15%;
    }

jquery:

$(".tableBtn").click(function(){
$(".userTable").css({display: "none"});
    var id = $(this).attr("href");
    $("" + id).css({display: "block"});
});
$("#searchTable").change(function(){
    var id = $(this).val();
    $(".searchTableBtn").attr("href", "#"+id);
});
$(".searchTableBtn").click(function(){
    $(".userTable").css({display: "none"});
    var id = $(this).attr("href");
    $("" + id).css({display: "block"}); 
});

Answer 1

所有tr 都应位于tbody 或thead 或tfoot 中。它们不应直接位于 table 元素内。同样，您应该在一个表中只有一个 tbody 元素。

您还使用$("" + id).css({display: "block"}); 来“重新显示”tbody 元素。 tbody的默认显示属性是display:table-row-group不是block；

您的 html 格式很难理解您想要实现的目标。我建议您查看渲染整个表格，并使用您生成的分页链接来显示/隐藏整个table，而不是内部tbody。

---

建议的代码修改

我建议您改为将表格仅用于表格数据，并将分页和标题分离到它们自己的元素中。这样您就可以拥有多个表格元素，并通过您的 js 切换它们的可见性。

HTML 生成代码

<%
    /*
        Takes an array, and a "chunk" size
        returns an array grouped into "chunks" of the specified size
        if there are a non-exact number of items to equal a whole chunk, the
        last chunk will have less than a whole chunk's worth of items in it
    */
    var chunkArray = function(array, chunk){
        var temparray;
        if(!chunk){
            chunk = 5;
        }
        for (var i = 0, len = array.length; i < len; i+=chunk) {
            temparray = array.slice( i, i+chunk );
        }
        return temparray;
    }
    var chunkSize = 5;
    var usersLength = users.length;
    var userChunks = chunkArray(users, chunkSize);
    var userChunkLength = userChunks.length;
%>
<div class="userTableContainer">
    <div class="userTableHeading">
        <h4>Total Users: <%= users.length %></h4>
    </div>
    <div class="userTablePages">
        <!-- begin pages tables -->
        <% for(var page = 0; page < userChunkLength; page++){ %>
            <table class="userTable">
                <tbody>
                    <!-- begin page users rows -->
                    <% for(var i = 0, len = userChunks[page].length; i < len; i++){ %>
                        <% var currentUser = userChunks[page][i]; %>
                        <tr>
                            <td><%= (page * chunkSize) + (i+1) %></td>
                            <td >
                                <%= currentUser.username %>
                            </td>
                            <td>
                                <a class="btn btn-xs btn-primary" href="<%= currentUser._id%>/edit">Edit</a>
                                <form style="display: inline" action="<%= currentUser._id%>/delete?_method=DELETE" method="POST">
                                    <button class="btn btn-xs btn-danger">Delete</button>
                                </form>
                            </td>
                        </tr>   
                    <% } %>
                    <!-- end page users rows -->
                </tbody>
            </table>
        <% } %>
        <!-- end pages tables -->
    </div>
    <div class="userTableFooter">
        <!-- begin pagination buttons -->
        <% for(var page = 1; page <= userChunkLength; page++){ %>
                <a href="#<%= page %>" class="btn tableBtn"><%= page %></a>
        <% } %>
        <!-- end pagination buttons -->
        <!-- begin page go to input -->
        <% if(userLength > 5){ %>
                <input type="number" id="searchTable">
                <a href="#" class="btn btn-primary btn-xs searchTableBtn">Go</a>
        <% } %>
        <!-- end page go to input -->
    </div>
</div>

更新的 CSS

.userTableContainer {
    margin: 30px auto;
    background: white;
    width: 300px;
    box-shadow: 4px 4px 2px #888888;
}
.userTableHeading{
    background:steelblue;
    padding:10px;
}
.userTableFooter{
    padding:10px;
}
.userTable{
    margin:0;
    border-collapse: separate;
}
.userTable tr{
    background: gainsboro;
}
.userTable tr:nth-child(odd){
    background: white;
}
.userTable td {
    padding: 10px;
}
#searchTable {
    width: 15%;
}

更新的 JS

$(".tableBtn").click(function(){
    $(".userTable").css({display: "none"});
    var id = $(this).attr("href");
    $("" + id).css({display: "table"});
});
$("#searchTable").change(function(){
    var id = $(this).val();
    $(".searchTableBtn").attr("href", "#"+id);
});
$(".searchTableBtn").click(function(){
    $(".userTable").css({display: "none"});
    var id = $(this).attr("href");
    $("" + id).css({display: "table"}); 
});

Answer 2

用table-header-group代替block

$(".tableBtn").click(function(){
$(".userTable").css({display: "none"});
    var id = $(this).attr("href");
    $("" + id).css({display: "table-header-group"});
});
$("#searchTable").change(function(){
    var id = $(this).val();
    $(".searchTableBtn").attr("href", "#"+id);
});
$(".searchTableBtn").click(function(){
    $(".userTable").css({display: "none"});
    var id = $(this).attr("href");
    $("" + id).css({display: "table-header-group"}); 
});