47756

Remove content from table and reformat the table

I want to do

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

<img src=https://www.e-learn.cn/content/wangluowenzhang/"https://i.stack.imgur.com/yAJRe.jpg" alt="enter image description here">

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

<img src=https://www.e-learn.cn/content/wangluowenzhang/"https://i.stack.imgur.com/Bw2VL.png" alt="enter image description here">

<strong>Additional Details</strong>

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.

Answer1:

Here is a working version:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>


Answer2:

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

Answer3:

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

Recommend

  • What is the section for uninitialized global data?
  • How to add a column to a DataFrame based on a multi-index map
  • select option by text using jquery
  • How to detect when a view inside HorizontalScrollView touches another view?
  • How to replace numbers with order in (python) list
  • Windows Azure Multi Tenancy
  • How to rename file with a sequence that restarts if certain matches exist
  • Dynamic Sieve Algorithms for Prime Generation
  • How to call firefox addon function with onclick in html
  • jQuery Custom Radio Buttons not working as radio buttons
  • Index 1 is either negative or above rows count
  • Aggregating By Date in Mongodb
  • Advantage of 'one dimensional' hash over array in Perl
  • Bootstrap Carousel Next/Prev not working
  • uninitialized AudioTrack exception when I try to generate tone on 22nd time
  • keydown event triggered only once
  • Android RecyclerView Blank Space
  • Is there any way to center certain columns in table?
  • MATLAB quick find of a vector in matrix
  • Create ranking for vector of double
  • What does a hyphen at end of a term mean
  • smarty nested if condition is not working properly?
  • Copying rows in a database when rows have children
  • Passing information to server-side function in a Google Docs Add On
  • garbled css name when styling within UiBinder
  • Why doesnt this Java loop in a thread work?
  • How to open html table in xls on click of a button
  • Android app gives error “BatteryStatsImpl: reading network stats”
  • Read a local file using javascript
  • Xamarin Forms - UWP Fonts
  • MySQL WHERE-condition in procedure ignored
  • Web-crawler for facebook in python
  • What do the 'size' numbers mean in the windbg !heap output?
  • Unanticipated behavior
  • How to delete a row from a dynamic generate table using jquery?
  • trying to dynamically update Highchart column chart but series undefined
  • using HTMLImports.whenReady not working in chrome
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • java string with new operator and a literal