如何删除jquery添加的样式属性

我正在使用具有一些自定义要求的 devExpress 表。

（更新） 休息了一天，然后回去并使用 React Styling 正确完成了它！感谢您的建议

在屏幕截图中，我禁用了某些单元格。但是，用户希望除所选行之外的所有单元格看起来均已禁用。

使用这个

   window
  .$("td")
  .not(document.getElementById(this.state.selection[0]))
  .not(document.getElementsByClassName(this.state.selection[0]))
  .not("td:first-child")
  .not(window.$("td:contains('iPlay')"))
  .not(window.$("td:contains('iLOE')"))
  .not(window.$("td:contains('iInvest')"))
  .not(window.$("td:contains('SPACER')"))
  .not(window.$("td:contains('$MM')"))
  .not(window.$("td:contains('$/BOE')"))
  .attr("style", "color:#868a8f");
window
  .$("td > div > div > div > input")
  .not(document.getElementsByClassName(this.state.selection[0]))
  .attr("style", "color:#868a8f");

I managed to achieve my desired result on page load

我的问题是，当我选择一个新行时，我无法删除之前未选择时应用的颜色。我试图使用“has”来查找所选行并将颜色更改回继承或完全删除样式属性。

    window
  .$("td")
  .has(document.getElementById(this.state.selection[0]))
  .has(document.getElementsByClassName(this.state.selection[0]))
  .not("td:first-child")
  .not(window.$("td:contains('iPlay')"))
  .not(window.$("td:contains('iLOE')"))
  .not(window.$("td:contains('iInvest')"))
  .not(window.$("td:contains('SPACER')"))
  .not(window.$("td:contains('$MM')"))
  .not(window.$("td:contains('$/BOE')"))
  .attr("style", "color:inherit");
window
  .$("td > div > div > div > input")
  .has(document.getElementsByClassName(this.state.selection[0]))
  .attr("style", "color:inherit");

如果有帮助的话，我确实有未选择的行的 ID。 我尝试用它做点什么，但没有运气

  const otherRows = ExpensesUtils.ROW_PROPS.filter(x => x !== this.state.selection[0]);
for (let i = 0; i < otherRows.length; i += 1) {
  window
  .$("td")
  .has(document.getElementById(otherRows[i]))
  .has(document.getElementsByClassName(otherRows[i]))
  .attr("style", "color:inherit");
  window
  .$("td > div > div > div > input")
  .has(document.getElementById(otherRows[i]))
  .has(document.getElementsByClassName(otherRows[i]))
  .attr("style", "color:inherit");
}

链接到 HTML表格 HTML https://jsfiddle.net/texas697/j4anvqhw/

this.state.selection[0] 是从下面的列表中选择的 rowId

我已将 rowIds 应用于嵌套组件中的类。我想不出另一种方法来访问它们。

  const ROW_PROPS = [
  "leaseAndWellExpense",
  "leaseAndWellExpenseBoe",
  "iloeLeaseAndWellExpense",
  "iloeLeaseAndWellExpenseBoe",
  "gnaLeaseAndWell",
  "gnaLeaseAndWellBoe",
  "transportation",
  "transportationBoe",
  "divisionGnA",
  "divisionGnABoe",
  "gatheringProcessing",
  "gatheringProcessingBoe",
  "hqGnA",
  "hqGnABoe",
  "interestExpense",
  "interestExpenseBoe",
  "netProdBoe",
  "leaseImpairments",
  "leaseImpairmentsBoe",
  "ddaProducing",
  "ddaProducingBoe",
  "iInvestDdaProducing",
  "iInvestDdaProducingBoe",
  "ddaGatheringProcessing",
  "ddaGatheringProcessingBoe",
  "iInvestDdaGatheringProcessing",
  "iInvestDdaGatheringProcessingBoe",
  "marketingCosts",
  "otherIncomeExpense",
  "otherIncomeExpenseBoe",
  "otherRevenue",
  "incomeTaxProvision",
  "incomeTaxProvisionBoe",
  "severanceTaxes",
  "severanceTaxesPercent",
  "currentTaxes",
  "currentTaxesRate",
  "netWellHeadRevenue",
];

最简单的方法是创建 CSS 规则的样式表。

在该样式表中，您应该定义2 节课.

假设 1 代表您想要的 CSS 规则，另一个代表默认/无规则。

我只是向您展示做这件事的最简单版本，但还有另一个方面。

$('#b1').on('click', function() {
  $('.c1').removeClass('c1');
  $(this).addClass('c2');
});

.c1 {
  color: red;
}

.c2 {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="b1">Change</button>
<p class="c1">This is a Test Line.</p>