Question

我正在尝试创建表格，点击每一行应该将div侧的内容更改为jquery标签...

我用于此的代码是

HTML

<table>
   <tr id="oone">
      <td>1</td><td>1</td><td>1</td>
   </tr>
   <tr id="ttwo">
      <td>2</td><td>2</td><td>2</td>
   </tr>
   <tr id="tthree">
      <td>3</td><td>3</td><td>3</td>
   </tr>
</table>

<div class="sample">
    <div id="one">
      one
    </div>
    <div id="two">
     two        
    </div>
    <div id="three">
     three      
    </div>
</div>

CSS

table{
    float:left;
}
table tr td{
   border:1px solid #000;
    padding:10px;
}
.sample{
    width:300px;
    height:145px;
    background-color:#999;
    float:left;
}

#one{
    display: none;
}
.current{
    display:block;
}

#two{
    display: none;
}
#three{
    display: none;
}

jquery 1.7.2 on load

$(function(){

$("table tr").click(function(){

    event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
});
});

这里是jsfiddle

问题是，如果我把第一个tr标签改为div，那么在第二个tr后它应该显示第二个div不能正常工作....

谢谢你的时间......

Answer 1

好的，所以如果我理解正确的话，你可以通过修改代码来实现这一点：

首先，制作您尝试查找的HREF属性：

<table>
    <tr href='one'><td>1</td><td>1</td><td>1</td></tr>
    <tr href='two'><td>2</td><td>2</td><td>2</td></tr>
    <tr href='three'><td>3</td><td>3</td><td>3</td></td>
</table>

<div class="sample">
    <div id="one">one</div>
    <div id="two">two</div>
    <div id="three">three</div>
</div>

然后，你可以这样做：

$("table tr").click(function(){
    $($('#' + $(this).attr("href"))).siblings().hide().end().fadeIn();
});

找到ID与您的href属性匹配的div，首先隐藏其兄弟，然后按要求淡入。这是一个小提琴：http://jsfiddle.net/nh6kL12o/。

Answer 2

见小提琴： http://jsfiddle.net/3518Ldgk/

HTML：

<table>
   <tr data-tab="one">
      <td>1</td><td>1</td><td>1</td>
   </tr>
   <tr data-tab="two">
      <td>2</td><td>2</td><td>2</td>
   </tr>
   <tr data-tab="three">
      <td>3</td><td>3</td><td>3</td>
   </tr>
</table>

<div class="sample">
    <div class="tab-content" id="one">
      one
    </div>
    <div class="tab-content" id="two">
     two        
    </div>
    <div class="tab-content" id="three">
     three      
    </div>
</div>

CSS：

table{
    float:left;
}
table tr td{
   border:1px solid #000;
    padding:10px;
}
.sample{
    width:300px;
    height:145px;
    float:left;
}

.current{
    background-color: yellow;
}

#one{
    display: none;
    background-color: blue;
}

#two{
    display: none;
    background-color: green;
}
#three{
    display: none;
    background-color: red;
}

JS：

$(function(){

$("table td").click(function(){

    event.preventDefault();
        $('table td').removeClass('current');
        $(this).addClass("current");
        var tab = $(this).parent().attr("data-tab");
        $('.tab-content').hide();
        $('#' + tab).fadeIn();
    });
});

Answer 3

这是一个小提琴。我认为这简化了它：

http://jsfiddle.net/n3ng3g4q/3/

HTML

SELECT * FROM questions WHERE... (array "test_id" contains 2)

JS

<table>
    <tr id="oone" data-value="one">
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr id="ttwo" data-value="two">
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr id="tthree" data-value="three">
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
</table>
<div class="sample">
    <div id="one">one</div>
    <div id="two">two</div>
    <div id="three">three</div>
</div>

更改表行单击事件的div

3 个答案: