Table: Copy entire contents of reflow headers into reflow bold tags

(cherry picked from commit a9472ce)

Closes gh-7437
Fixes gh-7415

Author: Gabriel Schulhof

js/widgets/table.reflow.js

@@ -56,10 +56,10 @@ $.widget( "mobile.table", $.mobile.table, {
 			var cells = $( this ).jqmData( "cells" ),
 				colstart = $.mobile.getAttribute( this, "colstart" ),
 				hierarchyClass = cells.not( this ).filter( "thead th" ).length && " ui-table-cell-label-top",
-				text = $( this ).text(),
+				contents = $( this ).clone().contents(),
 				iteration, filter;
 
-				if ( text !== ""  ) {
+				if ( contents.length > 0  ) {
 
 					if ( hierarchyClass ) {
 						iteration = parseInt( this.getAttribute( "colspan" ), 10 );
@@ -69,18 +69,21 @@ $.widget( "mobile.table", $.mobile.table, {
 							filter = "td:nth-child("+ iteration +"n + " + ( colstart ) +")";
 						}
 
-						table._addLabels( cells.filter( filter ), opts.classes.cellLabels + hierarchyClass, text );
+						table._addLabels( cells.filter( filter ),
+							opts.classes.cellLabels + hierarchyClass, contents );
 					} else {
-						table._addLabels( cells, opts.classes.cellLabels, text );
+						table._addLabels( cells, opts.classes.cellLabels, contents );
 					}
 
 				}
 		});
 	},
 
-	_addLabels: function( cells, label, text ) {
+	_addLabels: function( cells, label, contents ) {
 		// .not fixes #6006
-		cells.not( ":has(b." + label + ")" ).prepend( "<b class='" + label + "'>" + text + "</b>"  );
+		cells
+			.not( ":has(b." + label + ")" )
+				.prepend( $( "<b class='" + label + "'></b>" ).append( contents ) );
 	}
 });
 

tests/unit/table/index.html

@@ -33,6 +33,11 @@
 	<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
 	<link rel="stylesheet" href="../../jqm-tests.css"/>
 
+	<style>
+.make-it-red {
+	color: red;
+}
+	</style>
 	<script src="../../swarminject.js"></script>
 	<script type="text/javascript">
 		// basic
@@ -108,7 +113,7 @@ <h1>Basic Table</h1>
 				<thead>
 					<tr>
 						<th data-priority="1">Rank</th>
-						<th data-priority="persist">Movie Title</th>
+						<th data-priority="persist">Movie <span class="make-it-red">Title</span></th>
 						<th data-priority="2">Year</th>
 						<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
 						<th data-priority="4">Reviews</th>

tests/unit/table/table_core.js

@@ -92,6 +92,9 @@
 	asyncTest( "The page should be enhanced correctly" , function(){
 		setTimeout(function() {
 			ok($('#reflow-table-test .ui-table-reflow').length, ".ui-table-reflow class added to table element");
+			deepEqual(
+				$( "#reflow-table-test .ui-table-reflow > tbody span.make-it-red" ).length, 1,
+					"span was copied from table header" );
 			start();
 		}, 800);
 	});