Beginner jQuery Question

Cayle · Post by **Cayle** » Mon Mar 02, 2015 5:11 pm

Hi Guys, I'm trying to do something that should be very simple, via jQuery. What I'm trying to do is get to this table, but via javascript and jQuery in particular:

Code: Select all

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='X-UA-Compatible' content='IE=edge' />
		<title>Transformed Result Set</title>
    </head>
	<body class='sapUiBody'>
		<div id='content'>
			<table id='simpleCrosstab'>
				<thead id='simpleCrosstabHeader'>
					<tr id='simpleCrosstabHRow' class='headerRow'>
						<th class='1'>1</th>
						<th class='2'>2</th>
					</tr>
				</thead>
				<tbody id='simpleCrosstabBody'>
					<tr class='dataRow' class='1'>
						<td class='1'>1</td>
						<td class='2'>2</td>
					</tr>
					<tr class='dataRow' class='2'>
						<td class='2'>2</td>
						<td class='4'>4</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

You'll see that it just has a header row, with the values 1 and two and then two data rows. The exercise is simple. I want to programmatically, via jQuery, I created the following html file, which I thought should produce that result.

Code: Select all

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='X-UA-Compatible' content='IE=edge' />
		<title>Transformed Result Set</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				$('#content').append("<table></table>").attr( "style", "width:100%" ).attr( 'id', 'simpleCrosstab');
				$('#simpleCrosstab').append("<thead></thead>").attr( 'id', 'simpleCrosstabHeader');
				$('#simpleCrosstabHeader').append("<tr></tr>").attr( 'id', 'simpleCrosstabHRow');
				$('#simpleCrosstabHRow').addClass('headerRow');
				$('#simpleCrosstab').last().append("<tbody></tbody>").attr( 'id', 'simpleCrosstabBody');
	
				for (var k = 0; k < 2; k++) {
					$('#simpleCrosstabHRow').append("<th></th>").addClass(k).text(k);
				}
				for (var i = 0; i < 2; i++) {
					$('#simpleCrosstabBody').append("<tr></tr").addClass('dataRow').addClass(i).text(i);
					for (var j = 0; j < 2; j++) {
						$('#simpleCrosstabBody > tr').last().append("<td></td>").addClass(i*j).text(i*j);
					}
				}
			});
		</script>
    </head>
	<body class='sapUiBody'>
		<div id='content'></div>
	</body>
</html>

My div actually looks like this:

Code: Select all

<div id="simpleCrosstabHRow" style="width:100%" class="headerRow">1</div>

And I'm kind´d of puzzled... :

I don't really know what I'm doing wrong. jQuery is really alien to me. Does anyone have any tips for this jQuery newbie?

Thanks!

Sim · Post by **Sim** » Mon Mar 02, 2015 6:04 pm

Seems like a complicated mess. =]

Why not just store all your HTML in one variable by appending it?
Then

$("#content").html(VAR); ??

Xaleph · Post by **Xaleph** » Mon Mar 02, 2015 7:16 pm

I dont know what you`re trying to do.. However, if I had to guess, is that you want to add a couple of <th> elements to your <thead> element and give them a class with the index number in your loop..?

Cayle · Post by **Cayle** » Mon Mar 02, 2015 7:47 pm

Xaleph wrote:I dont know what you`re trying to do.. However, if I had to guess, is that you want to add a couple of <th> elements to your <thead> element and give them a class with the index number in your loop..?

What is the goal of the extra <th> tags? They define cells that are column header cells; part of the header, instead of the body. I have two columns, so I need two <th> cells, right?

What I'm really trying to do is learn how to build up the DOM fragment and attach it to the div. I'm trying to master the basics of dynamically creating a table via jQuery. I've got a javascript library function that generates a json format and I want to render it into a table. The json has a header branch and a data branch. In the example, I've hardcoded the loops in the example to mimic the data structure, just with 2 columns and 2 rows; instead of NxN.

I really don't care if I build it up and then attach it, or if I attach each element piecewise; as above.

Cayle · Post by **Cayle** » Mon Mar 02, 2015 8:16 pm

Ok... things I've learned so far.

Code: Select all

$('#content').append("<table></table>").attr( "style", "width:100%" ).attr( 'id', 'simpleCrosstab');

I'd expected this to add a table element, with the id 'simpleCrosstab' to the div. In fact, it adds a table element as child and then reassigns the id of the div to 'simpleCrosstab'. This bizzarre jQuery method chaining points back to the div and not to the table. Ok, understood.

I'm one step closer to understanding dom manipulation with js/jQuery...

Cayle · Post by **Cayle** » Mon Mar 02, 2015 9:04 pm

Ok, nailed it! I learned to created elements first and then attach them afterwards.

This works:

Code: Select all


<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='X-UA-Compatible' content='IE=edge' />
		<title>Transformed Result Set</title>

		<!--<script type="text/javascript" src="entireResultset.js"></script>-->
		<script type="text/javascript" src="multiDimensionResultset.js"></script>
		<script type="text/javascript" src="formatTransform.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<script type="text/javascript" src="tableRefreshPlain.js"></script>
		<script>
			$(document).ready(function(){
			
				// Outline the basic structure of the table, along with header and body elements
				var table = $("<table></table>").attr( 'id', 'simpleCrosstab');
				var thead = $("<thead></thead>").attr( 'id', 'simpleCrosstabHeader');
				var thTR = $("<tr></tr>").attr( 'id', 'simpleCrosstabHRow').addClass('headerRow');
				var tbody = $("<tbody></tbody>").attr( 'id', 'simpleCrosstabBody');
				$("#content").append(table);
				$('#simpleCrosstab').append(thead);
				$('#simpleCrosstabHeader').append(thTR);
				$('#simpleCrosstab').append(tbody);
			
				// Fill the header
				for (var k = 0; k < 2; k++) {
					var th = $("<th></th>").addClass('' + k).text(k);
					$('#simpleCrosstabHRow').append(th);
				}
				
				//Fill the body
				for (var i = 1; i < 3; i++) {
					var tr = $("<tr></tr>").addClass('' + i).attr( 'id', 'row_' + i);
					$('#simpleCrosstabBody').append(tr);
					for (var j = 1; j < 3; j++) {
						var td = $("<td></td>").addClass('' + (i*j)).text(i*j);
						var parentRow = 'row_' + i;
						$('#' + parentRow).append(td);
					}
				}
			});
		</script>
    </head>
	<body class='sapUiBody'>
		<div id='content'></div>
	</body>
</html>

Xaleph · Post by **Xaleph** » Tue Mar 03, 2015 12:31 am

Hahaha nice

It`s always more fun if you discover the solution yourself.

Beginner jQuery Question

Beginner jQuery Question

Re: Beginner jQuery Question

Re: Beginner jQuery Question

Re: Beginner jQuery Question

Re: Beginner jQuery Question

Re: Beginner jQuery Question

Re: Beginner jQuery Question