Jquery - adding additional table rows to table

Question

I have been attempting to learn JQuery and this tutorial from a book really stumped me. I have simplified it somewhat so we are dealing with the most simple elements/functions possible. I have this table defined

<table id ="testtable">
<thead>
<th>Client Name</th>
<th>Appointment Dates</th>
</thead>
    <tbody id="tabledata">
        <tr>
        <td>Joe</td>
        <td>01/01/2012</td>
        </tr>
        <tr>
        <td>Joe</td>
        <td>01/01/2012</td>
        </tr>
        <[email protected]("AppointmentData", new { id = Model })-->
    </tbody>
</table>

I have a button calling a function defined as

<input type="button" value="test" onclick="OnSuccess();" />

And I have my actual Jquery here

<script type="text/javascript">
function OnSuccess() {
        $("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");
    }
</script>

What is really baffling me is the Jquery function which fails to execute. I can empty the table with .empty(), I can even perform this:

$("#tabledata").append("<td>hello</td><td>world</td>")

And it will append data but I cannot for the life of me figure out why it will not append a row. The Chrome debugger error message I get is "Uncaught TypeError: object is not a function". This only occurs when I start adding the table row tags.

Edit:

It turns out my local jQuery library was behaving oddly, maybe I modified it by accident? As soon as I referenced the google hosted library it worked

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
 <script type="text/javascript">
$(document).ready(function () {
    $('input[name="testButton"]').click(function () {
        alert('hi');
        $("#testtable tbody").append("<tr><td>hello</td><td>world</td></tr>");
    });
}); 
</script>

You're right, it does. Perhaps it's something to do with my browser configuration. — Mark Walsh
– Mark Walsh, Commented Aug 10, 2012 at 9:24

Bojangles · Accepted Answer · 2012-08-10 09:32:32Z

1

<td>s (cells) must be wrapped in a <tr> (row):

$("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");

Some browsers will do this for you, but you should explicitly wrap them anyway.

If you're using jQuery, you should really be binding your event instead of using an inline handler. For example, give your button a name and reference it in your JS:

<input type="button" value="test" name="testButton" />

JavaScript:

$(document).ready(function() {
    $('input[name="testButton"]').click(function() {
        $("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");
    });
});

Make sure the handler is being executed by putting an alert() in the anonymous function. Also make sure you're executing your jQuery inside a $(document).ready() function. Make sure you're actually including jQuery by typing $ in the developer console. It should not return undefined.

edited Aug 10, 2012 at 9:32

answered Aug 10, 2012 at 9:26

Bojangles

102k50 gold badges175 silver badges209 bronze badges

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

8 Comments

Mark Walsh Over a year ago

They are, I was just demonstrating that I could add data to the table just not rows. This works on Sirko's fiddle (see comment on my post) but it does not work locally for me (MVC3 site). Which is odd to say the least.

Mark Walsh Over a year ago

Thanks for the edit. For some reason nothing seems to work locally, and as I said, adding data and emptying the table is fine, it's just when I try to touch the rows it throws the error in bold stated in my question.

Bojangles Over a year ago

Have you tried Ctrl + F5 to refresh the cache? See if there is other JS on the page that may be interfering with this. Do you have an table sort plugins or anything?

Mark Walsh Over a year ago

I did this but I got some interesting results. I added an alert and the alert shows so the click is being wired up to the function correctly. When I checked in Firebug when executing it returned "function()" not undefined

Bojangles Over a year ago

You could try changing the table selector to #testtable tbody instead. It's unlikely to have much of an effect, but it might.

|

user1585121 · Accepted Answer · 2012-08-10 09:25:56Z

0

Ok, just try to write

$(tabledata).append("<tr><td>hello</td><td>world</td></tr>");

instead of

$("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");

answered Aug 10, 2012 at 9:25

user1585121

1 Comment

Mark Walsh Over a year ago

Same results locally, although I have mentioned that Sirko's fiddle does work.

gaurang171 · Accepted Answer · 2012-08-10 09:30:46Z

0

Onclick some not always works in Chrome so do it this way.
Try this code See demo

$("#AddRow").click(function() {
    $("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");
})

<table id ="testtable" border="1">
<thead>
<th>Client Name</th>
<th>Appointment Dates</th>
</thead>
    <tbody id="tabledata">
        <tr>
        <td>Joe</td>
        <td>01/01/2012</td>
        </tr>
        <tr>
        <td>Joe</td>
        <td>01/01/2012</td>
        </tr>
        <[email protected]("AppointmentData", new { id = Model })-->
    </tbody>
</table>

<input type="button" value="test" id="AddRow" />

answered Aug 10, 2012 at 9:30

gaurang171

9,1104 gold badges31 silver badges30 bronze badges

Collectives™ on Stack Overflow

Jquery - adding additional table rows to table

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related