Create table inside html document from javascript using document.getelementbyid

Question

I have a javascript function that extracts data from a database, puts it into an html table, and puts that table into an HTML page via a document.getElementById command. Everything works fine except when I load the HTML page, the data is not in the table. I am using the innerHTML property to put the table on the page. My question is, is this a valid way of populating a table to an HTML page? I have posted the relevant code below.

<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;    
        }
};

Then why wouldn't this display any data to the table? @DanBracuk — user3064203
– user3064203, Commented Apr 24, 2018 at 19:41

Franco Fusaro · Accepted Answer · 2018-04-24 19:30:38Z

1

I can't comment to posts yet but i think you have a typo at the end of the select:

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

it should be:

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

answered Apr 24, 2018 at 19:30

Franco Fusaro

1351 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3064203 Over a year ago

Thanks for that. That line was edited when I was redacting information from the code to post it. It is functional in the actual function.

Franco Fusaro Over a year ago

No problem! Just deleted last comment because i was asking wrong things. That indentation drives me crazy!

eclipticCodeGeek · Accepted Answer · 2018-04-25 01:33:30Z

Based on the statements you’ve written to strip out the table tags in the html variable, it looks as though that html variable is of type string. I ran some tests on the npm module you're using 'Tableify', and it's primary method does not return the elements in the form of DOM nodes. Therefore, you can't just inject the elements using .innerHTML in string form. That's mainly because the DOM expects the thing you're setting to the innerHTML isn't going to be other DOM nodes. JS expects you to use appendChild, or others means, to insert nodes as children of other DOM nodes.

Doing the few lines below should get you what you want. Firstly, don't strip out the table tag like you're doing, or the node will become invalid. Then run a createContextualFragment on the html variable. The result will be a document fragment, of which then you can run a querySelector on it to retrieve the first element, usually a tbody element, and then finally do an appendChild of that to your already existing table... for example

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

Collectives™ on Stack Overflow

Create table inside html document from javascript using document.getelementbyid

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related