Vamshi Chigullapally Vamshi Chigullapally - 2 months ago 12
HTML Question

change div on table row click event

am trying to create table where on clicking each row should change content on the div side to it just like jquery tabs...

the code i used for this is

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();
});
});


here is jsfiddle

the thing is if i put on the first tr tag its changing in the div then after second tr it should show the second div its not working....

thanks for your time...

Answer

See fiddle: 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();
    });
});