如何在单击链接时切换表格单元格的内容
How to toggle content of a table cell when clicking on link?
我有一个表,其中有一些数据。数据在2列只是一个或两个字,但第三列包含约1000个字符,我希望这一列的数据切换时点击一个链接。这是我试过的代码:HTML
<div class="content">
<h2>Pretrazi pesme</h2> </br>
<form action="" method="post">
Zanr: <input type="text" name="zanr" id="idZanrInput" placeholder="Zanr pesme" onkeyup="sugestija(document.getElementById('idZanrInput').value)">
<div id="nazivZanraDiv"></div>
<br/>
Postojeci zanrovi: "Pop", "Rock", "House", "Metal" i "Hip-hop".
</br><br/>
<input type="submit" name="unos" value="OK">
</form>
Niste uneli prihvatljiv zanr, pa prikazujemo sve pesme iz baze. <table>
<tr>
<td><b>Naziv</b></td>
<td><b>Izvodjac</b></td>
<td><b>Tekst</b></td>
<td><b>Zanr</b></td>
</tr>
<tr>
<td>Simple boy</td>
<td>Karnivool</td>
<td ><p id="tekst">I'm high above the world
Why should I feel pain
Or feel alone
To be protected like a simple boy
If I choose to let you down
Begin to know
You're free to go
You're free to go
I will fight until there's nothing left
Cross the world together from this sinking ship
Or drown alone
Off the coast
Facing nothingness
Drawn to feel the emptiness
Oh help me now
Describe the scene
You're free to go
(We'll face these things some other day)
You're free to go
(I won't leave you you're not ok)
You're free to go
(We'll face these things some other day)
You're free to go
(I won't leave you you're not ok)
Simple boy, stay here
Simple boy, don't wander
Simple boy, you're safe here
Simple boy, simple boy
So when did we lose the plot
Were running against the clock
Don't hesitate
Or you will never know
Simple boy, you're free to go
Don't wander, you're free to go
Simple boy, you're free to go
You're safe here, you're free to go
You're free to go
You're free t</p><a href="#" onclick="toggle(display)"; id="zagrade">[...]</a></td>
<td>metal</td>
CSS: #tekst{
height:60px;
line-height:15px; /* Height / no. of lines to display */
overflow:hidden;
}
JavaScript: function toggle(#tekst) {
var state = document.getElementById(#tekst).style.display;
if (state == 'hidden') {
document.getElementById(#tekst).style.display = 'block';
} else {
document.getElementById(#tekst).style.display = 'none';
}
}
代替显示我尝试使用溢出,写一些脚本,但似乎没有工作。
好吧,你的JavaScript有很多问题。
- 不能使用
#tekst
作为参数 - 将
#tekst
替换为tekst
- 通过
this
,而不是其他。 - 使用三元运算符代替简单的
if
和else
- 没有
hidden
.
这是你的代码:
function toggle(tekst) {
var state = tekst.style.display;
if (state == 'hidden') {
tekst.style.display = 'block';
} else {
tekst.style.display = 'none';
}
}
用下面的代码代替上面的:
function toggle(tekst) {
tekst.style.display = (tekst.style.display == 'none') ? 'block' : 'none';
}
<td ><p id="tekst"><?php echo $red->tekst?></p><a href="#" onclick="toggle(this)";>[...]</a></td>
只有当你发布完整的HTML,我们才能完全帮助你。完整HTML的含义是,一旦您使用PHP完成了它,您可能需要查看呈现页面的源代码并从中复制相关代码。
好的。我在这里创建了一个简单的小提琴
HTML:<a href="#" id="test">Click me</a>
<br/>
<br/>
<table>
<tr>
<td>Some text..</td>
<td>Some more text..</td>
<td>Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text
Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text
Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text
Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text
</td>
</tr>
</table>
CSS: table { border:1px solid #000; }
td { border-right:1px solid #000; }
td:last-child { border-right:none; }
td.hideMe { display:none; }
JS:
$('#test').click(function(){
$('td:last-child').toggleClass('hideMe');
});
我不知道你的页面是如何布局的。但这是可行的解决方案。您需要使用jQuery的toggleClass
或 toggle
来隐藏和取消隐藏给定的元素。我在我的例子中使用了last-child
选择器。您可能有一个ID或特定的类来调用。但我假设您可以相应地编辑代码。
相关文章:
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 区分电子表格中的空单元格和0值
- 如何将jQuery/AAJAX结果放入表格单元格
- 在谷歌电子表格中循环单元格
- 使用下拉选择菜单高亮显示一行表格单元格
- 如何通过悬停或点击谷歌电子表格中的单元格来运行自定义功能
- 使用javascript下拉菜单更改表格单元格的颜色
- 表格单元格高度与背景高度匹配
- 在表格单元格中查找超链接
- 谷歌应用程序脚本-onFormSubmit-复制到电子表格中的单元格
- 为什么谷歌应用程序的电子表格setValue函数没有在单元格中设置值
- 数据表 ..如何根据表格的单元格值更改单元格的颜色
- 如何使用单击属性和工具提示动态创建表格单元格,该工具提示将超链接到页面
- 在 DIV 中定位表格单元格
- 单击时将表格单元格从范围更改为输入
- 使用 javascript 为 HTML 表格单元格指定颜色
- 将单击表格单元格重定向到其中的
- JQuery insertAfter();移动下一个表格单元格
- 将工作表复制到新的电子表格,将单元格值添加到新电子表格名称的末尾
- 单击并用CTRL+C复制值时高亮显示html表格单元格