1

同じphpページのボタンをクリックしたときにデータテーブルを表示したい。ボタンは、テキストなどの他の入力を含むフォームで使用されます。データテーブルはデフォルトで非表示になっています。そして、フォームから値を取得し、データベースでクエリを実行して表示します。

表示/非表示の機能をどのように実現できますか？

解決策はありますか？

ありがとう。

4

3 に答える 3

4

これは単純な ajax の問題です。一般的な Java スクリプト ライブラリを使用してこの機能を実現し、ajax 呼び出しとテーブルの表示/非表示を実行できます。たとえば、jquery の ajax 機能を使用してサーバーからデータを取得し、jquery の組み込みエフェクトを使用して div で囲まれたテーブルを表示できます。たとえば、div 'mydiv' のコンテンツを表示するには、次の $("#mydiv").show();ように記述します。コンテンツを非表示にするには、次のように記述します。$("#mydiv").hide();

于 2009-12-02T18:25:30.090 に答える
3

JavaScript を使用しても問題ない場合は、tableタグにid属性を指定してください。次に、onclickの CSS を に変更するイベントをボタンにtable設定しますdisplay:none。ボタンの Javascript を変更して、次回クリックしたときにtableCSS を に切り替えるようにしますdisplay:table。これを行うには、 Prototypeなどの Javascript ライブラリを使用することもできます。

<table id="myTable">
</table>

<input id="toggleButton" type="button" onclick="hideTable(true);" value="Toggle Table" />

Javascript は次のようになります。

function toggleDisplay(var hide) {
  if (hide) {
    document.getElementById('myTable').style.display = "none";
    document.getElementById('toggleButton').onclick = hideTable(false);
  } else {
    document.getElementById('myTable').style.display = "table";
    document.getElementById('toggleButton').onclick = hideTable(true);
  }
}

そのJavascriptを一粒の塩で取ります。しばらく何も書いていません。

Javascript を使用したくない場合は、ボタンで通常の HTML フォームを送信します。hide_tableの値などの入力名をフォームで渡しますtrue。サーバー上で$_POST['hide_table'] == "true"、テーブルが HTML としてページに出力されることを許可しない場合。また、ボタンをクリックするhide_tableと の値で送信されるようにフォームを切り替えますfalse。

<form method="post" action="the_same_page.php">
  <input type="hidden" name="hide_table" value="<?php echo $_POST['hide_table'] == "true" ?>" />
  <input type="button" value="Toggle Table" />
</form>

<?php if ($_POST['hide_table'] != "true") { ?>
  <table>
  </table>
<?php } ?>

AJAX を使用して、ユーザーが表示することを決定したときにのみテーブル コンテンツをロードする場合は、これを適切に低下させるとよいでしょう。ユーザーが Javascript を有効にしていない場合、フォームは実際にサーバーに送信され、ページがリロードされ、表の表示が切り替えられます。ただし、ユーザーが Javascript を有効にしている場合は、AJAX 呼び出しを行い、テーブルをロードして、その場で表示することができます。

于 2009-12-02T18:25:35.677 に答える
0

このクライアント側を実行したい（つまり、すべてのデータがページの読み込み時にクライアントに送信される）と仮定すると、必要なのは次のようになります:(簡潔にするためにプロトタイプで実行）

...
<input type="button" id="showTableBtn" value="Show Table">
<table id="dataTable">
    ...
</table>

<script type="text/javascript">
<!--
Event.observe($("showTableBtn"), "click", toggleTable);

function toggleTable() {
    if ($("showTableBtn").value == "Show Table") {
         $("dataTable").show();
         $("showTableBtn").value = "Hide Table";
    } else {
         $("dataTable").hide();
         $("showTableBtn").value = "Show Table");
    }
}

//-->
</script>
...
于 2009-12-02T18:31:53.297 に答える