JQuery - преобразование JS в JQuery для генерации таблицы, которая позволяет анализировать параметры URL

Question

У меня проблема с преобразованием моего ванильного JS-кода в JQuery.Мне нужно взять значения параметров из URL.Например:

localhost: 63342 / 2018-11-13-html / form_sent.html? Phone = 4325325235 & adress = testadress & order = book1 & order = book2 & deliverydate = datadostawy & deliverymethod = chinamail & accept = *

* 10051006 * Моя текущая попытка создать [объект объекта] вместо значений, которые он должен выбрасывать.

function createSimpleRow(header, value) {
    const urlParams = new URLSearchParams(window.location.search);
    return $("<tr></tr>").append($("<th></th>").text(header)).append($("<td></td>").text(`${urlParams.getAll(value)}`));
}

function readBookOrder(booklist) {
    const list = document.getElementById(booklist);
    const table = document.createElement("table");


    table.append(createSimpleRow("phone", `phone`));
    table.append(createSimpleRow("adress", `adress`));

    list.appendChild(table);
    return list;
}

Мой старый код представляет собой смесь Jquery и чистого JS, и, похоже, он работает правильно, выдавая все значения, которые я указал для получения из URL.

function readBookOrder(booklist) {
    const list = document.getElementById(booklist);
    const table = document.createElement("table");

     const tr = document.createElement("tr");
     const td1 = document.createElement("td");
     td1.innerHTML = `${urlParams.get("phone")}`;
     tr.appendChild(td1);
     const td2 = document.createElement("td");
     td2.innerHTML = `${urlParams.get("adress")}`;
     tr.appendChild(td2);
     const td3 = document.createElement("td");
     td3.innerHTML = `${urlParams.getAll("order")}`;
     tr.appendChild(td3);
     const td4 = document.createElement("td");
     td4.innerHTML = `${urlParams.get("deliverydate")}`;
     tr.appendChild(td4);
     const td5 = document.createElement("td");
     td5.innerHTML = `${urlParams.get("deliverymethod")}`;
     tr.appendChild(td5);

    table.appendChild(tr);
    list.appendChild(table);
    return list;
}

Может кто-нибудь подсказать, что я упускаю при переходе на стандарт JQuery?

Answer 1

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

Преобразовать readBookOrder() для использования jQuery методов, которые позволяют вставлять другие jQueryobjects

function readBookOrder(booklist) {
    const $list = $(`#${booklist}`);
    const $table = $("<table>");

    ['phone', 'adress'].forEach(e => $table.append(createSimpleRow(e, e)) );       

    $list.append($table);
    return $list;
}

Соглашение о добавлении префикса $ к именам переменных является общим для отражения того, что переменная содержит объект jQuery