テーブルJSの配列データ

Question

2つの配列collected = [1, 0, 2,]とteacher = ['Zimmerman', 'Tischler', 'Johnson']の内容を取り出し、sort()メソッドを使用してテーブルに表示したいと考えています。 2
ジマーマン - - 1
Tischler - 0

誰もがこれを行う方法を知っているだろう
ジョンソン：だから、次のようになりますか？

Answer 1

完全な例を：

<table id="tab" border="1"> 

</table> 
<script type="text/javascript"> 

    var 
     collected, 
     teacher, 
     table, 
     data = '', 
     source = []; 

    collected = [1, 0, 2,]; 
    teacher = ['Zimmerman', 'Tischler', 'Johnson']; 

    for (var i in collected) { 

     source.push([collected[i], teacher[i]]); 
    } 

    source.sort(function(a, b) { 

     return a[0] < b[0]; 
    }); 

    table = document.getElementById('tab'); 

    for (var i in source) { 

     data += '<tr><td>' + source[i][0] + '</td><td>' + source[i][1] + '</td></tr>'; 
    } 

    table.innerHTML = data; 

</script> 

再SULT：

Answer 2

あなたはcollectedでソートを使用してindexOf機能を使用することができます

実施例を参照してください：

var collected = [1, 0, 2]; 
 

 
var teacher = ['Zimmerman', 'Tischler', 'Johnson']; 
 

 
var res = collected.slice().sort((a, b) => b - a) 
 
      .map(e => `<tr><td>${teacher[collected.indexOf(e)]}</td> <td>${e}</td></tr>`).join(''); 
 
    
 
    
 
document.write('<table>' + res + '</table>');

Answer 3

あなたは索引をソートし、コンテンツの後の組み立てのためのその配列を取ることができます。

var collected = [1, 0, 2, ], 
 
    teacher = ['Zimmerman', 'Tischler', 'Johnson'], 
 
    cIndices = collected.map(function (_, i) { return i; }), 
 
    table = document.createElement('table'); 
 

 
cIndices.sort(function (a, b) { 
 
    return collected[b] - collected[a]; 
 
}); 
 

 
cIndices.forEach(function (a) { 
 
    function getTD(s) { 
 
     var td = document.createElement('td'); 
 
     td.innerHTML = s; 
 
     return td; 
 
    } 
 

 
    var tr = document.createElement('tr'); 
 
    tr.appendChild(getTD(teacher[a])); 
 
    tr.appendChild(getTD(collected[a])); 
 
    table.appendChild(tr); 
 
}); 
 

 
document.body.appendChild(table);

Answer 4

使用resultビジネスロジックとプレゼンテーションのためのhtmlため。適切なアプローチ：ES6が輝きを備えながら

var collected = [1, 0, 2], 
 
    teacher = ['Zimmerman', 'Tischler', 'Johnson'], 
 
    result = {}, 
 
    html = ''; 
 

 
// business logic 
 
collected.forEach(function (e, i) { 
 
    result[e] = teacher[i]; 
 
}); 
 

 
// presentation 
 
Object.keys(result) 
 
    .sort() 
 
    .reverse() 
 
    .forEach(function (e) { 
 
     html += '<tr><td>' + result[e] + '</td>'; 
 
     html += '<td>' + e + '</td></tr>'; 
 
    }); 
 

 
document.write('<table>' + html + '</table>');