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

时间:2015-08-17 11:42:28

标签: javascript php jquery html css

我有一张包含一些数据的表格。 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';
    }
}

而不是显示我尝试使用溢出,编写一些脚本,但似乎没有任何工作。

2 个答案:

答案 0 :(得分:1)

好的,您的JavaScript中存在很多问题。

  1. 您不能将#tekst用作参数。
  2. #tekst替换为tekst
  3. 通过this而不是其他任何内容。
  4. 使用三元运算符代替简单ifelse
  5. 没有hidden
  6. 这是你的代码:

    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完成它,您可能需要查看呈现页面的源并从那里复制相关代码。

答案 1 :(得分:0)

确定。我创造了一个简单的小提琴here.

HTML:

table { border:1px solid #000; }
td { border-right:1px solid #000; }
td:last-child { border-right:none; }
td.hideMe { display:none; } 

CSS:

$('#test').click(function(){
    $('td:last-child').toggleClass('hideMe');
});

JS:

toggleClass

我不知道您的网页是如何布局的。但这是有效的解决方案。您需要使用jQuery&#39; toggle OR last-child隐藏和取消隐藏给定元素。我在我的示例中使用了 Mapper.CreateMap<src, des>() .ForMember(x => x.Date, o => { o.Condition(s => s.ContainsKey("DateTaxe")); o.ResolveUsing<DateTaxeResolver>(); }) .ForMember(x => x.Date, o => { o.Condition(s => !s.ContainsKey("DateTaxe") && s.ContainsKey("DateValue")); o.ResolveUsing<DateValue 选择器。您可能需要拨打ID或特定班级。但我假设您可以相应地编辑代码。