Member Avatar for jayhall

Hi All,
i am use the follwing code work fine, how can i make id for each row in table or div id so only row show which i req.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {
		    $('#toggle3').click(function() {
	$('.toggle3').toggle('slow');
	return false;
});

		});
	</script>
    
    
    </head>
    <body>
    1313
    </body>
</html>



<a href="#" id="toggle3">Animated Toggle</a><br /><br />
<div class="toggle3" style="display:none;">
<table width="200" border="6">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</div>

Please advice how can be do this,,,,,

  • 5 Contributors
  • 6 Replies
  • 15K Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by Quique_1

Recommended Answers

All 6 Replies

Member Avatar for stbuchok

Can you explain a little better what you are trying to accomplish?

Member Avatar for jayhall

thank you for your reply,


make a table where need to hide row with the id or name as need,

Member Avatar for stbuchok

Is this what you are talking about?

<table>
    <tr id="row1">
        <td>
        </td>
    </tr>
    <tr id="row2">
        <td>
        </td>
    </tr>
    <tr id="row3">
        <td>
        </td>
    </tr>
</table>
<script>
$(function(){
    //hide row1
    $('#row1').hide();

    //hide row2
    $('#row2').hide();
});
</script>
Member Avatar for R.Manojkumar 
<script type="text/javascript">
		$(function() {
		    $('#toggle3').click(function() {
	$('.toggle3').toggle('slow');
	return false;
});
 
		});
	</script>

remove.toggle('slow'); then use .show() and .hide() methods

$('.toogle3').show(500); //500 refers half seconds
Member Avatar for rikin_1

You can also use some thing like below, give an id to your table like "my_table" so that in case of multiple table s in a page it will affect only specific table. and by using 2,3 you can refer row number #2 and #3 should be hide and #4, #5 means row number #4 and #5 should be display.

 $("#my_table tr:nth-child(2)").hide();
 $("#my_table tr:nth-child(3)").hide();

 $("#my_table tr:nth-child(4)").show();
 $("#my_table tr:nth-child(5)").show();

Call it on click event of any thing and check.

Member Avatar for Quique_1 
$( document ).ready(function() {
       $.each($(".yourclass"), function(){       
           $(this).prevUntil('.yourclass').hide();
      });

      $('.yourclass').click(function(){
        $(this).nextUntil('.yourclass').toggle();
      });
    });



<table>
  <tr class="yourclass">
    <td>rows</td>
    <td>rows</td>
    <td>rows</td>
    <td>rows</td>
  </tr>
</table>
Edited by Quique_1
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.