在 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

你可以定义一个class，然后动态生成你的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;
}

对你有帮助吗？

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

Conditional style formatting using a format rules object in Javascript / React

html

javascript

conditional-formatting

conditional-statements

reactjs