Создать таблицу внутри HTML-документа из JavaScript с помощью document.getelementbyid

Question

У меня есть функция javascript, которая извлекает данные из базы данных, помещает их в HTML-таблицу и помещает эту таблицу в HTML-страницу с помощью команды document.getElementById.Все работает нормально, за исключением случаев, когда я загружаю HTML-страницу, данных нет в таблице.Я использую свойство innerHTML, чтобы поместить таблицу на страницу.У меня вопрос, это правильный способ заполнения таблицы на HTML-странице?Я разместил соответствующий код ниже.

<div class="content mt-3">
            <div class="animated fadeIn">
                <div class="row">

                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <strong class="card-title">Data Table</strong>
                        </div>
                        <div class="card-body">
                  <table id="results-data-table" class="table table-striped table-bordered">

               <!-- I am trying to put the html here from javascript

                  </table>

                    </div>
                  </div>
                </div>


                </div>
            </div><!-- .animated -->
        </div><!-- .content -->



    <script src="../controllers/query.js">getData()</script>
    <script src="assets/js/vendor/jquery-2.1.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="assets/js/plugins.js"></script>
    <script src="assets/js/main.js"></script>

Javascript:

function getData() {

var sql = require("mssql");
var dbConfig={
        server:"server",
        database: "db",
        user:"user",
        password: "pw"
}




        var conn = new sql.Connection(dbConfig);
        var req = new sql.Request(conn);
        conn.connect(function (err){
                if (err) {
                console.log(err);
                return;
                }


                req.query("SELECT * FROM table",resultsCallback)

                conn.close();
        });

}

function resultsCallback (err, recordset) {

        var tableify = require('tableify');

        if (err) {
                console.log(err);
        }
        else {

                var html = tableify(recordset);
                html = html.replace('<table>','');
                html = html.replace('</table>','');
                document.getElementById("results-data-table").innerHTML=html;    
        }
};

Answer 1

Исходя из операторов, которые вы написали для удаления тегов таблицы в переменной html, похоже, что переменная html имеет тип string. Я провел несколько тестов на модуле npm, который вы используете Tableify, и его основной метод не возвращает элементы в форме узлов DOM. Следовательно, вы не можете просто вставить элементы, используя .innerHTML в виде строки. Это в основном потому, что DOM ожидает, что то, что вы устанавливаете для innerHTML, не будет другими узлами DOM. JS ожидает, что вы будете использовать appendChild или другие средства для вставки узлов как потомков других узлов DOM.

Выполнение нескольких строк ниже должно дать вам то, что вы хотите. Во-первых, не удаляйте тег таблицы, как вы делаете, иначе узел станет недействительным. Затем запустите createContextualFragment в переменной html. Результатом будет фрагмент документа, из которого затем вы можете запустить на нем querySelector, чтобы получить первый элемент, обычно элемент tbody, и, наконец, сделать это appendChild для вашей уже существующей таблицы ... например

// create a DOM fragment from the string
var frag = document.createRange().createContextualFragment(html);

//get the first element from inside the table. This is usually a tbody, but you might want to make sure your Tableify is generating a tbody in yours. 
var tableBody = frag.querySelector('tbody'); 

// append that node to the table DOM element
document.querySelector("#results-data-table").appendChild(tableBody);

Answer 2

Я не могу комментировать посты, но я думаю, что у вас есть опечатка в конце выбора:

req.query("SELECT * FROM table,resultsCallback)

должно быть:

req.query("SELECT * FROM table",resultsCallback)