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が含まれていない場合に適用されます。私はjqueryがあまり得意ではないからです。

前もって感謝します。

4

2 に答える 2

1

まず、ロードする情報があまりない場合は、とにかくデータをプリロードする方が賢明です。ユーザーは、表示されないデータの初期ダウンロード時間が数ミリ秒余分にかかることを意味する場合でも、レスポンシブUIを望んでいます。

ただし、データを個別にロードする場合は、を使用しxmlhttprequestてデータの表現（JSONなど）をロードし、テンプレートソリューションを使用して結果をinfodivに出力できます。

データの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 に答える
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 に答える