Javascript 单击按钮/文本时如何显示信息？

我有一张写着“见识更多”的表格，标题是“实习生保险…”

我希望人们能够单击“查看更多”，然后在标题下方显示信息

我该怎么做

谢谢

詹姆斯

<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right">
<font face="lucidagrande" size="2" color="red">See More...</font> 
</td>
</tr>
</table>

实习保险经纪人-伦敦
查看更多。。。

每当单击“查看更多…”时，我都会使用jQuery显示/隐藏文本块

---

当然，这假设您已经熟悉jQuery。如果你没有，或者你不能/不会使用它，一个快速的谷歌搜索就会出现

使用display=none；在样式中，并在onclick事件中将其删除。

您将需要：；有一个隐藏的DIV，在单击“查看更多”时显示。需要是Javascript或JQuery。或者使用一些PHP在表中生成另一行。

如果要从单独的文件加载数据，则必须使用AJAX。如果希望在单击“查看更多”时显示页面上已经存在的元素，可以使用常规javascript。只需向表中添加一个新行，给它一个ID并使用内联样式隐藏它。然后在“查看更多”文本周围添加一个链接，并为其提供一个显示隐藏行的onclick处理程序。像这样：

<table height="20" width="775" cellpadding="0" cellspacing="0">
    <tr>
        <td><font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font></td>
        <td align="right"><font face="lucidagrande" size="2" color="red"><a href="#" onclick="document.getElementById('showme').style.display = 'table-row'; return false;">See More...</a></font></td>
    </tr>
    <tr id="showme" style="display: none">
        <td colspan="2">More info appears here!!!</td>
    </tr>
</table>

实习保险经纪人-伦敦
更多信息出现在这里！！！

你的HTML很糟糕

以下是20世纪90年代的方法：

<div>Trainee Insurance Broker - London</div>
<div id="a1" style="display:none">### more information ###</div>
<a href="javascript://" onclick="showThis('a1')">See More...</a>

以下是一些提示：

• 不要将表格用于布局。使用HTML+CSS
• 不要使用内联字体语句，使用CSS
• 探索

---

带JQuery:
为“查看更多”按钮和要显示的内容提供ID：

$('#see_more').click( function() { $('#more_content').show(); });

$（文档）.ready（函数（）{
$（“#请参阅更多”）。单击（函数（）{
$（“#更多文字”）.show（）；
});
$（“#更多#文本”）.hide（）；
});
实习保险经纪人-伦敦
查看更多。。。
这里有更多的文字。。。。。。

可能还有其他方法——非JavaScript方法——但我一直使用JavaScript来实现这一点。将

onclick

处理程序添加到“

see more

”td，并在该处理程序中，将

more

元素设置为具有

display:inline

样式，类似如下（未测试）：

功能显示更多（元素到显示）{
var element_to_show=getRefToDiv（element_to_show）；
元素\u to \u show.style.display=“inline”；
}
实习保险经纪人-伦敦
查看更多。。。
当他点击“查看更多”时，他会看到这个。。。，

正如您所发现的，有很多方法可以实现这一点。如果您对最现代的技术感兴趣，您可能会希望很好地掌握DOM（文档对象模型）的工作原理，并查看名为jQuery（）的javascript库。即使具备了这些技术的基本知识，您也可以用很少的代码完成非常棒的工作。将HTML更新到21世纪的标准将有助于您的HTML开发体验。HTML中的

font

标记以及

color

、

face

和

align

属性都不推荐使用。通常也不赞成表格布局。我强烈推荐你学习丹·塞德霍姆的防弹网页设计。你好！非常感谢你的帮助！我已经输入了代码，但无法点击查看更多内容我应该添加什么？@James--很抱歉离开。首先，确保浏览器中已启用JavaScript。另外，请在页面的部分中添加。您的意思是“这是2000年的方法吗？”？如何以2000年的方式处理表？不，我只需要使用jQuery，在运行时连接所有事件处理程序，而不是传递ID。您忘记了JavaScript语句末尾的分号。

$('#see_more').click( function() { $('#more_content').show(); });

<script language="javascript">
$(document).ready(function(){

$('#see_more').click(function(){
$("#more_text").show();
});

     $("#more_text").hide();
});

</script>




 <table height="20" width="775" cellpadding="0" cellspacing="0">
 <tr>
 <td>
 <font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
 <td align="right" id="see_more">
 <font face="lucidagrande" size="2" color="red">See More...</font> 
 </td>
 </tr>

      <tr><td id="more_text">This is more text here......</td></tr>


 </table>

<script type="text/javascript">
function show_more ( element_to_show ) {
var element_to_show = getRefToDiv( element_to_show );
element_to_show.style.display = "inline";
}
</script>

<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right" onclick="show_more('more');">
<font face="lucidagrande" size="2" color="red">See More...</font> 
</td>
<td id="more" style="display:none;">The guy will see this when he clicks See More...</td>, 
</tr>
</table>