current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am new to JavaScript and just learning the basics of it. I am doing a sample program and crated a javascript program to show some data in a html page inside div. but it is not dynamic. I have some values like name, addess, age and status of few staff and while log in with a user name showing the above details in html page. this is a simple program.

What i want to do is, i want to dynamically increase the size of the div or table where i can display details of use like address, age, status etc.. if some user has more details then i want to add that in the html page. how can i do it ?? in home.jsp i have the following code.

<table>
    <div id="name1" width:400px;"></div>
    <div id="address1" width:400px;"></div>
    <div id="age1" width:400px;"></div>
    <div id="status1" width:400px;"></div>
</table>

this is the function i use in home.js 

function(json)
{   
    var content= $('#name1').replaceWith('<tr><td> Name: ' + json.name + '<tr><td>');
    var content= $('#address1').replaceWith('<tr><td> Name: ' + json.address + '<tr><td>');
    var content= $('#age1').replaceWith('<tr><td> Name: ' + json.age + '<tr><td>');
    var content= $('#status1').replaceWith('<tr><td> Name: ' + json.status + '<tr><td>');
}
share|improve this question
    
+1, hard worker :) –  Sagar Panchal 28 mins ago
2  
Your HTML is invalid, please see permitted content for table. –  Teemu 26 mins ago
1  
Show us your json –  Rohan Kumar 26 mins ago
    
possible duplicate of Changing table row height –  nalply 24 mins ago
    
this is my json.function hello() { //alert("entered in hello function"); var username = document.getElementById('uname').value; var password = document.getElementById('pswd').value; //alert("the password is:"+password); $.ajaxSetup ({ cache: false }); $.getJSON( 'SampleWebProject/sample.action' , { name:username, password:password //dataSource : dataSource }, –  sarath 21 mins ago
add comment

3 Answers

up vote 1 down vote accepted

First you need to change you HTML like,

<table>
    <tr id="name1"></tr>
    <tr id="address1"></tr>
    <tr id="age1"></tr>
    <tr id="status1"></tr>
</table>

And if your json is valid then you can use append() like,

$('#name1').append('<td> Name: ' + json.name + '</td>');
$('#address1').append('<td> Address: ' + json.address + '</td>');
$('#age1').append('<td> Age: ' + json.age + '</td>');
$('#status1').append('<td> Status: ' + json.status + '</td>');

Live Demo

share|improve this answer
add comment
up vote 1 down vote

First you need to do a loop and in that

You have to use append() ex.

$( "#your_div_id" ).append( "<tr><td> your_label: ' + json.your_values + '<tr><td>'" );

Reference Link

share|improve this answer
    
i used append but that time i had another problem.. after running once. that user details will be on html page. and then again when i run next time i cannot delete the old content and display new user details in the page. the new user details in showing with the old user details. i dont know how to refresh page automatically by clicking the button and delete the old content from html page. –  sarath 18 mins ago
    
add $( "#your_div_id" ).html('') before append() line –  Sagar Panchal 15 mins ago
add comment
up vote 1 down vote

You must read JQuery api Document.

url : http://api.jquery.com/append/

maybe you used .append(), .toAppend(), .prepand(), .after() etc..

code example(.after())

$('#table' tr:last).after('<tr><th width="10%">' + //your code here // + '</th></tr>');
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.