Как добавить переключатель в таблицу HTML с помощью jquery

Question

Я использую Jquery $ .post для получения строкового массива из SQL на основе выбора из раскрывающегося списка, который я затем читаю в таблицу HTML. Каждый раз, когда они меняют выбор в раскрывающемся списке, он очищает все таблицы, кроме строки заголовка, и загружает новые значения. Это работает нормально.

Это просто базовая таблица из трех строк;уникальный идентификатор, значение и число, показанные в виде строки. Каждая запись имеет все 3, поэтому я просто использую цикл for со счетчиками для контроля начала / конца строк. В моей форме его заголовок определяется так:

    <div class="col-md-10">
            <table id="attEditTable" style="width:100%" cellpadding="0" cellspacing="0" border="1" class="row">
                <tbody>
                    <tr style="background-color: #F0F8FF;">
                        <th></th>
                        <th>Attribute Value</th>
                        <th>Item Count</th>
                    </tr>
                </tbody>
            </table>
        </div>

Я сейчас пытаюсь изменить 1-ю ячейку каждой строки на радиокнопку со значением, установленным на значение, которое я отображал в этой ячейке.

В настоящее время, когда отображаемое представление показывает [объект объекта] в первой ячейке каждой строки вместо переключателя.

Извините, я новичок в этом, не обучаясь Java илиMVC - так что надеемся просто на простую синтаксическую проблему ...

Попытка этой базовой вернула синтаксическую ошибку при вводе:

    <input type="radio" name="SelERow" value='+editValues[i]+' />

Я тоже пробовал (оба имели одинаковый результат [objectОбъект]):

    $("input:radio[name=\"SelERow\"][value="+editValues[i]+"]")
    $('<input type="radio" id="ERow" name="SelERow" value='+editValues[i]+' />')

В соответствии с предложениями Дэвида, которые я сейчас тоже попробовал (оба не привели ни к данным, ни к ошибке):

    '<input type="radio" name="SelERow" value='+editValues[i]+' />'
    var tblCell = $('<td />');  // create an empty <td> node
    if (x == 1 || (x - 1) % 3 == 0) {
        var input = $('<input />', { type: 'radio', id: 'ERow', name: 'SelERow', value: editValues[i] });
        tblCell.append(input);  // append an <input> node to the <td> node
     } else {
        tblCell.text(editValues[i]);  // or just set the text of the <td> node
     }

Со вторым я также изменилстрока: tblRow = tblRow + "";вместо этого tblRow = tblRow + tblCell + "";

Текущий сценарий

<script>
    $(function () {
        $("#EditAttributeName").change(function () {
            var selectedName = $(this).val();

            // Delete all but first row of table
            $("#attEditTable").find($("tr")).slice(1).remove();

            var url2 = "EditDD2changed?selectedName=" + selectedName;

            $.post(url2, function (editValues) {

                var x = 0;
                var tblRow = "<tr>";
                for (var i=0; i < editValues.length; i++)
                {
                    x++;
                    if (x == 1 || (x - 1) % 3 == 0) {
                        tblRow = tblRow + "<td>" + $('input:radio[name="SelERow"][value="' + editValues[i] + '"]');
                    }
                    else {
                        tblRow = tblRow + "<td>" + editValues[i] + "</td>";
                    }

                    if (x % 3 == 0)
                    {
                        tblRow = tblRow + "</tr>";
                        $("#attEditTable").append(tblRow);
                        tblRow = "<tr>";
                    }
                }
            })
        });
    });
</script>

Консоль не показывает сообщений об ошибках.

Answer 1

Похоже, это близко. Для начала, есть важное различие в двух попытках. Это синтаксис селектора jQuery:

$('input:radio[name="SelERow"][value="' + editValues[i] + '"]')

То есть не создает <input/>, а ищет * <input/>. Что не то, что вы хотите в этом случае. Другая ваша попытка использует синтаксис для создания элемента:

$('<input type="radio" id="ERow" name="SelERow" value=editValues[i] />')

