Создание таблиц в Javascript

Question

У меня проблема. Я изучаю javascript, но я понятия не имею, как создавать таблицы, работающие только на javascript-файлах. Я должен создать таблицу для каждого вывода частоты букв, но я не знаю, как это сделать. Вот вывод я должен иметь:

В начале я думал, что работать на HTML, но я не могу, как часть связана, чтобы проверить мой код должен пройти. Здесь я покажу некоторые из них:

display_letter_frequency(letter_frequency("Hello"),document.getElementById("frequency_table")); 
    var rows = document.getElementById("frequency_table").querySelectorAll('tr') 
    equal(rows.length, 4, "With input String 'Hello' there should be 4 table rows") 
    equal(rows[0].querySelectorAll('td')[0].innerHTML, 'H', "1st td of 1st tr should have the value H"); 
    equal(rows[0].querySelectorAll('td')[1].innerHTML, '1', "2nd td of 1st tr should have the value 1"); 
    equal(rows[1].querySelectorAll('td')[0].innerHTML, 'E', "1st td of 2nd tr should have the value E"); 
    equal(rows[1].querySelectorAll('td')[1].innerHTML, '1', "2nd td of 2nd tr should have the value 1"); 
    equal(rows[2].querySelectorAll('td')[0].innerHTML, 'L', "1st td of 3rd tr should have the value L"); 
    equal(rows[2].querySelectorAll('td')[1].innerHTML, '2', "2nd td of 3rd tr should have the value 2"); 
    equal(rows[3].querySelectorAll('td')[0].innerHTML, 'O', "1st td of 4th tr should have the value O"); 
    equal(rows[3].querySelectorAll('td')[1].innerHTML, '1', "2nd td of 4th tr should have the value 1"); 

Кроме того, я не могу использовать console.log но писать только код функции, которая будет вызываться обратно с помощью тестера. Вот что я сделал, но я не знаю, правильно ли это и как идти вперед:

function display_letter_frequency(a,dom) { 
if(a === undefined){ 
    return undefined 
} else { 
    var tbl  = document.createElement("table"); 
    var tblBody = document.createElement("tbody"); 
    for(var x in a){ 
     var row = document.createElement("tr"); 

     } 
    } 
} 

Этот код связан с функцией, которую я написал, перед которой рассчитывать в командной строке частотные буквы пользователя:

function letter_frequency(s) { 
if(s === undefined){ 
    return undefined 
} else { 
    var freq = {}; 
    for (var i = 0; i < s.length; i++) { 
     var character = s.charAt(i).toUpperCase(); 
     if (freq[character]) { 
      freq[character]++; 
     } else { 
      freq[character] = 1; 
     } 
    } 
} 
    return freq; 
} 

Надеюсь, что проблема ясна, и вы можете помочь мне и людям, которые в ней понадобятся. Я просмотрел веб-страницы, и они говорят о некоторой частотной таблице, чтобы определить мою проблему. Я не знаю, если т правильно

Answer 1

Попробуйте

for(var x in a){ 
     var row = document.createElement("tr"); 
     letterCell = document.createElement('td'); 
     freqCell = document.createElement('td'); 
     letterCell.innerHTML = x; 
     freqCell.innerHTML = a[x]; 
     row.appendChild(letterCell); 
     row.appendChild(freqCell); 
     tblBody.appendChild(row); 
    } 
} 

(не проверено)

Answer 2

Проверить это ->http://jsfiddle.net/sumeetp1991/tqdxjk0d/1/

/* javascript */ 
var my_val = "asdasd"; 
var obj = getFrequency(my_val); 

var table = document.createElement("table"); 

Object.keys(obj).forEach(function(key) { 
    var tr = document.createElement("tr"); 

    var td_key = document.createElement("td"); 
    var txt_key = document.createTextNode(key); 
    td_key.appendChild(txt_key); 

    var td_val = document.createElement("td"); 
    var txt_val = document.createTextNode(obj[key]); 
    td_val.appendChild(txt_val); 
    tr.appendChild(td_key); 
    tr.appendChild(td_val); 
    table.appendChild(tr); 
}); 

document.getElementById("table").appendChild(table); 





function getFrequency(string) { 
    var freq = {}; 
    for (var i=0; i<string.length;i++) { 
     var character = string.charAt(i); 
     if (freq[character]) { 
      freq[character]++; 
     } else { 
      freq[character] = 1; 
     } 
    } 

    return freq; 
} 




    /* html */ 
<div id="table"> 
</div> 


/* CSS */ 
td 
{ 
    border: 1px solid black; 
}