html - 隐藏表格 HTML 中的行

标签 html css html-table rows server-side

我有一个用数据填充的 HTML 表格。但是，如果某些数据未填写(并非总是如此)，则表格将显示，但行为空。我试图隐藏这些空行。我已经尝试了一些东西，但似乎还没有任何效果，有人有什么想法吗？

这是我的表格 HTML 代码:

    <table style= width: 1300px;" border="1" cellpadding="1" cellspacing="0">
    <tbody>
    <tr>
    <td colspan="1" rowspan="2" style="width: 75px; text-align: center;"><span style="font-size:              16px;">Sample Number</span></td>
    <td colspan="1" rowspan="2" style="width: 50px; text-align: center;"><span style="font-size: 16px;">Sample Type</span></td>
    <td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Pump No</span></td>
    <td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Cowl No</span></td>
    <td colspan="1" rowspan="2" style="width: 200px; text-align: center;"><span style="font-size: 16px;">Sample Location</span></td>
    <td colspan="2" rowspan="1" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Sampling Times</span></td>
    <td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Duration (mins)</span></td>
    <td colspan="2" rowspan="1" style="text-align: center;"><span style="font-size: 16px;">Flow
    Rates (l/min)</span></td>
   <td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Mean<br>
   Flow Rate (l/min)</span></td>
   <td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size:     16px;">Sample Volume (litres)</span></td>
   <td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Fibres Counted</span></td>
   <td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Graticule Fields</span></td>
   <td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Limit of Detection (f/ml)</span></td>
   <td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Calculated Result (f/ml)</span></td>
   <td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Recorded Result (f/ml)</span></td>
   </tr>
   <tr>
   <td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Start</span></td>
   <td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Finish</span></td>
   <td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Start</span></td>
   <td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Finish</span></td>
   </tr>
   <tr>
   <td><span style="font-size: 16px;"><%SampleNumber_1%></span></td>
   <td><span style="font-size: 16px;"><%TypeofTest_1%></span></td>
   <td><span style="font-size: 16px;"><%PumpNo_1%></span></td>
   <td><span style="font-size: 16px;"><%CowlNo_1%></span></td>
   <td><span style="font-size: 16px;"><%SampleLocation_1%></span></td>
   <td><span style="font-size: 16px;"><%SampleStart_1%></span></td>
   <td><span style="font-size: 16px;"><%SampleFinish_1%></span></td>
   <td><span style="font-size: 16px;"><%SampleDuration_1%></span></td>
   <td><span style="font-size: 16px;"><%FlowRateStart_1%></span></td>
   <td><span style="font-size: 16px;"><%FlowRateFinish_1%></span></td>
   <td><span style="font-size: 16px;"><%FlowRatelminMean_1%></span></td>
   <td><span style="font-size: 16px;"><%SampleVolumelitres_1%></span></td>
   <td><span style="font-size: 16px;"><%FibresCount_1%></span></td>
   <td><span style="font-size: 16px;"><%GraticuleFields_1%></span></td>
   <td><span style="font-size: 16px;"><%Limit_1%></span></td>
   <td><span style="font-size: 16px;"><%CalculatedResult_m1%></span></td>
   <td><span style="font-size: 16px;"><%ReportedResult_1%></span></td>
   </tr>
   <tr>
   <td><span style="font-size: 16px;"><%SampleNumber_2%></span></td>
   <td><span style="font-size: 16px;"><%TypeofTest_2%></span></td>
   <td><span style="font-size: 16px;"><%PumpNo_2%></span></td>
   <td><span style="font-size: 16px;"><%CowlNo_2%></span></td>
   <td><span style="font-size: 16px;"><%SampleLocation_2%></span></td>
   <td><span style="font-size: 16px;"><%SampleStart_2%></span></td>
   <td><span style="font-size: 16px;"><%SampleFinish_2%></span></td>
   <td><span style="font-size: 16px;"><%SampleDuration_2%></span></td>
   <td><span style="font-size: 16px;"><%FlowRateStart_2%></span></td>
   <td><span style="font-size: 16px;"><%FlowRateFinish_2%></span></td>
   <td><span style="font-size: 16px;"><%FlowRatelminMean_2%></span></td>
   <td><span style="font-size: 16px;"><%SampleVolumelitres_2%></span></td>
   <td><span style="font-size: 16px;"><%FibresCount_2%></span></td>
   <td><span style="font-size: 16px;"><%GraticuleFields_2%></span></td>
   <td><span style="font-size: 16px;"><%Limit_2%></span></td>
   <td><span style="font-size: 16px;"><%CalculatedResult_m2%></span></td>
   <td><span style="font-size: 16px;"><%ReportedResult_2%></span></td>
   </tr>

例如，假设只有第一行已填写，因此不需要显示第二行。

编辑

使用移动应用程序填充表格，您可以在其中插入数据。然后 HTML 是一个模板，以便可以打印。要从应用程序中获取此信息，您必须放入 <% ... %> 标签，例如，标签内的内容是应用程序中文本框的 ID。如果将其加载到网络浏览器中，它将仅显示标签，如果将其加载到移动应用程序中，它将显示表格中的信息。但是，如果这些文本框或下拉菜单(无论它们是什么)尚未填写，则表格仍将加载，但其中没有数据。因此，我需要隐藏没有数据的空白行。

