0

我制作了某种购物车，当我按下表格线时，它假设打开有关该项目的一些详细信息，为此我使用了一个高度为 0 且最初隐藏的 div，其中包含详细信息，问题是我认为无论是否按下该行，浏览器都会加载信息页面。有没有办法让浏览器仅在他的 DIV 可见时才加载页面？

    $int = 0;
            echo "<table class=\"result_table\" id=\"result_table\">";
    foreach($types as $data){
        echo "<tr onClick=\"present(".$int.");\" >";
        echo "<td align=\"right\">";
        echo $data['number'];
        echo "</td>";
        echo "<td align=\"right\">";
        echo $data['item_name'];
        echo "</td>";
        echo "<td align=\"right\">";
        echo $data['amount'];
        echo "</td>";
        echo "<td align=\"right\">";
        echo "17";
        echo "</td></tr>";
        echo "<tr class=\"info_row\"><td colspan=\"4\"><div      id=\"div_num_".$int."\" style=\"height:0px\">
            <object type=\"text/html\" data=\"page.php\"            style=\"width:100%; height:100%; margin:0%;\">
            </div></td></tr>";
        $int++;
    }
    echo "</form></table>";

行的 CSS

.info_row{
    visibility:hidden;
}

JS：

function present(item_id){  
    var div = document.getElementById("div_num_"+item_id);

    if(div.style.visibility=="visible"){
        div.style.visibility = 'hidden';
        div.style.height= '0';
    } else {
        div.style.visibility = 'visible';
        div.style.height= "200px";      
    }
}

正如您可以看到页面加载的所有信息但不可见。解决这个问题的其他好方法将被应用，特别是如果它不包括 jquery，因为我不是很擅长它。

提前致谢。

4

2 回答 2

1

您可以使用 ajax 调用：

用 javascript

<script type="text/javascript">
function loadInfoRow()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
     var responseText = xmlhttp.responseText;
     //Use the response text to add the extra row
   }
}
xmlhttp.open("GET","info.txt",true);
xmlhttp.send();
}
</script>

用jQuery

$.ajax({
  url: "info.txt",
  context: document.body,
  success: function(text){
    //where text will be the text returned by the ajax call
    $(".result_table).append(text);
  }
});
于 2013-03-09T14:50:46.360 回答
1

首先，如果没有太多要加载的信息，那么预加载数据可能更明智。用户想要一个响应式 UI，即使这意味着他们永远不会看到数据的初始下载时间要多几毫秒。

但是，如果您坚持单独加载数据，您可以使用 anxmlhttprequest来加载数据的表示形式（例如 JSON 格式），并使用模板解决方案将结果输出到 info div。

可能生成数据的 JSON 表示的页面可能如下所示：

<?php
    $result = array();


    // ... Code that defines type ... //



    $int = 0;
    foreach($types as $data){

        $result[] = array(
            "int"       => $int,
            "number"    => $data["number"],
            "item_name" => $data["item_name"],
            "amount"    => $data["amount"]
        );

        $int++;
    }

    echo json_encode($result);
?>

因此，当用户单击链接时，上述页面将以xmlhttprequest. 然后，您可以使用 解析结果JSON.parse(req.responseText)，并将 HTML 模板应用于结果（查看上面的链接以及这个链接，以获取有关如何执行此操作的更多信息）。

同样，您可能只需一次加载所有数据就可以了。额外的 HTTP 标头实际上使页面需要更长的时间才能完全加载。

于 2013-03-09T14:45:54.230 回答