JQuery How to add table cell to a table row

Question

I'm trying to use jQuery to dynamically add cells to my table row.

HTML:

<table class="col-md-12" id="location-table">
    <tr id="location-row">
        <td>
            <label>
                <input type="radio" id="location-radio"  value="other" />
                Other location
            </label>
        </td>
    </tr>
</table>

JS/JQuery (I've tried both of these methods):

$('<td><label><input type="radio" id="location-radio" value="test" />Test</label></td>').appendTo('#location-row');

$('#location-row').append('<td><label><input type="radio" id="location-radio" value="test" />Test</label></td>');

All help is very much appreciated.

Answer 1

Your code should work..

$('<td><label><input type="radio" id="location-radio" value="test" />Test</label></td>').appendTo('#location-row');

$('#location-row').append('<td><label><input type="radio" id="location-radio" value="test" />Test</label></td>');

It's not the most elegant solution, but both work in jsfiddle...

http://jsfiddle.net/d5AdX/

Are you loading jquery correctly?

Answer 2

if you open the chrome dev console while on your site and submit a dollar sign($) it should tell you it's a function. if on the right it doesn't have a link to a js file with a line number(something like 'jquery.min.js:2') then jquery isn't loading on your page and you need to make sure your head script is right.

here's a link to the google cdn where you can find all the jquery scripts: https://developers.google.com/speed/libraries/devguide#jquery