Change table column order and naming convention via jQuery

Question

Is there a way to rename column labels such as instead of RequestID, it is Request Id, etc and order the table columns in such that the first row is RequestID and Request Date and the rest like etc?

Please ignore the alternating color formatting.

$("#example").on("click", "a[target='tab']", function(){
  var me = $(this);
  var url = me.attr("href");
  var tabName = me.data("tabName");
  var tabIndex = parseInt(me.data("tabIndex"), 10);
  $.get(url, function(data) {
var table = $( '<table style="font-weight:bold;font-size:10pt;border-color:#ddd;" cellpadding="4" width="100%" cellspacing="0" />' ),
    tr = $( '<tr/>' ),
    td = $( '<td/>' ),
    th = $( '<th/>' );

//alert(JSON.stringify(data));
  $.each( data[ 0 ], function(key,value) {
       tr.clone().html( td.clone().html( key.bold() ) )
       .append( td.clone().html( value ) )
       .appendTo( table );
   });
    $(tabName).html(table);
    // Activate the tab once the page has loaded:
    $("#tabs").tabs("option", "active", tabIndex);
    }, 'json');
     // Prevent the browser from following the link:
    return false;
    });
   });
</script>

Thanks very much in advance for your assistance.

I have not been able to find any usable information on the web.

Answer 1

Your best bet would be to separate everything into logical tables or definition lists. You could mangle the table to look like the bottom result, but you're doing that on the fly, and is going to be pretty bespoke (and brittle) code.

I'm not sure if you have control over the rendering of the table (but it seems you do since you're using json data), but that would be where I would start looking. Failing that, you could break up sections with tr elements containing empty td elements, and add a class to the td to make them appear to be empty spaces. That's gross though, and isn't even remotely semantic.