I have following table.
I want to remove city name from column header and put it on top. Like following:
Columns with city names are dynamically added in code and can be in any number ie 0, 1 to any number.
Table structure is:
<table class="gvv1" cellspacing="0" rules="all" border="1" id="MainContent_gvActivities"
style="border-collapse: collapse;">
<tr style="background-color: buttonface;">
<th scope="col">
</th>
<th scope="col">
Cluster
</th>
<th scope="col">
Activity
</th>
<th scope="col">
Data
</th>
<th scope="col">
<b>London_Tasks</b>
</th>
<th scope="col">
<b>London_Achieved</b>
</th>
<th scope="col">
<b>Geneva_Tasks</b>
</th>
<th scope="col">
<b>Geneva_Achieved</b>
</th>
</tr>
<tr>
<td>
<input id="chkSelected_0" type="checkbox" />
</td>
<td style="width: 50px; white-space: nowrap;">
ER.
</td>
<td style="width: 50px; white-space: nowrap;">
Provision
</td>
<td style="width: 60px; white-space: nowrap;">
number
</td>
<td>
<input name="ctl00Activitiesl00" type="text" value="-1.00" />
</td>
<td>
<input name="ctl00Activitiesl01" type="text" value="-1.00" />
</td>
<td>
<input name="ctl00Activitiesl02" type="text" value="-1.00" />
</td>
<td>
<input name="ctl00Activitiesl03" type="text" value="-1.00" />
</td>
</tr>
<tr>
<td>
<input id="chkSelected_1" type="checkbox" />
</td>
<td style="width: 50px; white-space: nowrap;">
ER.
</td>
<td style="width: 50px; white-space: nowrap;">
support
</td>
<td style="width: 60px; white-space: nowrap;">
campaign (Numbers)
</td>
<td>
<input name="ctl0Activities200" type="text" value="-1.00" />
</td>
<td>
<input name="ctl0Activities201" type="text" value="-1.00" />
</td>
<td>
<input name="ctl0Activities202" type="text" value="-1.00" />
</td>
<td>
<input name="ctl0Activities203" type="text" value="-1.00" />
</td>
</tr>
</table>
You will need to change the
<th>'s
to a
<td>
first and give that row a class and style appropriately to look like the header you want
<tr class="NewClass" style="background-color: buttonface;">
<td scope="col">
</td>
<td scope="col">
Cluster
</td>
<td scope="col">
Activity
</td>
<td scope="col">
Data
</td>
<td scope="col">
<b>London_Tasks</b>
</td>
<td scope="col">
<b>London_Achieved</b>
</td>
<td scope="col">
<b>Geneva_Tasks</b>
</td>
<td scope="col">
<b>Geneva_Achieved</b>
</td>
</tr>
when the event that changes the table is triggered use .before
$('TriggerEntity').click(function(){
('.NewClass').before('<tr><th> </th><th>London</th>...');
});
First, a jsFiddle: http://jsfiddle.net/52jZC/
This uses jQuery and will dynamically work with any table of the same structure with the class name gvv1
. You can change to fit your needs:
<script>
// This function was taking from here: http://stackoverflow.com/questions/2815683/jquery-javascript-replace-tag-type
(function($) {
$.fn.replaceTagName = function(replaceWith) {
var tags = [],
i = this.length;
while (i--) {
var newElement = document.createElement(replaceWith),
thisi = this[i],
thisia = thisi.attributes;
for (var a = thisia.length - 1; a >= 0; a--) {
var attrib = thisia[a];
newElement.setAttribute(attrib.name, attrib.value);
};
newElement.innerHTML = thisi.innerHTML;
$(thisi).after(newElement).remove();
tags[i - 1] = newElement;
}
return $(tags);
};
})(window.jQuery);
$(function() {
// This formats each table w/ the class 'gvv1' as specified in your question
$('.gvv1').each(function(i, v) {
city1 = $(this).find('th:eq(4)').text().split('_');
city1 = city1[0];
var city2 = $(this).find('th:eq(6)').text().split('_');
city2 = city2[0];
$(this).find('th:eq(4)').text('Tasks');
$(this).find('th:eq(5)').text('Achieved');
$(this).find('th:eq(6)').text('Tasks');
$(this).find('th:eq(7)').text('Achieved');
$(this).find('th').replaceTagName('td');
$(this).prepend('<thead><tr><th colspan="4"> </th><th colspan="2">' + city1 + '</th><th colspan="2">' + city2 + '</th></tr></thead>');
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.