在Javascript中创建表

时间:2014-09-26 09:18:16

标签: javascript

我有问题。我正在学习javascript,但我不知道如何创建仅适用于javascript文件的表。我必须为每个字母频率输出创建一个表,但我不知道该怎么做。这是我应该拥有的输出:

output of the exercise

一开始我想到了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;
}

希望问题清楚,你可以帮助我和需要它的人。我环顾网络,他们谈论了一些频率表来定义我的问题。我不知道是不是

2 个答案:

答案 0 :(得分: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);
    }
}

(未经测试)

答案 1 :(得分:0)

检查一下 - &gt; 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;
}