表中 Javascript 的动画不起作用。怎么修？

谢尔盖·基齐耶夫

表中 1-5 行的动画有效。6号线上没有。你可以在这里看到它的实际效果。

如果您删除<td>Ff</td>，则动画适用于每一行。

var twoColComp = {
  init: function (){
    var tables = document.getElementsByTagName('table');

    for(var i = 0; i < tables.length; i++) {

      if (new RegExp('(^| )two-column-comp( |$)', 'gi').test(tables[i].className)){
         return;
      }
      var h = tables[i].clientHeight, 
          t = tables[i].getBoundingClientRect().top,
          wT = window.pageYOffset || document.documentElement.scrollTop,
          wH = window.innerHeight;

      if(wT + wH > t + h/2){
         this.make(tables[i]);
       }
    }
  },
  
  make : function(el){
    var rows = el.getElementsByTagName('tr'),
        vals = [],
        max,
        percent;

    for(var x = 6; x < rows.length; x++) {
      var cells = rows[x].getElementsByTagName('td');
      for(var y = 1; y < cells.length; y++){
        vals.push(parseInt(cells[y].innerHTML, 10));
      }
    }

    max = Math.max.apply( Math, vals );
    percent = 100/max;

    for(x = 0; x < rows.length; x++) {
      var cells = rows[x].getElementsByTagName('td');
      for(var y = 1; y < cells.length; y++){
        var currNum = parseInt(cells[y].innerHTML, 10);
        cells[y].style.backgroundSize = percent * currNum + "% 100%";
        cells[y].style.transitionDelay = x/20 + "s";
      } 
    }

    el.className =+ " two-column-comp"
  }
}

window.onload = function(){
  twoColComp.init();
}

window.onscroll = function(){
  twoColComp.init();
}

body {
  font-family: sans-serif;
  max-width: 60em;
  margin: auto;
  padding: 1em;
}

