表中的Javascript动画无效。怎么修？

Question

表中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>

Answer 1

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

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

在此示例（第141行）中，0值为最大值，因此不会在行148上正确应用NaN。

backgroundSize

修改后的代码

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