Question

我有一个用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是一个模板，以便可以打印。要从应用中获取此信息，您必须输入＆lt;％...％＆gt;标签，标签内的东西是应用程序中文本框的ID。如果将其加载到Web浏览器中，它将仅显示标记，如果在移动应用程序中加载了标记，它将在表格中显示信息。但是，如果这些文本框或下拉列表（无论它们可能是什么）尚未填写，那么表仍将加载，但其中没有数据。因此，我需要没有数据的空白行，以便隐藏。

以下是指向我的表格及其显示方式的链接

http://screenpresso.com/=5xMwd第一张图片是它在浏览器中的显示方式，并始终显示标记。但是，如上所述，第二个图像位于应用程序内，并将显示文本框中包含的数据。正如您可以看到文本框是否为空白，有空行。

提前致谢。

Answer 1

这是一个有效的 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中的行

1 个答案: