使用document.getelementbyid从javascript在html文档中创建表

Question

我有一个javascript函数，可从数据库中提取数据，将其放入html表中，然后通过document.getElementById命令将该表放入HTML页面中。 一切正常，除了当我加载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

我还无法评论帖子，但我认为您在选择的结尾处有错字：

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

它应该是：

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

Answer 2

根据您编写的去除html变量中的表标签的语句，看起来html变量似乎是字符串类型。 我在您使用“ Tableify”的npm模块上进行了一些测试，它的主要方法不以DOM节点的形式返回元素。 因此，您不能只使用.innerHTML以字符串形式注入元素。 这主要是因为DOM希望您设置为innerHTML的东西不会是其他DOM节点。 JS希望您使用appendChild或其他方式将节点插入为其他DOM节点的子级。

进行以下几行操作即可为您提供所需的信息。 首先，不要像您一样删除表标签，否则节点将无效。 然后在html变量上运行createContextualFragment。 结果将是一个文档片段，然后您可以在该文档片段上运行querySelector来检索第一个元素（通常是tbody元素），然后最后将该元素添加到您已经存在的表中……

 // 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);