JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div>This is the input table structure</div>
<table border="1" width="80%" id='xyz'>
    <tr><td>1</td><td></td><td></td><td>4</td></tr>
    <tr><td></td><td>2</td><td></td><td></td></tr>
    <tr><td></td><td>3</td><td>9</td><td>10</td></tr>
    <tr><td></td><td></td><td>12</td><td></td></tr>
</table>
<br/><br/><br/>
<div>This should be the output-- data in input table should move upwards accordingly </div>
<table border="1" width="80%" id='xyz'>
    <tr><td>1</td><td>2</td><td>9</td><td>4</td></tr>
    <tr><td></td><td>3</td><td>12</td><td>10</td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
</table>

JavaScript

var x = 0,y=0;
$("table tr td").each(function(){
    if($(this).text() !== ""){
       // alert($(this).text());
        y++;
    }
    x++;
});
//alert(x);//indicates how many td's 
//alert(y);//indicates how many td have values