Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I have achieved this to some extent with the following:</p> <pre><code>$('ul#coverTabs &gt; li').live('click', function() { //$defaultCell.trigger('click'); // Removes default class applied in HTML and onClick adds 'currentTab' class $(".currentTab").removeClass("currentTab"); $(this).addClass("currentTab"); // Find number of li var tabIndex = $(this).parent().children().index ($(this)); var tabIndex = $tabIndex + 1; // Get table data $.get('/cash-plan-quote/table.xml', function(data){ $(data).find('tab').each(function() { var tab = $(this); var tabID = tab.attr('id'); if (tabIndex == tabID) { var labelTxt = '&lt;h3 class="benefitHead"&gt;' + $tab.find('name').text() + '&lt;/h3&gt;'; $('h3.benefitHead').replaceWith($(labelTxt)); }; }); }); return false; }); // Retrieve XML price info on column click $('table#benefit &gt; thead &gt; tr &gt; th, table#benefit &gt; thead &gt; tr &gt; th &gt; a, table#benefit &gt; tbody &gt; tr &gt; td').live('click', function() { // Find columns var colIndex = $(this).parent().children().index ($(this)); //alert(colIndex); // Don't retrieve data on the first column if (colIndex != 0) { // Find the active tab var currentTab = $('ul#coverTabs &gt; li').index ($('.currentTab')); var currentTab = currentTab + 1 // Get table.xml $.get('/cash-plan-quote/table.xml', function(data){ $(data).find('tab').each(function(){ var tab = $(this); var tabID = tab.attr('id'); if (currentTab == tabID){ //alert(currentTab); //alert(tabID); tab.find('level').each(function(){ var level = $(this); var levelID = level.attr('level_id'); var month = level.find('month').text(); var week = level.find('week').text(); if (colIndex == levelID){ var coverLevel = '&lt;span&gt;Level ' + levelID + ' benefits&lt;/span&gt;'; var monthCost = '&lt;h5&gt;&amp;pound;' + month + '&lt;/h5&gt;'; var weekCost = '&lt;h6&gt;&amp;pound;' + week + '&lt;/h6&gt;'; $('div.costPanel &gt; h2 &gt; span').replaceWith($(coverLevel)); $('div.costPanel &gt; div.costs &gt; h5').replaceWith($(monthCost)); $('div.costPanel &gt; div.costs &gt; h6').replaceWith($(weekCost)); }; }); }; }); }); return false; }; }); </code></pre> <p>If anyone knows how to reflect the price update when a tab changes but the column doesn't that would be great.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload