javascript - 我可以通过单击按钮而不使用 AJAX 将 HTML 表格中的行替换为新行吗？

Question

我有一个包含 500 个数组的数组。我想将此 2D 数组显示为 HTML 表格，一次只显示 10 行。最初显示前 10 行。然后，当用户单击标记为 Next 的按钮时，前 10 行将被接下来的 10 行替换，依此类推。

我的想法是为 Next 按钮分配一个 Javascript 函数作为其 onclick 属性的值。我最初将显示前 10 行。然后当用户点击Next按钮时，就会执行JS函数。在该函数中，我必须使用 AJAX 来获取 2D 数组(其中包含要显示的数据)，以便可以显示接下来的 10 行。

我在这里问的问题是，是否可以在没有 AJAX 的情况下完成整个事情？

附录:包含数据的二维数组来自 MySQL 数据库中的表(如果有的话)。

Answer 1

当您想要/需要从其他地方(例如您的服务器)动态获取一些数据时，您可以使用 Ajax。由于这 500 个数组位于您服务器上的 MySQL 表中，显然您必须在某个时刻获取它们。

选项 1. 您可以使用 PHP 最初获取所有 500 个数组并用它生成页面(因为您的页面一开始就已经知道所有行)。优点:不需要 Ajax，因为您从一开始就已经知道所有 500 行。缺点:加载速度会稍慢，因为您一次获取所有 500 行(在我看来，除非每个数组都非常大，否则这种缓慢可能可以忽略不计)。

<?php
    // Fetch all 500 arrays at once from mysql.
    // I am assuming you already know how to do this
    //     and I'm simplifying the code by just putting a function here
    //     that you'll have to implement, of course
    $array_of_arrays = get_array_of_arrays_from_mysql();

    // Now you have your 2D array in PHP.
    // Let's create the full table, with 500 rows, but set 'display: none;' for
    // all the rows past the 10th, this way the user will only see
    // the first 10

    echo "<table id='myTable'>";

    $arrayLength = count($array_of_arrays); // This will be 500 in your example
    for ($i = 0; $i < $arrayLength; $i++) {
        if ($i < 10) {
            echo "<tr>";
        } else {
            // Create all rows past the 10th hidden since the beginning
            echo "<tr style='display: none;'>";
        }

        // Now we write the cells
        // We have to loop the inner array
        $innerArrayLength = count($array_of_arrays[$i]);
        for ($j = 0; $j < $innerArrayLength; $j++) {
            echo "<td>" . $array_of_arrays[$i][$j] . "</td>";
        }
        echo "</tr>";

        // Note that we are assuming that all inner arrays have the same
        // length, otherwise the table will be messy, with rows with
        // different sizes.
    }
    echo "</table>";

    // OK, so your server will generate the HTML with the full table
    // but only showing the first 10

    // Now we have to code javascript to change the visibility of the rows accordingly.

?>

<input type='button' value='Next' onclick='goNext()' />

<script>
    // this variable tells us which row group is currently showing
    var currentlyShowing = 0; // currently showing rows 0 to 9

    function goNext() {
        // First of all, we hide everything
        // I will use jQuery here because it is much easier,
        // but it is possible to do it with pure javascript if you want.
        $("#myTable tr").hide(); // This immediately hides all rows in the table.

        // Now we update our variable
        currentlyShowing = currentlyShowing + 10;

        // Now we show the correct rows (the others will remain hidden)
        // Again I choose to use jQuery because it is much easier
        $("#myTable tr").slice(currentlyShowing, currentlyShowing + 10).show();
    }
</script>

选项 2。当用户单击按钮时，使用 Ajax 从服务器一次获取 10 行。优点:将加载时间分成几部分。缺点:使用ajax而不是普通的PHP(你可以说它稍微复杂一些)；此外，单击按钮后，用户可能需要等待一段时间才能得到 ajax 响应 - 因此不会立即转换到接下来的 10 行。既然您不想使用 Ajax，请选择选项 1。您应该没问题，选项 1 没有什么太糟糕的，除非您真的担心页面的加载时间。