Beginner jQuery Question

Place for questions and answers for all newcomers and new coders. This is a free for all forum, no question is too stupid and to noob.
Post Reply
Cayle
Posts: 272
Joined: Fri Jul 03, 2009 4:45 am

Beginner jQuery Question

Post by Cayle »

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
Posts: 412
Joined: Sat Dec 26, 2009 5:37 pm

Re: Beginner jQuery Question

Post by Sim »

Seems like a complicated mess. =]

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

$("#content").html(VAR); ??
oRPG Creator - Make Your Own Browser Game
oRPG Creator on Facebook
Xaleph
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

Re: Beginner jQuery Question

Post by Xaleph »

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
Posts: 272
Joined: Fri Jul 03, 2009 4:45 am

Re: Beginner jQuery Question

Post by Cayle »

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
Posts: 272
Joined: Fri Jul 03, 2009 4:45 am

Re: Beginner jQuery Question

Post by Cayle »

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
Posts: 272
Joined: Fri Jul 03, 2009 4:45 am

Re: Beginner jQuery Question

Post by Cayle »

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
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

Re: Beginner jQuery Question

Post by Xaleph »

Hahaha nice :) It`s always more fun if you discover the solution yourself.
Post Reply

Return to “Beginner Help and Support”