使用 Javascript / React 中的格式规则对象的条件样式格式

Question

我想通过根据匹配的一组条件将样式应用于元素来进行一些条件格式化。在下面的示例中，如果元素的值（比如说 110）与规则中提供的条件 lt（小于 150）和 gt（大于 100）值匹配，我想应用提供的背景颜色（红色）。

"format": [
        {
          "tag": "bgcolor",
          "value": "#ff0000",
          "rules": [
            {
              "name": "lt",
              "value": "150"
            },
            {
              "name": "gt",
              "value": "100"
            }
          ]
        }
      ]

<td>90</td> - would not have red background (not >100)
<td>120</td> - would have red background (>100 and < 150)
<td>100</td> - would not have red background (not >100)

用 JS 实现这一点的正确方法是什么？

注意规则数组中的条件值（100, 150）例如，它们可以是不同的值。 如果背景颜色大于或小于某个值，也可以只有 lt 或 gt 来应用背景颜色

Answer 1

你可以定义一个类，然后动态生成你的 tds

.valid-score { color: red }


function generateTd(formatValue) {
  const td = document.createElement("td");
  td.innerText = formatValue;
  if (formatValue > 100 && formatValue < 150) {
    td.classList.add("valid-score");
  }
  return td;
}

function generateTdList(container, formatValueArr) {
  const frag = document.createDocumentFragment();
  formatValueArr.forEach(formatValue => frag.append(generateTd(formatValue)));
  container.append(frag);
  frag = null;
}

更新

const compareFuncMap = {
  lt: (value, formatValue) => value < formatValue,
  gt: (value, formatValue) => value > formatValue
};

function generateTd(value, rules) {
  const td = document.createElement("td");
  td.value = value;
  const valid = rules.some(({ name, value }) => compareFuncMap[name](value, value));
  if (valid) td.classList.add("valid-score");
  return td;
}

function generateTdList(container, valueArr) {
  const frag = document.createDocumentFragment();
  valueArr.forEach(value => frag.append(generateTd(value)));
  container.append(frag);
  frag = null;
}

对你有帮助吗？