table {
  width: 100%;
  background: #eee;
  padding: 1em;
  margin: 1em auto;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

th { font-size: 1.2em }

td {
  font-weight: bold;
  border-bottom: 1px solid #fbfbfb;
  width: 20%;
  padding: .5em .25em;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  -webkit-transition: all .75s ease-out;
  -moz-transition: all .75s ease-out;
  transition: all .75s ease-out;
}

td:nth-child(2) {
  width: 40%;
  color: white;
  text-shadow: 1px 2px #222;
  text-align: right;
  background-image: -webkit-linear-gradient(to left, #e74c3c, #e74c3c);
  background-image: -moz-linear-gradient(to left, #e74c3c, #e74c3c);
  background-image: linear-gradient(to left, #e74c3c, #e74c3c);
  background-position: right top;
}

td:nth-child(3) {
  width: 40%;
  color: white;
  text-shadow: 1px 2px #222;
  background-image: -webkit-linear-gradient(right, #3498db, #3498db);
  background-image: -moz-linear-gradient(right, #3498db, #3498db);
  background-image: linear-gradient(right, #3498db, #3498db);
  background-position: left top;
}

<table>
  <tr>
    <th>Name</th>
    <th>Up</th>
    <th>Down</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>A</td>
    <td>700</td>
    <td>170</td>
    <td>Aa</td>
  </tr>
  <tr>
    <td>B</td>
    <td>435</td>
    <td>100</td>
    <td>Bb</td>
  </tr>
  <tr>
    <td>C</td>
    <td>500</td>
    <td>175</td>
    <td>Cc</td>
  </tr>
  <tr>
    <td>D</td>
    <td>350</td>
    <td>170</td>
    <td>Dd</td>
  </tr>
  <tr>
    <td>E</td>
    <td>1980</td>
    <td>350</td>
    <td>Ee</td>
  </tr>
  <tr>
    <td>F</td>
    <td>2000</td>
    <td>180</td>
    <td>Ff</td>
  </tr>
</table>

沉默

在第 137 行，您可以添加~~(docs)以将从每个单元格的最后一个单元格NaN获得的值转换为 value 。parseInt(cells[y].innerHTML, 10)tr0

例如，在Ff，价值parseInt会NaN。添加~~会将其转换为0.

在此示例中（第 141 行），该NaN值将是最大值，因此它不会backgroundSize在第 148 行正确应用。

console.log(Math.max.apply( Math, [2000, 100, NaN] ));
console.log(Math.max.apply( Math, [2000, 100, 0] ));

修改代码

var twoColComp = {
  init: function (){
    var tables = document.getElementsByTagName('table');

    for(var i = 0; i < tables.length; i++) {

      if (new RegExp('(^| )two-column-comp( |$)', 'gi').test(tables[i].className)){
         return;
      }
      var h = tables[i].clientHeight, 
          t = tables[i].getBoundingClientRect().top,
          wT = window.pageYOffset || document.documentElement.scrollTop,
          wH = window.innerHeight;

      if(wT + wH > t + h/2){
         this.make(tables[i]);
       }
    }
  },
  
  make : function(el){
    var rows = el.getElementsByTagName('tr'),
        vals = [],
        max,
        percent;

    for(var x = 0; x < rows.length; x++) {
      var cells = rows[x].getElementsByTagName('td');
      for(var y = 0; y < cells.length; y++){
        vals.push(~~parseInt(cells[y].innerHTML, 10));
      }
    }

    max = Math.max.apply( Math, vals );
    percent = 100/max;

    for(x = 0; x < rows.length; x++) {
      var cells = rows[x].getElementsByTagName('td');
      for(var y = 0; y < cells.length; y++){
        var currNum = parseInt(cells[y].innerHTML, 10);
        cells[y].style.backgroundSize = percent * currNum + "% 100%";
        cells[y].style.transitionDelay = x/20 + "s";
      } 
    }

    el.className =+ " two-column-comp"
  }
}

window.onload = function(){
  twoColComp.init();
}

window.onscroll = function(){
  twoColComp.init();
}

body {
  font-family: sans-serif;
  max-width: 60em;
  margin: auto;
  padding: 1em;
}

table {
  width: 100%;
  background: #eee;
  padding: 1em;
  margin: 1em auto;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

th { font-size: 1.2em }

td {
  font-weight: bold;
  border-bottom: 1px solid #fbfbfb;
  width: 20%;
  padding: .5em .25em;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  -webkit-transition: all .75s ease-out;
  -moz-transition: all .75s ease-out;
  transition: all .75s ease-out;
}

td:nth-child(2) {
  width: 40%;
  color: white;
  text-shadow: 1px 2px #222;
  text-align: right;
  background-image: -webkit-linear-gradient(to left, #e74c3c, #e74c3c);
  background-image: -moz-linear-gradient(to left, #e74c3c, #e74c3c);
  background-image: linear-gradient(to left, #e74c3c, #e74c3c);
  background-position: right top;
}

td:nth-child(3) {
  width: 40%;
  color: white;
  text-shadow: 1px 2px #222;
  background-image: -webkit-linear-gradient(right, #3498db, #3498db);
  background-image: -moz-linear-gradient(right, #3498db, #3498db);
  background-image: linear-gradient(right, #3498db, #3498db);
  background-position: left top;
}

<table>
  <tr>
    <th>Name</th>
    <th>Up</th>
    <th>Down</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>A</td>
    <td>700</td>
    <td>170</td>
    <td>Aa</td>
  </tr>
  <tr>
    <td>B</td>
    <td>435</td>
    <td>100</td>
    <td>Bb</td>
  </tr>
  <tr>
    <td>C</td>
    <td>500</td>
    <td>175</td>
    <td>Cc</td>
  </tr>
  <tr>
    <td>D</td>
    <td>350</td>
    <td>170</td>
    <td>Dd</td>
  </tr>
  <tr>
    <td>E</td>
    <td>1980</td>
    <td>350</td>
    <td>Ee</td>
  </tr>
  <tr>
    <td>F</td>
    <td>2000</td>
    <td>180</td>
    <td>Ff</td>
  </tr>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。