Question

我有一个动态填充数据的表。这是在ASP.Net MVC中。

该表包含3个<tbody>元素，这些元素附加了数据，然后我在脚本标记中添加了一些jQuery，将最终边框添加到tbody元素。每个tbody元素都有2行，第一行是完全空的，用于将tobdy元素相互隔开，然后第二行在一个单元格中有一个复选框，旁边有一些文本。

表格宽4列，第2行最右边2个单元格为空。我试图通过向行添加边框在<tbody>周围添加边框。我尝试了在线搜索的其他方法，但这是我能够得到的最接近的方法。

基本上，我的表看起来像这样（边上的边框是连续的）

_________________________________________________________
|                                                                     |

|                                                                     |

|_____________________________________________________________________|

每行上都有let和right边框，最后一行上有左，右和下边框。顶行将具有左，右和上边框，但右边框不显示。

这是html代码：

<table id="workbookTable_@wb.WorkBookId" cellpadding="20" style="border-collapse: collapse">
    <thead>
        <tr>
            <th><input type="checkbox" id="@wb.WorkBookId _SelectAllCheckbox"/></th><th>Timepoint</th><th>Information</th><th>Notifications/Errors</th><th>Preview</th>
        </tr>
    </thead>
    <tbody id="@wb.WorkBookId _ErrorVisits">
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _ErrorCheckbox"/></td><td><b>Visits in Error</b></td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr>
    </tbody>
    <tbody id="@wb.WorkBookId _NotPreviouslySQCvisits">
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _NotSQCCheckbox"/></td><td><b>First Time Visits</b></td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr>
    </tbody>
    <tbody id="@wb.WorkBookId _PreSQCvisits">
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _PreSQCCheckbox"/></td><td><b>Previously Visits</b></td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr>
    </tbody>
        <!-- Loop through each visit collection to place each SQC ready visit in the desired location -->
        @{
            // Razor code to dynamically add rows to tbody elements

            <script type="text/javascript">
                if ($("#workbookTable_@wb.WorkBookId > tbody:nth-child(2)").children().length < 3) {
                    //$("#workbookTable_@wb.WorkBookId > tbody:nth-child(2)").remove();
                    $("#workbookTable_@wb.WorkBookId > tbody:nth-child(2)").hide();
                } else {
                    $("#workbookTable_@wb.WorkBookId > tbody:nth-child(2) > tr:gt(0)").css({ "border-left": "2px solid black", "border-right": "2px solid black" });
                }

                if ($("#workbookTable_@wb.WorkBookId > tbody:nth-child(3)").children().length < 3) {
                    //$("#workbookTable_@wb.WorkBookId > tbody:nth-child(3)").remove();
                    $("#workbookTable_@wb.WorkBookId > tbody:nth-child(3)").hide();
                } else {
                    $("#workbookTable_@wb.WorkBookId > tbody:nth-child(3) > tr:gt(0)").css({ "border-left": "2px solid black", "border-right": "2px solid black" });
                }

                if ($("#workbookTable_@wb.WorkBookId > tbody:nth-child(4)").children().length < 3) {
                    //$("#workbookTable_@wb.WorkBookId > tbody:nth-child(4)").remove();
                    $("#workbookTable_@wb.WorkBookId > tbody:nth-child(4)").hide();
                } else {
                    $("#workbookTable_@wb.WorkBookId > tbody:nth-child(4)  > tr:gt(0)").css({ "border-left": "2px solid black", "border-right": "2px solid black" });
                }

                $("#workbookTable_@wb.WorkBookId > tbody:nth-child(2) > tr:last").css({ "border-bottom": "2px solid black" });
                $("#workbookTable_@wb.WorkBookId > tbody:nth-child(3) > tr:last").css({ "border-bottom": "2px solid black" });
                $("#workbookTable_@wb.WorkBookId > tbody:nth-child(4) > tr:last").css({ "border-bottom": "2px solid black" });
            </script>
        }
</table>

如何让边框出现？

如果需要更多详细信息，请与我们联系。

我在IE9和Chrome中测试了它们，它们都表现出相同的东西。

Answer 1

尝试添加此内容：

$("#workbookTable_@wb.WorkBookId td").each(function(){
   if($(this).text() === ''){
     $(this).html('&nbsp;')
   }
});

在某些浏览器中，如果没有内容，空<td> s往往会崩溃，因此要么放置-之类的内容，要么放置非破坏空间 以告诉<td>不要崩溃。

Answer 2

我玩了代码并找到了解决方法。

在我的表格中，我刚添加了另一个空单元格 。

原始<tbody>：

<tbody id="@wb.WorkBookId _ErrorVisits">
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _ErrorCheckbox"/></td><td><b>Visits in Error</b></td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr>
    </tbody>

新<tbody>：

<tbody id="@wb.WorkBookId _ErrorVisits">
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _ErrorCheckbox"/></td><td><b>Visits in Error</b></td><td>&nbsp;</td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr>
    </tbody>

可能不是最佳解决方案，但现在可以使用。

带有空单元格的表格行不显示边框

2 个答案: