使用Javascript创建表格

我遇到问题。我正在学习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; 
}

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

来源

2014-09-26 pp94

退房MDN为[*表API *] （https://developer.mozilla.org/en/docs/Web/API/HTMLTableElement），它也列在[* HTML 5表格元素规范*]（http://www.w3.org/html/wg /drafts/html/master/tabular-data.html#the-table-element）。 – RobG 2014-09-26 22:06:15

尝试

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

（未测试）

来源

2014-09-26 09:32:04 laruiss

我会尝试。谢谢 – pp94 2014-09-26 09:37:40

谢谢工作完美！ – pp94 2014-09-26 10:52:57

很高兴我能帮到你。并感谢@JLRishe纠正错字;-) – laruiss 2014-09-26 11:59:56

入住这 - >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; 
}

来源

2014-09-26 09:57:55

使用Javascript创建表格

回答

相关问题