Tuesday 15 May 2012

hide - How to display 5 more rows of a table on the click on a button using jQuery -


I pre-load the table with all of my ranks However, I only select the top 10 rows & Lt; Tbody & gt; Within the tag and now every & lt; Tr & gt; I want to show in the table.

So here's what I have done so far:

  var trs = $ ("#internal actions> gt; table & gt; group> tr "); Trs.hide (); Trs.slice (0, 9) .show (); $ ("#ourourrackcord") Click (function (e) {e.preventDefault (); $ ("#internal activivity TR: hidden"). Piece (0, 10). Show ();}); $ ("#secrosscards") Click (function (e) {epeprint default (); $ ("#internal activivity tr") piece (9, 19) .hide ();});   

The issue with the above code is that:

  1. this & lt; Tr & gt; & lt; Tbody & gt; tag.
  2. The lower button needs to remove 10 rows from the bottom, not all of them.
  3. I need to hide the button seeMorercards if all of them are displayed.
  4. If the minimum line is displayed, then see the seeServerCord button.

    The Final Watch My script will display 10 lines by default and if the user clicks more then you will see 10 more. So this is 10 increments at a time and once you hit the maximum, after hiding more button. See less, only when it appears that more than 10 rows are displayed.

    1. You selector $ ("#internal activivity tr") < / Code>, which is & lt; Tr & gt; > or

    2. You need to save the current displayed index in a different variable, or calculate the current index based on the selection of how many elements (

    3. Check the current number of displayed elements and show / hide related buttons.

      Example

      HTML
        & lt; table id = "internal actions" & gt; & gt; / table & gt; Lt; input type = "button" id = "see more Cords "value =" more ">    

      javascript
        (var i = 0; i & lt; 21; i ++) {$ ('# attachment (' <& lt; Td & gt; My data & lt; / td & gt; & lt; / tr & gt; ');} Var trs = $ ("#internal verb tr"); Var BTN More = $ ("#ourcorecorder") ; Var btnLess = $ ("#WellScards"); var trsLength = trs.length; var runoutx = 10; Trs.hide (); Trs.slice (0, 10). Show (); CheckButton (); BtnMore.click (function (e) {e.preventDefault (); $ ("#internal activations tr"). Slices (current index, currentIndex + 10) .show (); current index + = 10; check button ();} ); BtnLess.click (function (e) {e.preventDefault (); $ ("#internal activation tr"). Slices (current index - 10, current index) .hide (); current index - = 10; check button () ;}); Function check button () {var currentLength = $ ("#internal activative tr: visible"). Length; If (current lang> = trsLength) {btnMore.hide (); } And {BT.N More.sho (); } If (trsLength & gt; 10 & amp; amp; amp; Current Lang & gt; 10) {btnLess.show (); } Other {btnLess.hide ())}}   

      I made it to look into action.

No comments:

Post a Comment