javascript - table下的单元格使用innerHTML，怎么为其添加样式？
我为一个表格插入一些json数值，其中某个单元格，希望为其添加样式。如下代码，我想为每行的单元格4做一个判断，如果是不通过，就自动增加font：red,让这个值显眼一点。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <table id="myTable"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>分数</th> <th>结果</th> </tr> </thead> <tbody></tbody> </table> </body></html><script> var stu = [ { name: "张三", sex: "男", fenshu: "100" }, { name: "李四", sex: "男", fenshu: "60" }, { name: "王五", sex: "男", fenshu: "90" }, ]; const table = document.getElementById("myTable"); const tbody = table.getElementsByTagName("tbody")[0]; for (let i = 0; i < stu.length; i++) { const item = stu[i]; const row = tbody.insertRow(i); const nameCell = row.insertCell(0); nameCell.innerHTML = item.name; const sexCell = row.insertCell(1); sexCell.innerHTML = item.sex; const scoreCell = row.insertCell(2); scoreCell.innerHTML = item.fenshu; const resultCell = row.insertCell(3); resultCell.innerHTML = calculateResult(item.fenshu); } function calculateResult(score) { if (score >= 80) { return "通过"; } else { return "不通过"; } }</script>共有1个答案
这个是你想要的吗？
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <table id="myTable"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>分数</th> <th>结果</th> </tr> </thead> <tbody></tbody> </table> </body></html><script> var stu = [ { name: "张三", sex: "男", fenshu: "100" }, { name: "李四", sex: "男", fenshu: "60" }, { name: "王五", sex: "男", fenshu: "90" }, ]; const table = document.getElementById("myTable"); const tbody = table.getElementsByTagName("tbody")[0]; for (let i = 0; i < stu.length; i++) { const item = stu[i]; const row = tbody.insertRow(i); const nameCell = row.insertCell(0); nameCell.innerHTML = item.name; const sexCell = row.insertCell(1); sexCell.innerHTML = item.sex; const scoreCell = row.insertCell(2); scoreCell.innerHTML = item.fenshu; const resultCell = row.insertCell(3); resultCell.innerHTML = calculateResult(item.fenshu); resultCell.style.color = item.fenshu >= 80 ? "auto" : "red"; } function calculateResult(score) { if (score >= 80) { return "通过"; } else { return "不通过"; } }</script>希望能帮助到你。
-
本文向大家介绍怎样在react中使用innerHTML？相关面试题，主要包含被问及怎样在react中使用innerHTML？时的应答技巧和注意事项，需要的朋友参考一下 dangerouslySetInnerHTML https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
-
我对element-ui表格的最后一列使用合并单元格，结果，最后一行的高度出现了问题，会变得比其他行都高的多。如图所示： 这什么情况，如何解决？ 代码：
-
问题内容： 我正在尝试将此代码添加到动态创建的div元素中 创建动态的代码是 我的想法是在之后添加样式，但我不知道该怎么做。 问题答案： 这应该向元素添加内联样式。
-
问题内容： 快速的问题，我知道我们可以 改变 一个内容 通过使用： 现在，有没有一种方法可以将内容 添加 到div而不是替换它？？？这样我就可以 （当然使用类似的东西） 问题答案：
-
我有一个Vue组件（Highlight.vue），现在写一个Markdown组件，要复用这个Highlight.vue组件，markdown中解析代码模块是通过js回调方式的，示例如下： 各位大佬，有没有办法解决这种插入vue组件代码的？
-
问题内容： 什么是空指针异常（），什么原因导致它们？ 可以使用哪些方法/工具确定原因，以阻止异常导致程序过早终止？ 问题答案： 声明引用变量（即对象）时，实际上是在创建指向对象的指针。考虑以下代码，您在其中声明基本类型的变量： 在此示例中，变量是an ，Java会为您初始化它。在第二行为其分配值时，您的值将写入所指的存储位置。 但是，当您尝试声明引用 类型时 ，会发生一些不同的事情。采取以下代码：