JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<script src="http://192.168.10.9:8080/MDASReportLink/exporttable/jquery.base64.js"></script>
<script src="http://66.85.142.42/BescomEMS/smsbootstrap/export/tableExport.js"></script>
<div class="col-xs-4 text-left"> <a href="javascript:void(0)" class="btn btn-bg btn-primary btn-sm excel">Export</a>

</div>
<br/>
<table id="dtcloadunbalancedreportTable" cellpadding="0" cellspacing="0" style="font-size: 12px;" border="1">
    <thead>
        <tr>
            <th class="text-center ReportHeader">Sl. No.</th>
            <th class="text-center  ReportHeader">Division</th>
            <th class="text-center  ReportHeader">Sub Division</th>
            <th class="text-center  ReportHeader">Section</th>
            <th class="text-center  ReportHeader">Station</th>
            <th class="text-center  ReportHeader">Feeder</th>
            <th class="text-center ReportHeader">TIMS
                <br>Code</th>
            <th class="text-center ReportHeader">Location
                <br>Name</th>
            <th class="text-center ReportHeader">KVA
                <br>Rating</th>
            <th class="text-center ReportHeader">Meter
                <br>Sl No</th>
            <th colspan="3" class="text-center ReportHeader">Maximum Voltage(P-N) in
                <br>volts</th>
            <th class="text-center ReportHeader " style="display:none;">   </th>
            <th class="text-center ReportHeader " style="display:none;">   </th>
            <th colspan="3" class="text-center ReportHeader">Minimum Voltage(P-N) in
                <br>volts</th>
            <th class="text-center ReportHeader " style="display:none;">   </th>
            <th class="text-center ReportHeader " style="display:none;">   </th>
            <th class="text-center ReportHeader">MD in
                <br>KVA</th>
            <th colspan="4" class="text-center ReportHeader">Current in Amps at Peak KVA</th>
            <th class="text-center ReportHeader " style="display:none;">   </th>
         ...

CSS

.deleted {
     display: none;
 }
 .hidden {
     display: none;
 }

JavaScript

$('#dtcloadunbalancedreportTable td:nth-child(2)').each(function () {
	 		if ($(this).is(':visible')) {
	 			for (
	 				var txt = $(this).text(), count = 1, next = $(this).parent().next().find('td:nth-child(2)');
	 				$(next).text() == txt;
	 				next = $(next).parent().next().find('td:nth-child(2)')) {
	 				count++;
	 				$(next).hide();
	 			}
	 			$(this).attr('rowspan', count);
	 		}
	 	});

$('#dtcloadunbalancedreportTable td:nth-child(3)').each(function () {
	 		if ($(this).is(':visible')) {
	 			for (
	 				var txt = $(this).text(), count = 1, next = $(this).parent().next().find('td:nth-child(3)');
	 				$(next).text() == txt;
	 				next = $(next).parent().next().find('td:nth-child(3)')) {
	 				count++;
	 				$(next).hide();
	 			}
	 			$(this).attr('rowspan', count);
	 		}
	 	});

$('#dtcloadunbalancedreportTable td:nth-child(4)').each(function () {
	 		if ($(this).is(':visible')) {
	 			for (
	 				var txt = $(this).text(), count = 1, next = $(this).parent().next().find('td:nth-child(4)');
	 				$(next).text() == txt;
	 				next = $(next).parent().next().find('td:nth-child(4)')) {
	 				count++;
	 				$(next).hide();
	 			}
	 			$(this).attr('rowspan', count);
	 		}
	 	});

$('#dtcloadunbalancedreportTable td:nth-child(5)').each(function () {
	 		if ($(this).is(':visible')) {
	 			for (
	 				var txt = $(this).text(), count = 1, next = $(this).parent().next().find('td:nth-child(5)');
	 				$(next).text() == txt;
	 				next = $(next).parent().next().find('td:nth-child(5)')) {
	 				count++;
	 				$(next).hide();
	 			}
	 			$(this).attr('rowspan', count);
	 		}
	 	});

$('#dtcloadunbalancedreportTable td:nth-child(6)').each(function () {
	 		if ($(this).is(':visible')) {
	 			for (
	 				var txt = $(this).text(), count = 1, next = $(this).parent().next().find('td:nth-child(6)');
	 				$(next).text() == txt;
	 				next = $(next).parent().next().find('td:nth-child(6)')) {
	 				count++;
	 				$(next).hide();
	 			}
	 			$(this).attr('rowspan', count);
	...