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

【问题标题】：Create table inside html document from javascript using document.getelementbyid使用 document.getelementbyid 从 javascript 在 html 文档中创建表
【发布时间】：2018-04-24 19:07:53
【问题描述】：

我有一个 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;    
        }
};

【问题讨论】：

如果它实现了你的目标，它就是有效的。
那为什么不向表格显示任何数据呢？ @DanBracuk

标签： javascript html sql database twitter-bootstrap

【解决方案1】：

我还不能对帖子发表评论，但我认为您在选择末尾有错字：

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

应该是：

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

【讨论】：

谢谢。当我从代码中编辑信息以发布它时，该行被编辑。在实际功能中是有作用的。
没问题！刚刚删除了最后一条评论，因为我问错了。那个缩进让我抓狂！

【解决方案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);

【讨论】：