how to append table to DIV

I am trying to append a table to div:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            function addStuff() {
                var html = '<table>';
                $.each(function() {
                        html += '<tr><td>' + '</td></tr>';
                        });
                html += '</table>';
                $("#divResults").append(html);

            }
        </script>
    </head>
    <body>
        <div id="divResults"></div>
        <button onclick="addStuff()">Add Stuff</button>
    </body>
</html>

But it is not working. I want to dynamically add table to the DIV block.

Answers


You want to append table to the DIV try this....

    <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">

    function addTable() 

{
    $('#divResults').append('<table width="320" border="1"><tr><td colspan="2" rowspan="1">' + " wdw" + '</td></tr><tr><td width="118">' + "sxs" + '</td><td width="186">' + "xs" + '</td></tr></table>');
}

    </script>
        </head>
    <body>
    <div id="divResults">
    </div>
    <button onclick="addTable()">Add Stuff</button>
    </body>
    </html>

each what? Your $.each method needs to loop over something. e.g.

function addStuff() {
  var words = ['one','two','three'];

  var html = '<table>';

  $.each(word, function(i, word) {
    html += '<tr><td>' + word + '</td></tr>';
  });

  html += '</table>';

  $("#divResults").append($(html));   
}

You're using $.each() but not passing any collection for it to iterate.

 // ---v---no collection?
$.each(function() {
    html += '<tr><td>' + '</td></tr>';
});

Normally you'd pass an Array or something.

$.each(["foo", "bar", "baz"], function(i, val) {
    html += '<tr><td>' + val + '</td></tr>';
});

DEMO: http://jsfiddle.net/VLfvv/


Note that this is a little different from the .each() method, which operates on a jQuery object, so the members of the object become the value.

$(".foobar").each(function(i, el) {
    // do something with the element
});

Also note that if all you want is to add this empty table, it could easily be done without jQuery.

function addStuff() {
    var html = '<table>';
    for (var i = 0; i < 10; i++)
        html += '<tr><td>' + '</td></tr>';

    html += '</table>';

    document.getElementById("divResults")
            .insertAdjacentHTML("beforeend", html);
}

Need Your Help

IntBuffer, ByteBuffer, ByteOrder and GLES20 for Android

java android

I have three fragments of code which should behave alike, or maybe not, I'm still studying how OpenGL ES is bound to Java for Android. However I really would like to know why fragment B and C are

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.