Javascript 中，透过onclick事件来显示表格内的文本，或者就文本，啥思路啊咋写
日期：2014-05-16 浏览次数：20316 次
Javascript 中，通过onclick事件来显示表格内的文本，或者就文本，啥思路啊咋写啊
通过onclick来完成2件事，一是显示图片，二是显示介绍的内容。显示图片的我完成了，显示文字的我不确定用啥东西来放文字了。有没有人教教我啊。我现在文字添加在td里的：
<td width="223"><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></td>
如何在onclick时候同时显示图片和文字。
------解决方案--------------------
------解决方案--------------------
我比较喜欢用jquery框架，对于原生的很久没写了。最好td里面的内容用一个div或什么来包住，这样是需要设置div的显示和隐藏就行了，隐藏是里面的所有内容也会隐藏，显示时里面的内容也会显示。具体实现如下
<td width="223"><div style="display:none;"><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></div>
</td>
<td width="223" >
<div style="display:none;">
<img src="test.jpg"></img>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
</td>
<td width="223" >
<div style="display:none;">
<img src="test.jpg"></img>
</div>
</td>
$("td").bind("click",function(){
$(this).children().each(function(){
if($(this).is(":hidden")){
$(this).show();
} else {
$(this).hide();
}
});
});
不晓得你是不是点击td做这个操作，这里实现的是点击的时候去判断div是显示的还是隐藏的，显示的就隐藏，隐藏的就显示，不知道能不能帮到你，如果你只是想单独处理文字或者图片依然可以使用这样的原理去实现
通过onclick来完成2件事，一是显示图片，二是显示介绍的内容。显示图片的我完成了，显示文字的我不确定用啥东西来放文字了。有没有人教教我啊。我现在文字添加在td里的：
<td width="223"><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></td>
如何在onclick时候同时显示图片和文字。
------解决方案--------------------
<html>
<head>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$("#btHidden").click(function (){
$("#txtTd").html(" ");
});
$("#btShow").click(function (){
$("#txtTd").html("Add new info !!");
});
});
</script>
</head>
<body>
<table border="1" width="400px;">
<tr height="50px;" >
<td id="txtTd" width="100px;">aaa</td>
<td>nnnn</td>
<td>bbbb</td>
</tr>
<tr height="50px;">
<td>cccc</td>
<td>etette</td>
<td>fdgfgfdg</td>
</tr>
</table>
<input type="button" id="btHidden" value="hidden"/>
<input type="button" id="btShow" value="show"/>
</body>
</html>
------解决方案--------------------
我比较喜欢用jquery框架，对于原生的很久没写了。最好td里面的内容用一个div或什么来包住，这样是需要设置div的显示和隐藏就行了，隐藏是里面的所有内容也会隐藏，显示时里面的内容也会显示。具体实现如下
<td width="223"><div style="display:none;"><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></div>
</td>
<td width="223" >
<div style="display:none;">
<img src="test.jpg"></img>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
</td>
<td width="223" >
<div style="display:none;">
<img src="test.jpg"></img>
</div>
</td>
$("td").bind("click",function(){
$(this).children().each(function(){
if($(this).is(":hidden")){
$(this).show();
} else {
$(this).hide();
}
});
});
不晓得你是不是点击td做这个操作，这里实现的是点击的时候去判断div是显示的还是隐藏的，显示的就隐藏，隐藏的就显示，不知道能不能帮到你，如果你只是想单独处理文字或者图片依然可以使用这样的原理去实现
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
