Can anyone tell me why this javascript function call isn't working?

Here's a jsFiddle

Fiddle

JavaScript:

 function createTable(tbody, rows, cols) {
     if (tbody == null || tbody.length < 1) return;
     for (var r = 1; r <= rows; r++) {
         var trow = $("<tr>");
         for (var c = 1; c <= cols; c++) {
             $("<td>")
                     .text("Table")
                     //.createElement("div")
                     .appendTo(trow);
         }
         trow.appendTo(tbody);
     }
 }   


$(document).ready(function() {
  createTable($("#table"), 4, 4);
});

HTML:

<table id="table" border="1">
    <tbody>
    </tbody>
</table>
----------------------------
<table id="table1" border="1">
    <tbody>
    </tbody>
</table>

<br>&开发者_JS百科lt;br>
Select table size?
<form>
    <input type="button" value="4X4" onclick="createTable('table1', 4, 4)">
</form>

The JavaScript function called by JavaScript works fine(table), but the JavaScript function called by the OnClick isn't working(table1). Can you tell me why?

Also does anyone know why the createElement("div") isn't working either?

Fixed http://jsfiddle.net/7WD8v/6/

You needed to load you script in the head to have it available for that input

http://jsfiddle.net/7WD8v/12/

You have to use no wrap in the fiddle and jQuery doesn't have createElement method (as you are calling it as a jQuery method). You may use .append()

Fiddle

you need to pass the object on the onclick

createTable($('#table1'), 4, 4)

Because on OnClick you pass a String as first argument value and in js call a collection of elements is passed.