/    Sign up×
Community /Pin to ProfileBookmark

Use jQuery to write tables

Dear all,

I am totally new to jQuery and no good knowledge on javascript. However, I was assigned a task, to convert a javascript program to jQuery due to compatibility problem on browsers like Chrome and Safari.

My program originally use javascript xmlDoc.load(‘….’) to read XML file, and then use document.write statement to write html tables on client side. Something like this (the sample below may got lots of syntax problem as I jut want to show the major part):

[CODE]
document.write(‘<TABLE >’);
var y=x[0].getElementsByTagName(‘NoOfRows’);
for (i=0; i<=noofrows-1 && i<=y.length-1; i++){
document.write(‘ <TD>’);
document.write(z[j].getElementsByTagName(‘RecordDetails’)[0].childNodes[0].nodeValue;
}[/CODE]

Now I changed to use jQuery, I can read the XML file elements. However, when I try to write the table, it failed:

[CODE]$(document).ready(function(){
$.ajax({
type: “GET”,
url: “../tdata/01DATA.XML”,
dataType: “xml”,
success: function(xml) {
$(‘.P1’).append(‘<table><tr>’);
$(‘.P1’).append(‘<td ALIGN=CENTER><B>Heading 1</B></FONT></TD>’);
$(xml).find(‘MYDATA’).each(function(){
var noofcremator = $(this).find(“NOOFDATA”).text();
var noofsession = $(this).find(“NOOFSESSION”).text();
for (i=1; i<=5; i++){
$(‘.P1’).append(‘<TD><B> Session ‘ + i + ‘</B></FONT></TD>’);
}
}); //close each(
$(‘.P1’).append(‘</tr></table>’);
}
});
});
[/CODE]

After surf on the net, I find that when I use two statement of .append, the TABLE Tag will not function as I expected.
e.g.

[CODE] $(“p”).append(” <Table><TD>TEST 1</TD>”);
$(“p”).append(” <TD>TEST 2</TD></Table>”);[/CODE]

is different from
$(“p”).append(” <Table><TD>TEST 1</TD> <TD>TEST 2</TD></TABLE>”);

Is there any way I can build a table using separated append statements (or any statement in jQuery)?

This maybe a totally newbie question but thank you very much if for any input you can provide.

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@PadonakJul 27.2010 — [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Jquery table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div#div_c{text-align:center;padding-top:20px;padding-bottom:20px;}
</style>
<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
var howmany = 50; // how many rows
$('#div_c').append('<table id="my_tab"><tbody></tbody></table>');
$('#my_tab tbody').append('<tr><td colspan="2" id="hdr">JQ table</td></tr>');
$('#my_tab').attr('align','center').attr('width','50%').attr('border','1').attr('cellpadding','3').attr('cellspacing','3');
for(var i = 0; i < howmany; i++){$('#my_tab tbody').append('<tr><td>test '+(i+1)+'</td><td>test '+(i+1)+'</td></tr>');}
$('#hdr').css('font-weigth','bold').css('font-size','24px').css('letter-spacing','5');
});
//-->
</script>
</head>
<body>
<div id="div_c"></div>
</body>
</html>[/CODE]
×

Success!

Help @vincentlow spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...