CODEWITHSUNDEEP
javascripthtml
Carlos Eduardo Ilgenfritz
Carlos Eduardo Ilgenfritz

Reputation: 170

Table created with JS is addin content in tr line

When creating a table with js following the following tutorial: https://www.aspsnippets.com/Articles/Create-dynamic-Table-in-HTML-at-runtime-using-JavaScript.aspx

I'm getting the unexpected result, the table is creating the elements on the same line as the header, and I can not understand why this is happening if anyone could help me I'd be grateful.

Att, Carlos Eduardo

//browserify index.js > bundle.js
const request = require('request')
var respRequest

var buttonTable = document.getElementById("button-table").addEventListener("click", function() {

  request('https://jsonplaceholder.typicode.com/photos', function(error, response, body) {
    console.log('error:', error)
    console.log('statusCode:', response && response.statusCode)
    //console.log('body:', body)
    var content = []
    content = JSON.parse(body)
    var a = content.map(function(obj) {
      return Object.keys(obj).sort().map(function(key) {
        return obj[key]
      })
    })
    a.unshift(["AlbumId", "id", "url", "title", "thumbnailUrl"])
    var table = document.createElement("table")
    table.border = "1"
    var columnCount = a[0].length
    var row = table.insertRow(-1)
    for (var i = 0; i < columnCount; i++) {
      var headerCell = document.createElement("th")
      headerCell.innerHTML = a[0][i]
      row.appendChild(headerCell)
    }
    for (var i = 1; i < a.length; i++) {
      line = table.insertRow(-1)
      for (var j = 0; j < columnCount; j++) {
        var cell = row.insertCell(-1)
        cell.innerHTML = a[i][j]
      }
    }

    var dvTable = document.getElementById("dvTable");
    dvTable.innerHTML = "";
    dvTable.appendChild(table);
  })
})
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/style.css">
  <title>Meu Site</title>
</head>

<body>
  <div class="container">
    <p>Gerar Relatorio</p>
    <button type="button" id="button-table" class="btn btn-default ">Gerar 
  Relatorio</button>
    <div id="dvTable"></div>
  </div>
  <script src="script/bundle.js"></script>
</body>

</html>

I expect that it will create a table perfectly, with header, and lines, in a way that you can read perfectly what is in the table

Upvotes: 0

Views: 39

Answers (1)

bjelli
bjelli

Reputation: 10090

var row = table.insertRow(-1)
for (var i = 0; i < columnCount; i++) {
  var headerCell = document.createElement("th")
  headerCell.innerHTML = a[0][i]
  row.appendChild(headerCell)
}
for (var i = 1; i < a.length; i++) {
  line = table.insertRow(-1)
  for (var j = 0; j < columnCount; j++) {
    var cell = row.insertCell(-1)
    cell.innerHTML = a[i][j]
  }
}

In the first loop you create the header-row, stored in variable row.

in the second loop you try to create several more rows in variable line, but you still append your cells to row.

Upvotes: 1

Related Questions