Хотя проблема здесь (которая могла быть просто ошибкой копирования / вставки при публикации вопроса?), Но для полноты и для будущих читателей это может какхорошо быть адресованным ...), кажется, что editValues[i] является просто частью строки. Вы хотите объединить это в строку. Есть несколько способов сделать это. Либо прямая конкатенация:

$('<input type="radio" id="ERow" name="SelERow" value="' + editValues[i] + '" />')

, либо интерполяция строк (обратите внимание на различные общие кавычки, используя на этот раз обратные тики):

$(`<input type="radio" id="ERow" name="SelERow" value="${editValues[i]}" />`)

Последний синтаксис новее, но должендостаточно широко поддерживается в настоящее время. (Хотя в любой бизнес-среде, которая знает, какие древние браузеры нужно поддерживать.) Может быть просто личное предпочтение между ними.

показывает [объект объекта]

Основная проблема, приводящая к получению наблюдаемого вами результата, заключается в том, что вы объединяете результат этой операции jQuery непосредственно в виде строки:

tblRow + "<td>" + $('<input type="radio" id="ERow" name="SelERow" value="' + editValues[i] + '" />')

(По совпадению, если выЕсли создается элемент или ищет элемент, этот наблюдаемый результат будет одинаковым, поскольку обе операции возвращают объект.)

Результат $() Операция - это не строка, а более сложный объект. Когда он соединяется со строкой, он должен интерпретироваться как строка, и, если объект не имеет значимой реализации .toString() (эта не представляется), то строковое представление по умолчанию для сложного объекта будет именно таким: "[object Object]"

Есть пара подходов, которые вы можете использовать здесь. Можно было бы просто использовать строки целиком, здесь вам необязательно нужен объект jQuery:

tblRow + '<td><input type="radio" id="ERow" name="SelERow" value="' + editValues[i] + '" /></td>'

Поскольку вы позже используете jQuery для добавления результата в HTML, вы можете просто собрать всеHTML, который вам нравится в виде простых строк, и позволяет jQuery обрабатывать их превращение в объекты DOM при отправке их на .append().

Другой вариант, если вы определенно хотите «использовать jQuery» в этой ситуации или иным образомВ соответствии с инструкциями, будет построена иерархия элементов HTML как объектов jQuery, а затем передана эта иерархия в .append(). Построение такой иерархии может выглядеть примерно так:

var tblCell = $('<td />');  // create an empty <td> node
if (x == 1 || (x - 1) % 3 == 0) {
    var input = $('<input />', { type: 'radio', id: 'ERow', name: 'SelERow', value: editValues[i] });
    tblCell.append(input);  // append an <input> node to the <td> node
} else {
    tblCell.text(editValues[i]);  // or just set the text of the <td> node
}

Обратите внимание, что каждая операция $() создает узел элемента HTML, и вы можете предоставить атрибуты для него в качестве второго аргумента функции $(). Тогда эти узлы могут быть .append() привязаны друг к другу так же, как вы .append() строка HTML к $("#attEditTable").

В вашем конкретном случае это может стать немного более громоздким, потому что ваш цикл непросто проходя по ячейкам или просто по строкам, но через и и используя жестко запрограммированный счетчик, чтобы определить, достиг ли он конца строки или нет. Так что, как часть изучения / практики jQuery, стоит попробовать этот подход. Но я подозреваю, что кратчайший путь к тому, чтобы ваш код работал с минимальными изменениями, - это описанный выше подход конкатенации строк.

Примечание: в этом коде используется то же значение id для переключателей, созданных в этом цикле. В результате ожидается, что на странице будет несколько элементов с одинаковым id. Это технически неверный HTML . Если вы когда-нибудь попробуете использовать этот id для ссылки на элемент, результирующее поведение будет неопределенным. (В некоторых случаях это может работать, а в других - нет, просто по совпадению.) Хотя, если вам не нужно использовать это id для ссылки на элементы, вы также можете полностью удалить его.