Question

嘿，我想在用户填写输入时显示一个表格。

我拥有的是：

<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

Answer 1

它无法工作的原因是因为您在呈现表元素之前调用了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)

Answer 2

您也可以使用onkeyup和文档就绪帮助

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

jfidle http://jsfiddle.net/dznej/

Answer 3

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

基本上有两个问题：

只有在DOM准备就绪时才需要调用$("#mytable").hide();
使用适当的事件（如我的示例中的焦点）来触发表格显示

Answer 4

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

javascript在输入填充时显示隐藏的元素

4 个答案: