HTMLを使用してHTMLテーブルにJavaScriptの連想配列を表示

-4

PHPの連想配列の並べ替えの結果を、PHPやそれらのものを使用しないHTMLテーブルのJavaScriptで表示する必要があります。コンソールでは表示されているが、表は表示されないので、並べ替えは正常に機能します。ここで、ソースは、限り、私は今それを持っているようです。HTMLを使用してHTMLテーブルにJavaScriptの連想配列を表示

var array = [{ 
 
    name: 'TK345', 
 
    year: 2011, 
 
    custom: 456, 
 
    colour: 'red' 
 
}, { 
 

 
    name: 'ZJ456', 
 
    year: 2001, 
 
    custom: 96, 
 
    colour: 'black' 
 
}, { 
 
    name: 'AW364', 
 
    year: 1985, 
 
    custom: 001, 
 
    colour: 'cyan' 
 
}, { 
 
    name: 'RT112', 
 
    year: 2012, 
 
    custom: 33, 
 
    colour: 'green' 
 
}, { 
 
    name: 'PO445', 
 
    year: 2012, 
 
    custom: 11, 
 
    colour: 'yellow' 
 
}]; 
 

 
function sortarray(sorter) { 
 

 
    if (array.length < 1) { 
 
    return -1; 
 
    } 
 

 
    if (sorter == "name") { 
 

 
    var byName = array.slice(0); 
 
    var tableout = document.createElement('table'); 
 
    var retval = null; 
 
    byName.sort(function(a, b) { 
 

 
     var x = a.name.toLowerCase(); 
 
     var y = b.name.toLowerCase(); 
 
     retval = x < y ? -1 : x > y ? 1 : 0; 
 

 
     tableout.setAttribute('border', '1'); 
 
     tableout.setAttribute('width', '100%') 
 
     var row = tableout.insertRow(0); 
 
     for (j = 1; j <= 5; j++) { 
 
     row = tableout.insertRow(j - 1); 
 
     for (i = 1; i <= 4; i++) 
 
      var text = document.createTextNode(retval); 
 
     var cell = row.insertCell(i - 1); 
 
     cell.setAttribute('align', 'center') 
 
     cell.appendChild(text); 
 
     } 
 
    }) 
 
    document.getElementById("demo").appendChild(tableout); 
 
    console.log(retval); 
 

 
    } else if (sorter == "year") { 
 

 
    var byDate = array.slice(0); 
 
    var tableout = document.createElement('table'); 
 
    var retval = null; 
 
    byDate.sort(function(a, b) { 
 

 
     retval = a.year - b.year; 
 

 
     tableout.setAttribute('border', '1'); 
 
     tableout.setAttribute('width', '100%') 
 
     var row = tableout.insertRow(0); 
 
     for (j = 1; j <= 5; j++) { 
 
     row = tableout.insertRow(j - 1); 
 
     for (i = 1; i <= 4; i++) 
 
      var text = document.createTextNode(retval); 
 
     var cell = row.insertCell(i - 1); 
 
     cell.setAttribute('align', 'center') 
 
     cell.appendChild(text); 
 
     } 
 
    }) 
 
    document.getElementById("demo").appendChild(tableout); 
 
    console.log(retval); 
 

 
    } else {}; 
 

 
};

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <button onclick="sortarray('name')">Sort by Name</button> 
 
    <button onclick="sortarray('year')">Sort by Year</button> 
 
    <p id="demo">test</p> 
 
</body> 
 
</html>

だから、それは私のページまたはコンソールでそのテーブルの何も表示されません。

アイデア？

出典

2016-08-05 Thevagabond

あなたは、これらすべてのテーブルには、ものを作る上でreturn文を持っています。 – instead

これを返すと思っていましたが、今では変数にあります。問題のソースを更新しています。 – Thevagabond

あなたのコードは非常に多くの方法で壊れている：あなたは2つの異なる機能を必要としない間違った場所

でリターンを持っている

、あなただけの何かをして別のソート機能
を持っている必要がありますfor (var i = 1; i <= 4; i++)のようにしてi-1を使用すると悪いです。あなたはelse {}
インデントに注意してくださいする必要はありません
からカウントを開始し、あなたがそのキーを使用する必要があり、それは同様に論理エラーを強調しています。
あなたは私はあなたのエラーの一部を削除

内部ソート関数テーブルを印刷する必要はありません、この機能は動作します：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<button onclick="sortarray('name')">Sort by Name</button> 
 
<button onclick="sortarray('year')">Sort by Year</button> 
 
<p id="demo">test</p> 
 

 
<script> 
 
