JSFiddle - React, Tailwind, and code Playground

by techbrij

HTML

<table class="grid" cellspacing="0" cellpadding="4" id="MainContent_gridSample" style="color:#333333;border-collapse:collapse;">         <tr style="color:White;background-color:#507CD1;font-weight:bold;">             <th scope="col">&nbsp;</th><th scope="col">First Name</th><th scope="col">Last Name</th><th scope="col">Email</th>         </tr><tr style="background-color:#EFF3FB;">             <td>                                     <a id="MainContent_gridSample_lnkEdit_0" title="Edit" href="javascript:__doPostBack(&#39;ctl00$MainContent$gridSample$ctl02$lnkEdit&#39;,&#39;&#39;)"><img src="../Images/show.png" /></a>                                     <a onclick="return confirm(&quot;Are you sure you want to delete this entry?&quot;);" id="MainContent_gridSample_lnkDelete_0" title="Delete" href="javascript:__doPostBack(&#39;ctl00$MainContent$gridSample$ctl02$lnkDelete&#39;,&#39;&#39;)"><img src="../Images/icon_delete.png" /></a>                                 </td><td>                                     <span id="MainContent_gridSample_lblFirstName_0">Ram</span>                                 </td><td>                                     <span id="MainContent_gridSample_lblLastName_0">Prasaad</span>                                 </td><td>                                     <span id="MainContent_gridSample_lblEmail_0">ram@techbrij.com</span>                                 </td>         </tr><tr style="background-color:White;">             <td>                                     <a id="MainContent_gridSample_lnkEdit_1" title="Edit" href="javascript:__doPostBack(&#39;ctl00$MainContent$gridSample$ctl03$lnkEdit&#39;,&#39;&#39;)"><img src="../Images/show.png" /></a>                                     <a onclick="return confirm(&quot;Are you sure you want to delete this entry?&quot;);" id="MainContent_gridSample_lnkDelete_1" title="Delete" href="javascript:__doPostBack(&#39;ctl00$MainContent$gridSample$ctl03$lnkDelete&#39;,&#39;&#39;)"><img...

JavaScript

//Created By: Brij Mohan(http://techbrij.com) 
//Demo to convert table to repeated columns table 
$(function () {
        GridViewRepeatColumns('MainContent_gridSample',3);
    });
    function GridViewRepeatColumns(gridviewid, repeatColumns) {
            //Created By: Brij Mohan(http://techbrij.com)
            if (repeatColumns < 2) {
                alert('Repeat Column must be greater than one');
                return;
            }
            var $gridview = $('#' + gridviewid);
            var $newTable = $('<table></table>');

            //Append first row in table
            var $firstRow =  $gridview.find('tr:eq(0)'),
            firstRowHTML = $firstRow.html(),
            colLength = $firstRow.children().length;

            $newTable.append($firstRow);

            //Append first row cells n times
            for (var i = 0; i < repeatColumns - 1; i++) {
                $newTable.find('tr:eq(0)').append(firstRowHTML);
            }

            while ($gridview.find('tr').length > 0) {
                var $gridRow = $gridview.find('tr:eq(0)');
               $newTable.append($gridRow);
               for (var i = 0; i < repeatColumns - 1; i++) {
                   if ($gridview.find('tr').length > 0) {
                       $gridRow.append($gridview.find('tr:eq(0)').html());
                       $gridview.find('tr:eq(0)').remove();
                   }
                   else {
                       for (var j = 0; j < colLength; j++) {
                           $gridRow.append('<td></td>');
                       }
                   }
               }
           }
            //update existing GridView
           $gridview.html($newTable.html());
        }