0

ねえ、ユーザーが入力を入力したときにテーブルを表示したいと思います。

私が持っているのは：

セクション内<head>：

<script type="text/javascript">

//hide initially    
$("table#mytable").hide();

// show function
function showit() {
$("table#mytable").show();
}
</script>

とテーブル：

<table id="mytable"><tr><td>FOO</td><td>BAR</td></tr></table>

以下のフォーム（おそらくそれは重要です）表：

<form action="foobar.php">
<input name="example" onselect="showit()" />
<input type="submit" value="Send" />
</form>

onselectは完璧ではないと思いますが、私の場合はそれでうまくいくはずです。

上記のコードは、テーブルをまったく非表示にしません。何を間違えたのかわかりません。some1が間違いを見つけられることを願っています-ありがとう。

編集

これが解決策です：

head：

<script type="text/javascript">
function show(id) {
    document.getElementById(id).style.display = 'block';
}
</script>

非表示にするすべての要素で、style="display: none;"入力を追加および編集するだけonkeyup="show('id')です。ここで、idは非表示にする要素のIDです。#mytable

4

4 に答える 4

2

それが機能しない理由は、テーブル要素がレンダリングされる前にjavascriptを呼び出しているためです。これを行うには3つの方法があります。

// Use CSS (best):
<table style="display:none;" id="mytable">...</table>

また

// Using DOM Load event (wait for all of the elements to render) (second best)
$(function() { $("table#mytable").hide(); });

また

// Put your javascript at the bottom of the page instead of the head. (not preferred)
于 2012-06-01T21:55:24.917 に答える
0

onkeyupを使用することもでき、ドキュメントの準備ができていると役立つ場合があります

$(document).ready(function() {
 $("#mytable").hide();
   $("#example").keyup(function (e) { 
$("#mytable").show();
}) 
});​

jfidle http://jsfiddle.net/dznej/

于 2012-06-01T21:58:13.687 に答える
0

私があなたのために作成したフィドルをチェックしてください-http://jsfiddle.net/ggJSg/

基本的に2つの問題があります：

  • $("#mytable").hide();DOMの準備ができたときにのみ呼び出す必要があります
  • 適切なイベント（私の例ではフォーカスなど）を使用して、テーブルの表示をトリガーします
于 2012-06-01T21:59:21.893 に答える
-1

DOMの読み込みが完了したときにコードを実行するには、 .ready（）関数を使用する必要があります。次に、.change（）関数を使用して表示する必要があります。

$(document).ready(function () {

  // Hide initially    
  $('#mytable').hide();

  // When something changes in the input named `example` then show the table.
  $("[name='example']").change(function() {
    $('#mytable').show();
  });
});
于 2012-06-01T22:01:01.387 に答える