jQuery Как добавить ячейку таблицы в строку таблицы

#javascript #jquery #html-table

#javascript #jquery #html-таблица

Вопрос:

Я пытаюсь использовать jQuery для динамического добавления ячеек в строку моей таблицы.

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 (я пробовал оба этих метода):

 $('<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>');

Вся помощь очень ценится.

1. Оба этих метода, похоже, работают для меня: jsfiddle.net/5gqRN . Я предполагаю, что вы пытаетесь запустить скрипт до того, как DOM будет готов (в частности, ваша таблица еще не была нарисована). Убедитесь, что вы вызываете этот код внутри $(document).ready()

2. Спасибо! Это был всего лишь мой тестовый код, но он проверяет, что проблема заключается в вызывающей его функции. Еще раз спасибо!

3. Хотя все это хорошо, вам действительно стоит проверить knockoutjs.com это, безусловно, одна из лучших вещей, в которые я вложил время для такого типа функциональности.

Ответ №1:

Ваш код должен работать..

 $('<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>');

Это не самое элегантное решение, но оба работают в jsfiddle…

http://jsfiddle.net/d5AdX/

Правильно ли вы загружаете jquery?

Ответ №2:

если вы откроете консоль разработчика Chrome, находясь на своем сайте, и введете знак доллара ($), он должен сообщить вам, что это функция. если справа нет ссылки на js-файл с номером строки (что-то вроде ‘jquery.min.js: 2’), то jquery не загружается на вашей странице, и вам нужно убедиться, что ваш головной скрипт правильный.

вот ссылка на Google cdn, где вы можете найти все скрипты jquery: https://developers.google.com/speed/libraries/devguide#jquery