Page 1 of 1
Beginner jQuery Question
Posted: Mon Mar 02, 2015 5:11 pm
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!
Re: Beginner jQuery Question
Posted: Mon Mar 02, 2015 6:04 pm
by Sim
Seems like a complicated mess. =]
Why not just store all your HTML in one variable by appending it?
Then
$("#content").html(VAR); ??
Re: Beginner jQuery Question
Posted: Mon Mar 02, 2015 7:16 pm
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..?
Re: Beginner jQuery Question
Posted: Mon Mar 02, 2015 7:47 pm
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.
Re: Beginner jQuery Question
Posted: Mon Mar 02, 2015 8:16 pm
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...
Re: Beginner jQuery Question
Posted: Mon Mar 02, 2015 9:04 pm
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>
Re: Beginner jQuery Question
Posted: Tue Mar 03, 2015 12:31 am
by Xaleph
Hahaha nice
It`s always more fun if you discover the solution yourself.