0

I am trying to dynamically add a table using jQuery. In this I am adding a table dynamically on the click event of button (View Budget) by using $('#ss').text('txt'). Why is it not working?

<!DOCTYPE html>
<html>
    <head>
        <title>Money Management</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width; minimum-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
        <script type="text/javascript" src="experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
        <SCRIPT language="javascript" src="final.js"></SCRIPT>
        <SCRIPT language="javascript" src="validation3.js"></SCRIPT>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
        <SCRIPT language="javascript">
        function tree()
        {
            alert("hello");
            var txt="";
            var myTable="";
            txt+="<table id='myTable' border='5'>";
            txt+="<tr>";
            txt+="<th>"Hello"</th>";
            txt+="<th>"Hello"</th>";
            txt+="</tr>";
            txt+="</table>";
            //$('#aa').tex('Hello World');
            $('#ss').text('txt');
            //document.getElementById('ss').innerHTML = "Hello World";
            //$('body').append('<table id="myTable"><tr>Hello</tr></table>');
        }
        </SCRIPT>
    </head>
    <body>
        <div id="viewT" data-role="page" data-theme="b">
            <div id="header" data-role="header">
                <h1>Monthly Budget sheet</h1>
            </div>
            <div id="content" data-role="content">
                <div id="TableV" data-role="fieldcontain">
                    <form name="budgetSheet" method="post">
                        <table>
                            <tr>
                                <td><label for="mchoose">Select Month</label></td>
                                <td><select id="mchoose" name="mchoose">
                                    <option value="" selected="selected">Select</option>
                                    <option value="January">January</option>
                                    <option value="Febraruary">Febrarury</option>
                                    <option value="March">March</option>
                                    <option value="April">April</option>
                                    <option value="May">May</option>
                                    <option value="June">June</option>
                                    <option value="July">July</option>
                                    <option value="August">August</option>
                                    <option value="September">September</option>
                                    <option value="October">October</option>
                                    <option value="November">November</option>
                                    <option value="December">December</option>
                                    </select></td>
                            </tr>
                            <tr>
                                <td><label for="Yview">Enter Desired Year</label></td>
                                <td><input id=Yview type="text" placeholder="Enter in YYYY format"/></td>
                            </tr>
                            <tr>
                                <td><label for="Uview">Select View Type</label></td>
                                <td><select id="Uview" >
                                    <option value="select">Select</option>
                                    <option value="expenses5">Expenses per Month</option>
                                    <option value="category5">Category Expenses per Month</option>
                                </select></td>
                            </tr>
                            <tr>
                            <td><input
                                 type="button"
                                 data-role="button"
                                 id="click"
                                 value="View Budget"
                                 onclick="$( tree );"></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div id="ss"></div>
        </div>
    </body>
</html>
Improve this question
2
  • What does "not working" mean for you? Describe exactly what's happening, and how it differs from what you want to happen. Commented Mar 16, 2011 at 18:45
  • I want that it should replace the div tag with the table as soon as I click the button. Only Table is not showing on the button click event. alert box is working fine. Commented Mar 16, 2011 at 18:54

2 Answers 2

Reset to default
2

At first glance it looks like you want .html() and not .text()

$('#ss').html(txt);

Also your tree() function has an error as well.

This:

txt+="<th>"Hello"</th>";
txt+="<th>"Hello"</th>";

Should be as you need to treat your content as part of your string.:

txt+="<th>Hello</th>";
txt+="<th>Hello</th>";

Update

Instead of using the onclick simply wire up your click handler with jQuery:

$("input.viewBudget").click(tree);

Note: I added a class of viewBudget to your button.

<input type="button" data-role="button" id="click" class="viewBudget" value="View Budget"/>



If you must use the onclick you just need to have it supply the onclick with the function name like so:

<input class="viewBudget" type="button" data-role="button" id="click" value="View Budget" onclick="tree();">

But also note, the function can not be declared inside of the ready() function or you will have some scoping issues.

Also:

. I want that it should replace the div tag with the table as soon as I click the button

If you want to completely remove <div id="ss"></div> you can use replaceWith()

 $('#ss').replaceWith(txt);

Code example on jsfiddle.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

still it is not working. Alert Box is working fine. But appending of table is not working.. I want that it should replace the div tag with the table as soon as I click the button. Only Table is not showing on the button click event
Thanks a lot for your help. I can see it is working on jsfiddle. But not on my server. I don't know why. This is my link on my server link. And I did same thing as you told me. But still alert box is working fine not html table. Any idea why is it happening.
Ahhh homework :) Anyways, tree() is defined on Tracker.html & budgetsheet.html. if you go directly to www-rohan.sdsu.edu/~verma1/Assignment3/budgetsheet.html it shows the table, just remove tree() from tracker and it should work.
1

You have to remove the quotes!

$('#ss').text(txt);

But I think you want to achieve the result of this:

$('#ss').html(txt);
Improve this answer

1 Comment

still it is not working dude. Alert Box is working fine. But appending of table is not working.. I want that it should replace the div tag with the table as soon as I click the button. Only Table is not showing on the button click event.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.