javascript - 将多个 javascript 值放入表中

Question

我有一个脚本，将一组链接放入 1 帧，并检查它们的加载时间：

<script type="text/javascript">
$(document).ready(function(){   
var array = ['http://www.example1.come', 'http://www.example2.com', 'http://www.example3.com'];
var beforeLoad = (new Date()).getTime();
var loadTimes = [];
$('#1').on('load', function() {
   loadTimes.push((new Date()).getTime());                  
   $('#1').attr('src', array.pop());
    if (array.length === 0) { 
        $.each(loadTimes, function(index, value) {
           alert(value - beforeLoad); 
        });
    }
}).attr('src', array.pop());
});
</script>

我想将所有值放入表中，而不是提醒它们。我的意思是将它们放在这里（创建 3x td 并在每个中放置加载时间值）：

<table>
  <tr>
   <?php for ($i=0; $i<=2; $i++){ ?>
    <td id="loadingtime<?php echo $i; ?>">  
    <?php  } ?>
    </td>
  </tr>
</table>

Answer 1

你的 PHP 循环有点坏了。但这没关系，因为它是不必要的 - 只需抽出 3 个 TD。

<table>
    <tr>
        <td id="loadingtime1">  
        </td>
        <td id="loadingtime2">  
        </td>
        <td id="loadingtime3">  
        </td>
    </tr>
</table>

向表中添加 javascript 变量的捷径不是通过 PHP。您可以使用直接添加它们$.().html。

代替alert(value - beforeLoad);

采用：$("#loadingtime"+index).html(value - beforeLoad);

Answer 2

你可以在 jquery 而不是 php 中做到这一点。

$(document).ready(function(){   
    var array = ['http://www.example1.come', 'http://www.example2.com', 
                 'http://www.example3.com'];
    var beforeLoad = (new Date()).getTime();
    var loadTimes = [];
    $('#1').on('load', function() {
       loadTimes.push((new Date()).getTime());                  
       $('#1').attr('src', array.pop());
        if (array.length === 0) {
            var table = $('<table><tr></tr></table>');
            var tr = table.find('tr');
            $.each(loadTimes, function(index, value) {
               tr.append('<td>' + (value - beforeLoad) + '</td>');
            });
            table.appendTo('body');
        }
    }).attr('src', array.pop());

});