//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());
}
<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"> </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('ctl00$MainContent$gridSample$ctl02$lnkEdit','')"><img src="../Images/show.png" /></a> <a onclick="return confirm("Are you sure you want to delete this entry?");" id="MainContent_gridSample_lnkDelete_0" title="Delete" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl02$lnkDelete','')"><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">[email protected]</span> </td> </tr><tr style="background-color:White;"> <td> <a id="MainContent_gridSample_lnkEdit_1" title="Edit" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl03$lnkEdit','')"><img src="../Images/show.png" /></a> <a onclick="return confirm("Are you sure you want to delete this entry?");" id="MainContent_gridSample_lnkDelete_1" title="Delete" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl03$lnkDelete','')"><img src="../Images/icon_delete.png" /></a> </td><td> <span id="MainContent_gridSample_lblFirstName_1">Shyam1</span> </td><td> <span id="MainContent_gridSample_lblLastName_1">Sharma</span> </td><td> <span id="MainContent_gridSample_lblEmail_1">[email protected]</span> </td> </tr><tr style="background-color:#EFF3FB;"> <td> <a id="MainContent_gridSample_lnkEdit_2" title="Edit" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl04$lnkEdit','')"><img src="../Images/show.png" /></a> <a onclick="return confirm("Are you sure you want to delete this entry?");" id="MainContent_gridSample_lnkDelete_2" title="Delete" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl04$lnkDelete','')"><img src="../Images/icon_delete.png" /></a> </td><td> <span id="MainContent_gridSample_lblFirstName_2">Mohan</span> </td><td> <span id="MainContent_gridSample_lblLastName_2">Balecha</span> </td><td> <span id="MainContent_gridSample_lblEmail_2">[email protected]</span> </td> </tr><tr style="background-color:White;"> <td> <a id="MainContent_gridSample_lnkEdit_3" title="Edit" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl05$lnkEdit','')"><img src="../Images/show.png" /></a> <a onclick="return confirm("Are you sure you want to delete this entry?");" id="MainContent_gridSample_lnkDelete_3" title="Delete" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl05$lnkDelete','')"><img src="../Images/icon_delete.png" /></a> </td><td> <span id="MainContent_gridSample_lblFirstName_3">Shashi</span> </td><td> <span id="MainContent_gridSample_lblLastName_3">Kant</span> </td><td> <span id="MainContent_gridSample_lblEmail_3">[email protected]</span> </td> </tr><tr style="background-color:#EFF3FB;"> <td> <a id="MainContent_gridSample_lnkEdit_4" title="Edit" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl06$lnkEdit','')"><img src="../Images/show.png" /></a> <a onclick="return confirm("Are you sure you want to delete this entry?");" id="MainContent_gridSample_lnkDelete_4" title="Delete" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl06$lnkDelete','')"><img src="../Images/icon_delete.png" /></a> </td><td> <span id="MainContent_gridSample_lblFirstName_4">Rajesh1</span> </td><td> <span id="MainContent_gridSample_lblLastName_4">Jain</span> </td><td> <span id="MainContent_gridSample_lblEmail_4">[email protected]</span> </td> </tr><tr style="background-color:White;"> <td> <a id="MainContent_gridSample_lnkEdit_5" title="Edit" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl07$lnkEdit','')"><img src="../Images/show.png" /></a> <a onclick="return confirm("Are you sure you want to delete this entry?");" id="MainContent_gridSample_lnkDelete_5" title="Delete" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl07$lnkDelete','')"><img src="../Images/icon_delete.png" /></a> </td><td> <span id="MainContent_gridSample_lblFirstName_5">Ajay</span> </td><td> <span id="MainContent_gridSample_lblLastName_5">Soni</span> </td><td> <span id="MainContent_gridSample_lblEmail_5">[email protected]</span> </td> </tr><tr style="background-color:#EFF3FB;"> <td> <a id="MainContent_gridSample_lnkEdit_6" title="Edit" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl08$lnkEdit','')"><img src="../Images/show.png" /></a> <a onclick="return confirm("Are you sure you want to delete this entry?");" id="MainContent_gridSample_lnkDelete_6" title="Delete" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl08$lnkDelete','')"><img src="../Images/icon_delete.png" /></a> </td><td> <span id="MainContent_gridSample_lblFirstName_6">Aashish</span> </td><td> <span id="MainContent_gridSample_lblLastName_6">Suneja</span> </td><td> <span id="MainContent_gridSample_lblEmail_6">[email protected]</span> </td> </tr><tr style="background-color:White;"> <td> <a id="MainContent_gridSample_lnkEdit_7" title="Edit" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl09$lnkEdit','')"><img src="../Images/show.png" /></a> <a onclick="return confirm("Are you sure you want to delete this entry?");" id="MainContent_gridSample_lnkDelete_7" title="Delete" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl09$lnkDelete','')"><img src="../Images/icon_delete.png" /></a> </td><td> <span id="MainContent_gridSample_lblFirstName_7">Atal</span> </td><td> <span id="MainContent_gridSample_lblLastName_7">Jhagir</span> </td><td> <span id="MainContent_gridSample_lblEmail_7">[email protected]</span> </td> </tr><tr style="background-color:#EFF3FB;"> <td> <a id="MainContent_gridSample_lnkEdit_8" title="Edit" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl10$lnkEdit','')"><img src="../Images/show.png" /></a> <a onclick="return confirm("Are you sure you want to delete this entry?");" id="MainContent_gridSample_lnkDelete_8" title="Delete" href="javascript:__doPostBack('ctl00$MainContent$gridSample$ctl10$lnkDelete','')"><img src="../Images/icon_delete.png" /></a> </td><td> <span id="MainContent_gridSample_lblFirstName_8">test1</span> </td><td> <span id="MainContent_gridSample_lblLastName_8">test2</span> </td><td> <span id="MainContent_gridSample_lblEmail_8">[email protected]</span> </td> </tr> </table>