var array = [ 
 
{ 
 
    name: 'TK345', 
 
    year: 2011, 
 
    custom: 456, 
 
    colour: 'red' 
 
}, 
 
{ 
 

 
    name: 'ZJ456', 
 
    year: 2001, 
 
    custom: 96, 
 
    colour: 'black' 
 
}, 
 
{    
 
    name: 'AW364', 
 
    year: 1985, 
 
    custom: 001, 
 
    colour: 'cyan' 
 
},  
 
{ 
 
    name: 'RT112', 
 
    year: 2012, 
 
    custom: 33, 
 
    colour: 'green' 
 
}, 
 
{ 
 
    name: 'PO445', 
 
    year: 2012, 
 
    custom: 11, 
 
    colour: 'yellow' 
 
    } 
 
]; 
 

 
function sortarray(sorter) { 
 
    if (array.length < 1) {return -1;} 
 

 
    var elems = array.slice(0); 
 
    elems.sort(function(a, b) { 
 
    if (sorter === 'name') { 
 
     var x = a.name.toLowerCase(); 
 
     var y = b.name.toLowerCase(); 
 
     return x < y ? -1 : x > y ? 1 : 0; 
 
    } 
 

 
    return a.year - b.year; 
 
    }); 
 
    
 
    var tableout = document.createElement('table'); 
 
    tableout.setAttribute('border','1'); 
 
    tableout.setAttribute('width','100%'); 
 
    
 
    var row = tableout.insertRow(0); 
 
    
 
    for (var j=0; j<5; j++) { 
 
    row = tableout.insertRow(j); 
 
    var keys = Object.keys(elems[j]); 
 
    for (var i=0; i < keys.length; i++) { 
 
     var text = document.createTextNode(elems[j][keys[i]]); 
 
     var cell = row.insertCell(i); 
 
     cell.setAttribute('align','center'); 
 
     cell.appendChild(text); 
 
    } 
 
    } 
 
    
 
    document.getElementById("demo").appendChild(tableout); 
 
    console.log(elems); 
 
} 
 

 
</script> 
 

 
</body> 
 
</html>

出典

2016-08-05 08:28:56 rpadovani

うわー、ありがとう....私はこのソースを見ていきます....私は私のkowがかなり乱れていました、申し訳ありません。あなただけの経験で、あなたはより良くなります。あなたの助けをありがとう。 – Thevagabond

@Thevagabond確かなことですが、これはあなたのエラーを強調するようにしたので、次回はもっとうまくいくでしょう:)とにかく、「Learning Javascript」をご覧ください：https://stackoverflow.com/tags/javascript/ info – rpadovani

お勧めします、ありがとうございます。 – Thevagabond

私たちは、これを行います汎用tableMaker機能を持つジョブ。したがって、以下のコードはあなたのためのテーブルを生成します。ジェネリックなtableMaker関数は、オブジェクトの配列または最初の引数で提供される複数のオブジェクトの配列をとります。これらのキーはテーブルヘッダーの作成（2番目の引数がtrueに設定されている場合）に使用され、値は各行の作成に使用されるため、すべてのオブジェクトは同じキー（プロパティ）を持つ必要があります。 HTMLのテーブルテキストを返します。

さらに、対応するヘッダーをクリックすると、列データに従って行を並べ替える非常に単純な並べ替え機能が追加されました。現時点では、降順のスイッチは昇順ではありませんが、どのようにアプローチするかについてのアイデアを提供します。

function tableMaker(o,h){ 
 
    var keys = Object.keys(o[0]), 
 
    rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>" 
 
                    : "<" + t + ">" + c + "</" + t + ">"),"<tr>"), 
 
     rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []); 
 
    return "<table>" + rows + "</table>"; 
 
} 
 

 
function sorter(e){ 
 
    tableData.sort((a,b) => a[e.currentTarget.textContent] < b[e.currentTarget.textContent] ? -1 : 1); 
 
    myTable.innerHTML = tableMaker(tableData,true); 
 
    thList = myTable.querySelectorAll("table tr th"); 
 
    for (var th of thList) { 
 
    th.addEventListener("click", sorter); 
 
    th.textContent === e.currentTarget.textContent ? th.classList = "selected_header" 
 
                : th.classList = "header"; 
 
    } 
 
} 
 

 
var tableData = [{name: 'TK345', year: 2011, custom: 456, colour: 'red'}, 
 
       {name: 'ZJ456', year: 2001, custom: 96, colour: 'black'}, 
 
       {name: 'AW364', year: 1985, custom: 001, colour: 'cyan'}, 
 
       {name: 'RT112', year: 2012, custom: 33, colour: 'green'}, 
 
       {name: 'PO445', year: 2012, custom: 11, colour: 'yellow'}], 
 
     myTable = document.getElementById("myTable"), 
 
     thList; 
 

 
myTable.innerHTML = tableMaker(tableData,true); 
 
thList = myTable.querySelectorAll("table tr th"); 
 
    for (var th of thList) { 
 
    th.addEventListener("click", sorter); 
 
    th.classList = "header"; 
 
    }

.header { 
 
     border: 2px solid tomato; 
 
border-radius: 6px; 
 
    background: pink; 
 
} 
 

 
.selected_header { 
 
     border: 2px solid turquoise; 
 
border-radius: 6px; 
 
    background: paleGreen; 
 
}

<div id="myTable"></div>

出典

2016-08-05 11:35:38 Redu

HTMLを使用してHTMLテーブルにJavaScriptの連想配列を表示

答えて

関連する問題