使用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創建表格

回答

相關問題