PHPのページにあるボタンを使用して表示/非表示のテーブル

StackOverflow https://stackoverflow.com/questions/1834822

  •  11-09-2019
  •  | 
  •  

質問

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

どのように私は、表示/非表示の機能を実現することができますか？

何か解決策はありますか？

ありがとう。

役に立ちましたか？

解決

その簡単なAjaxの問題、あなたはAJAX呼び出しと表示/非表示のテーブルを実行するには、この機能を実現するために任意の一般的なJavaスクリプトライブラリを使用することができます。 たとえば、あなたがして、サーバーからデータを取得するためにjQueryのAJAX機能を使用することができ div要素で囲まれた表を表示するようにjQueryの効果で構築を使用しています。たとえば、「mydiv」のdivのコンテンツを表示するには、単に書きます  コンテンツを非表示にするには$("#mydiv").show();そして、書き込み$("#mydiv").hide();

他のヒント

あなたはJavascriptを使用して大丈夫なら

は、あなたのtableタグにid属性を与えます。その後、onclickするtableのCSSを変更]ボタンをdisplay:noneイベントを持っています。それをクリックする次回は、それがtableされるdisplay:tableのCSSを切り替えるようにボタンのJavascriptを変更します。あなたもこれを行うには、このようプロトタイプのように、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呼び出しがテーブルをロードし、作られた、とその場でそれを表示することができます。

（簡潔にするためにプロトタイプで行われる）

あなたはこのクライアント側（すなわち、すべてのデータは、ページの読み込みにクライアントに送信されます）あなたがする必要があるすべては以下のようなものを何かでやりたいと仮定すると、 

...
<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>
...
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top