javascript - JQuery How to add table cell to a table row - Stack Overflow

admin管理员组

文章数量:1421730

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.

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.

• javascript
• jquery
• html-table

Share Improve this question Follow edited Jul 27, 2018 at 8:08 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 26, 2014 at 23:36 terpakterpak 1,15133 gold badges1919 silver badges3838 bronze badges 3

• Both of those methods seem to work for me: jsfiddle/5gqRN. My guess is that you're trying to run the script before the DOM is ready (specifically your table hasn't been drawn yet). Make sure you are calling this code within $(document).ready() – The Maniac Commented Jun 26, 2014 at 23:42
• Thank you! This was just my test code but it verifies that the problem lies within the function calling it. Thanks again! – terpak Commented Jun 26, 2014 at 23:45
• While this is all good stuff, you should really check out knockoutjs. it is easily one of the best things I have invested time in for this type of functionality. – Zach M. Commented Jun 26, 2014 at 23:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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/d5AdX/

Are you loading jquery correctly?

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./speed/libraries/devguide#jquery

本文标签： javascriptJQuery How to add table cell to a table rowStack Overflow