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:

functioneditTable() {
    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);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="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 tdsvar 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 samplevar 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()

});