gpt4 book ai didi

javascript - meteor Javascript如何更改单元格中的背景颜色

转载 作者:行者123 更新时间:2023-12-03 08:02:44 25 4
gpt4 key购买 nike

我在谷歌上搜索了很多关于这个问题的信息,但遗憾的是无法解决它。我想要完成的是,如果一个单元格达到状态 2,它应该变成红色。它引导我 document.getElementById('statusOfCell').style.backgroundColor = '红色';如果我使用脚本标记将其添加到我的 html 网站,但不在我的 meteor 应用程序中,它将起作用。

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 显示了正确的数字。错误消息是:无法读取对象中 null 的属性“样式”发生这种情况的原因是: document.getElementById() = null。

最佳答案

您的 Id 被循环重复,因此无法找到正确的 Id 来设置颜色。不过您的代码存在几个问题

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

关于javascript - meteor Javascript如何更改单元格中的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34521378/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com