Remove Content From Table And Reformat The 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 Detai

Solution 1:

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>

Solution 2:

So according to your sample image, I think you need like this?

Here is the demo: 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);

Solution 3:

This is very simple : Use each to loop on tr, and if a a td's on the tr is empty hide the tr (line)

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

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

});