这是我的表格的链接及其显示方式

http://screenpresso.com/=5xMwd第一张图片是它在浏览器中的显示方式，并且始终显示标签。然而，第二张图片位于应用程序内，并将显示文本框中包含的数据，如上所述。如您所见，如果文本框为空白，则存在空白行。

提前致谢。

最佳答案

这是一个有效的 DEMO

CSS:

table, table td {border: 1px solid #f00; height: 20px;}

jQuery

    $('#start').click(function() {
        var rows = $('table').find('tr');
        $.each(rows, function(idx, trobj) {
            var hasvalue = false;
            var spans = $(this).find('td span');
            $.each(spans, function(spanidx, spanobj) {
                //console.log($(obj).html() );
                if ($(spanobj).html() != '') {
                    hasvalue = true;
                }
            });
            if (!hasvalue) {
                $(this).hide();
            }
        });
    });

测试 HTML

<table style= "width: 1300px; border-collapse: collapse;" border="1" cellpadding="1" cellspacing="0">
<tbody>
    <tr>
        <td colspan="1" rowspan="2" style="width: 75px; text-align: center;"><span style="font-size:              16px;">Sample Number</span></td>
        <td colspan="1" rowspan="2" style="width: 50px; text-align: center;"><span style="font-size: 16px;">Sample Type</span></td>
        <td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Pump No</span></td>
        <td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Cowl No</span></td>
        <td colspan="1" rowspan="2" style="width: 200px; text-align: center;"><span style="font-size: 16px;">Sample Location</span></td>
        <td colspan="2" rowspan="1" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Sampling Times</span></td>
        <td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Duration (mins)</span></td>
        <td colspan="2" rowspan="1" style="text-align: center;"><span style="font-size: 16px;">Flow
                Rates (l/min)</span></td>
        <td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Mean<br>
                Flow Rate (l/min)</span></td>
        <td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size:     16px;">Sample Volume (litres)</span></td>
        <td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Fibres Counted</span></td>
        <td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Graticule Fields</span></td>
        <td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Limit of Detection (f/ml)</span></td>
        <td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Calculated Result (f/ml)</span></td>
        <td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Recorded Result (f/ml)</span></td>
    </tr>
    <tr>
        <td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Start</span></td>
        <td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Finish</span></td>
        <td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Start</span></td>
        <td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Finish</span></td>
    </tr>
    <tr>
        <td><span style="font-size: 16px;"><%SampleNumber_1%></span></td>
        <td><span style="font-size: 16px;"><%TypeofTest_1%></span></td>
        <td><span style="font-size: 16px;"><%PumpNo_1%></span></td>
        <td><span style="font-size: 16px;"><%CowlNo_1%></span></td>
        <td><span style="font-size: 16px;"><%SampleLocation_1%></span></td>
        <td><span style="font-size: 16px;"><%SampleStart_1%></span></td>
        <td><span style="font-size: 16px;"><%SampleFinish_1%></span></td>
        <td><span style="font-size: 16px;"><%SampleDuration_1%></span></td>
        <td><span style="font-size: 16px;"><%FlowRateStart_1%></span></td>
        <td><span style="font-size: 16px;"><%FlowRateFinish_1%></span></td>
        <td><span style="font-size: 16px;"><%FlowRatelminMean_1%></span></td>
        <td><span style="font-size: 16px;"><%SampleVolumelitres_1%></span></td>
        <td><span style="font-size: 16px;"><%FibresCount_1%></span></td>
        <td><span style="font-size: 16px;"><%GraticuleFields_1%></span></td>
        <td><span style="font-size: 16px;"><%Limit_1%></span></td>
        <td><span style="font-size: 16px;"><%CalculatedResult_m1%></span></td>
        <td><span style="font-size: 16px;"><%ReportedResult_1%></span></td>
    </tr>
    <tr>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
        <td><span style="font-size: 16px;"></span></td>
    </tr>
</table>
<button id="start">START</button>

编辑:

好的，基于 OP 编辑​​，这是另一个 jsfiddle:http://jsfiddle.net/b7pexhh6/8/

关于html - 隐藏表格 HTML 中的行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26760626/

上一篇：html - 使用angularjs指令将绝对div与另一个div的右边缘对齐

下一篇：javascript - 生涩的动画 - Jquery/CSS3

相关文章：

jquery - jQ Mobile改变特定按钮的边框半径

javascript - 为什么 firefox 会在 codepen 中白化页面？

html - 表格列宽与包含的数据一样窄？

javascript - 在不使用 Id 的情况下通过 javascript 应用样式

css - typo3 rootline 不起作用，在子页面上父级不是 ACT

html - 无法在CSS中隐藏图像边框

html - 如何给表格 td 添加边距

html - 在 div 中垂直居中 ul

HTML 表 CSS？

javascript - 如果单击，则显示每个用户的表行

©2024 IT工具网  联系我们