CODEWITHSUNDEEP
javascripthtmlcss
David
David

Reputation: 4271

Table body is comming from Html but not from Javascript

I am creating a table from JavaScript tag and second one from method by using document.createElement() .There are two ways by which I am creating One by using Javascript.

var dropDownTable = document.createElement('table');
    dropDownTable.id = "myTable";
    //dropDownTable.className = "myTable";
    var headerTr = document.createElement('tr');
    headerTr.className = 'header';
    var innerTr = document.createElement('tr');
    var innerTd = document.createElement('td');
    innerTr.appendChild(innerTd);
    dropDownTable.appendChild(headerTr);
    dropDownTable.appendChild(innerTr);

Here I am getting this as outer.html

Outer HTML 

<table id="myTable">
    <tr class="header"/>
    <tr>
        <td/>
    </tr>
</table>

One by using HTML tag in Javascript.

var myTable = '<table id="myTable">' + '<tr class="header"></tr>' + '<tr><td></td></tr>' + '</table>';

Here I am getting this as outer.html

Outer HTML

<table id="myTable">
    <tbody>
        <tr class="header" />
        <tr>
            <td/>
        </tr>
    </tbody>
</table>

I am wondering where I am creating tbody tag. Though I am using the same css both but different outer.html is my question. Please help me in this.

CSS

#tdiv {
    height: 30%;
    overflow-y: auto;
}

tbody {
    display: block;
}

tbody {
    max-height: 150px;
    overflow: auto;
}

#myTable {
    border-collapse: collapse;
    width: 30%;
    border: 1px solid #ddd;
    font-size: 18px;
    display: none;
    margin-top: -12px;
}

#myTable th,
#myTable td {
    text-align: left;
    padding: 12px;
    width: 10%;
}

#myTable tr {
    border-bottom: 1px solid #ddd;
    order-top: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
    background-color: #f1f1f1;
}

#myInput:focus+#myTable {
    display: block;
}

#myTable:hover {
    display: block;
}

Upvotes: 0

Views: 37

Answers (1)

C3roe
C3roe

Reputation: 96241

I am wondering where I am creating tbody tag.

The browser creates it implicitly.

https://www.w3.org/TR/html5/tabular-data.html#the-tbody-element:

Tag omission in text/html:
A tbody element's start tag may be omitted if the first thing inside the tbody element is a tr element, and if the element is not immediately preceded by a tbody, thead, or tfoot element whose end tag has been omitted. (It can't be omitted if the element is empty.). A tbody element's end tag may be omitted if the tbody element is immediately followed by a tbody or tfoot element, or if there is no more content in the parent element.

Upvotes: 1

Related Questions