Question

我搜索了很多关于这个问题的内容，但遗憾的是无法解决这个问题。我想要完成的是如果一个单元格达到状态2它应该变红。它引导我 document.getElementById（'statusOfCell'）。style.backgroundColor ='red'; 如果我用脚本标签将其添加到我的html网站但不在我的流星应用程序中，它将起作用。

hello.html的

<head>
  <title>hello</title>
</head>

<body>
  <h1 style="background-color: aqua">Welcome to Meteor!</h1>
  {{> liste}}
</body>

<template name="liste">
  <table>
    {{#each listItem}}
        <tr class="{{listOfNumbers}}">
      <td id="statusOfCell">{{status}}</td>
        </tr>
    {{/each}}
  </table>
</template>

hello.js

if (Meteor.isClient) {
   Template.liste.helpers({
        listItem: [{status: 1}, {status: 1}, {status: 2}, {status: 1}],
    'listOfNumbers': function(){
        var listStatus = this.status;
         console.log(listStatus);
            if(listStatus == 2){
              statusOfCell=status;          
  document.getElementById('statusOfCell').style.backgroundColor = 'red';
            }
     }
   })
  }

console.log向我显示正确的数字。错误消息是：无法在Object处读取null的属性“style” 发生的原因是： document.getElementById（）= null。

Answer 1

您的Id被循环复制，因此无法找到正确的Id来设置颜色。您的代码有几个问题，但

listOfNumbers：是一个辅助函数，因此它应该为模板上的类返回一些东西
通过循环渲染页面时不要更改背景。相反，返回正确的css类，然后指定该css类

meteor Java Script如何更改单元格中的背景颜色

1 个答案: