make table display part to part

Tấn Trung Trương 0
Viewed 31

I have a table with 4 rows and columns, I want to first show half of it and then show half of the rest. How to do it? I have tried this js code with event fadeIn() but not working:

    $.fn.slide=function(){
        var self=this,kids=self.children()
        setInterval(function(){
            kids.filter(':hidden').fadeIn()
            $(this).appendTo(self)
            kids=self.children()
        },1000)
        return this
    }
    $(function(){
        $('tbody').slide()
    })

My html:

<table id="myTbl"> 
          <thead>
            <tr> 
              <th>A</th>
              <th>B</th>
              <th>C</th>
              <th>D</th>
            </tr>
          </thead>
        <tbody>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
          </tr>
          <tr>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
          </tr>
          <tr>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
          </tr>
        </tbody>
     </table>

Like first display rows from 1->8 and after that delete it, display from 9->16.

javascript html
1 Answers

The first mistake is that in the setInterval you used this which referred to window and not the table as I think you thought, using the code below every x seconds you will have the data change:

$.fn.slide = function() {
  var self = this,
    kidsHidden = self.children().filter(':hidden'),
    kidsNotHidden = self.children().filter(':not(:hidden)');
  kidsHidden.fadeIn();
  kidsNotHidden.fadeOut();
};
$(function() {
  setInterval(function() {
    $('tbody').slide()
  }, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTbl">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr hidden>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr hidden>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
  </tbody>
</table>

Instead if you need just one time slide you need setTimeout like:

$.fn.slide = function() {
  var self = this,
    kidsHidden = self.children().filter(':hidden'),
    kidsNotHidden = self.children().filter(':not(:hidden)');
  kidsHidden.fadeIn();
  kidsNotHidden.fadeOut();
};
$(function() {  
  setTimeout(function() {
    $('tbody').slide()
  }, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTbl">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr hidden>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr hidden>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
  </tbody>
</table>

Reference:

Simone Rossaini0
Related