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 -1 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 9 hours ago
2  
Your HTML is invalid, please see permitted content for table. –  Teemu 9 hours ago
1  
Show us your json –  Rohan Kumar 9 hours ago
    
possible duplicate of Changing table row height –  nalply 9 hours 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 9 hours ago
add comment

3 Answers

up vote 2 down vote accepted

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 9 hours ago
1  
add $( "#your_div_id" ).html('') before append() line –  Sagar Panchal 9 hours ago
    
thank you this works .and this is how i wanted to empty the html while clicking the button and show new data. thanks man, –  sarath 8 hours ago
    
@SagarPanchal he can use html() only like, $( "#your_div_id" ).html('....') –  Rohan Kumar 8 hours ago
    
With your original HTML, all these elements are appened outside of the table. –  Teemu 8 hours 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
up vote 1 down vote

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
    
<table> <tr id="name1"></tr> <tr id="address1"></tr> <tr id="age1"></tr> <tr id="status1"></tr> </table> In this code we are hard coring the <tr id> names.. like id="name1" etc.. but can i dynamically arrange those and expand tr with new values coming.. if a user has phone number and i want to add that to <tr phone="phone1"> or some way i can dynamicaaly add new tr field to the html page? –  sarath 8 hours ago
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.