如何在单击链接时切换表格单元格的内容


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有很多问题。

  1. 不能使用#tekst作为参数
  2. #tekst替换为tekst
  3. 通过this,而不是其他。
  4. 使用三元运算符代替简单的ifelse
  5. 没有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或特定的类来调用。但我假设您可以相应地编辑代码。