电影票房排名 - 隐秘而伟大、八佰、疯狂动物城、头师傅一体 - 常规

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影票房排名 - 隐秘而伟大、八佰、疯狂动物城、头师傅一体</title>
    <style>
        table,tr,td{
            border: 1px solid black;
            border-collapse: collapse;
        }
        table{
            width: 400px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>排名</td>
            <td>影片</td>
            <td>票房</td>
        </tr>
    </table>
    <script>
        //电影数组
        var movieArr =['隐秘而伟大','八佰','疯狂动物城','头师傅一体'];
        //电影票房数组
        var boxofficeArr = [14.7,33.9,12,15.3];
<pre><code>    //对数组进行排序，由小到大进行排序，然后输出对应的电影名称及票房。
    var sortedArr = [];
    for(var i=0; i&lt;boxofficeArr.length; i++){
        sortedArr.push({
            movie: movieArr[i],
            boxoffice: boxofficeArr[i]
        });
    }
    sortedArr.sort(function(a, b) {
        return a.boxoffice - b.boxoffice;
    });

    //在页面输出内容
    var table = document.querySelector('table');
    for(var i=0; i&lt;sortedArr.length; i++){
        var row = table.insertRow(i+1);
        var rankCell = row.insertCell(0);
        var movieCell = row.insertCell(1);
        var boxofficeCell = row.insertCell(2);

        rankCell.innerHTML = i+1;
        movieCell.innerHTML = sortedArr[i].movie;
        boxofficeCell.innerHTML = sortedArr[i].boxoffice;
    }
&lt;/script&gt;
</code></pre>
</body>
</html>