从表格中删除内容并重新格式化表格 [英] Remove content from table and reformat the table

问题描述

我想要做的是

我的网页以下面的格式显示表格的数据。

< a href =https://i.stack.imgur.com/yAJRe.jpg =nofollow noreferrer>

有什么方法可以删除空白值并重新格式化表格。

其他详细信息

实际表格中的任何值都可能为空（请参阅第一张图片）。我想删除特定的 Test 行（具有空白值），并通过均匀分布剩余的 Test 行来重新格式化表格值。

解决方案

这是一个工作版本： snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  function editTable（）{var idx = 0; var $ td = $（'＃prodHold td：nth-​​child（2），#prodHold td：nth-​​child（4）'）; $ td.each（function（）{if（$（this）.text（）！==）{$ td.eq（idx ++）.text（$（this）.text（））。prev（）。 text（$（this）.prev（）。text（））;}}）; $（'＃prodHold tr'）。slice（（idx + 1）>> 1）.remove（）; if（idx％2）$（'＃prodHold tr：last td'）。slice（-2）.text（）; } $（editTable）;  

< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><table id =prodHoldborder = 1>< tr><< ; TD>测试1< / TD>< TD→1< / TD>< TD> Test2的< / TD>< TD> 2'; / TD>< / TR>< TR>< TD> Test3的< / TD>< TD→1< / TD>< TD> TEST4< / TD>< TD> 2'; / TD>< / TR>< TR>< TD> TEST5< / TD>< TD>< / TD>< TD> TEST6< / TD>< TD> 2'; / TD>< / TR>< TR>< TD> TEST7< / TD>< TD→1< / TD>< TD> Test8< / TD>< TD>< / TD>< / TR>< TR>< TD> Test9< / TD>< TD→1< / TD>< TD> ; Test10< / TD>< TD> 2'; / TD>< / TR>< TR>< TD> TEST11< / TD>< TD>< / TD>< TD> TEST12< / TD> ;< TD> 2'; / TD>< / TR>< TR>< TD> Test13< / TD>< TD→1< / TD>< TD& GT; Test14< / TD>< TD> 5℃; / TD>< / TR>< TR>< TD> Test15< / TD>< TD→1< / TD>< TD> TEST16< / TD>< TD>< / TD>< / TR>< TR>< TD> Test17< / TD>< TD→1< / TD>< TD> Test18< / TD>< TD> ;< / TD>< / TR>< TR>< TD> Test19< / TD>< TD→1< / TD>< TD> Test20< / TD>< TD> 2'; / TD> ;< / tr>< / table>

I want to do

My page is displaying data of the table in below format.

Is there any way to remove the content having blank value and reformat the table as below.

Additional Details

Any values could come blank in actual table( refer first image). I want to remove that particular Test row (having blank value) and reformat the table by evenly spreading remaining Test row with values.

解决方案

Here is a working version:

function editTable() {
    var idx = 0;
    var $td = $('#prodHold td:nth-child(2), #prodHold td:nth-child(4)');
    $td.each(function () {
        if ($(this).text() !== "") {
            $td.eq(idx++).text($(this).text()).prev().text($(this).prev().text());
        }
    });
    $('#prodHold tr').slice((idx+1)>>1).remove();
    if (idx % 2) $('#prodHold tr:last td').slice(-2).text(""); 
}

$(editTable);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="prodHold" border=1>
<tr><td>Test1</td><td>1</td><td>Test2</td><td>2</td></tr>
<tr><td>Test3</td><td>1</td><td>Test4</td><td>2</td></tr>
<tr><td>Test5</td><td></td><td>Test6</td><td>2</td></tr>
<tr><td>Test7</td><td>1</td><td>Test8</td><td></td></tr>
<tr><td>Test9</td><td>1</td><td>Test10</td><td>2</td></tr>
<tr><td>Test11</td><td></td><td>Test12</td><td>2</td></tr>
<tr><td>Test13</td><td>1</td><td>Test14</td><td>5</td></tr>
<tr><td>Test15</td><td>1</td><td>Test16</td><td></td></tr>
<tr><td>Test17</td><td>1</td><td>Test18</td><td></td></tr>
<tr><td>Test19</td><td>1</td><td>Test20</td><td>2</td></tr>
</table>

这篇关于从表格中删除内容并重新格式化表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！