从表中删除内容并重新格式化表

Question

我想做

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

有没有办法删除具有空白值的内容并重新格式化表格如下。

其他详细信息

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

Answer 1

所以根据你的样本图片，我认为你需要这样吗？

以下是演示：https://jsfiddle.net/e1yfL1po/2/

的jQuery

// remove blank td pair
$('#tableID tr td').each(function() {
    if ($(this).text() == ''){
       $(this).prev('td').remove();
       $(this).remove();
    }
});

// get array of all tds
var tds = $('#tableID tr td').length;
var td_arr = [];
for(var i=0; i<tds; i++){
    if($('#tableID tr td').eq(i).text()!== ''){
        td_arr.push($('#tableID tr td').eq(i).html());
    }
}

// prepare table, wrap tr for every 4 tds, *according to your table sample
var e = '<tr>';
for(var i=1; i<=td_arr.length; i++){
    if(i%4 == 0){
        e = e + '<td>' + td_arr[i-1] + '</td></tr><tr>';
    }
    else{
        e = e + '<td>' + td_arr[i-1] + '</td>';
    } 
}
// append
$('#tableID').html(e);

Answer 2

这是一个工作版本：

＆＃13;

＆＃13;

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);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这很简单： 使用每个循环tr，如果tr上的td为空，则隐藏tr（行）

$('table tr').each(function(){

    if($('td:empty',this).length)
        $(this).hide(); //or $(this).remove()

});