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。有三种方法可以做到这一点：

// 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();
}) 
});​

jfiddle http://jsfiddle.net/dznej/

于 2012-06-01T21:58:13.687 回答
0

查看我为您创建的小提琴 - http://jsfiddle.net/ggJSg/

基本上有两个问题：

  • $("#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 回答