渲染表单删除Jquery添加的类

Question

我目前处于Web应用程序的重新设计过程中，我必须在现有UI中集成响应式设计。

因此，我想将col-*类添加到某些html标记中。就像桌子一样：

function addColstoTableCells() {
    $('table tr.formularClass td').addClass("col-6");
    $('table.formularTableClass tr td').addClass("col-6");
}

这成功将col-6类应用于所有必需的表单标记。但是当我点击一个复选框时，它会呈现如下形式：

<h:selectBooleanCheckbox id="ernst" value="#{dto.ernst}" disabled="#{!backingBean.sb.edit}">
                        <f:ajax render="@form" execute="@form" onevent="setFocus" />
</h:selectBooleanCheckbox>Ernst</td>

添加的col-类被删除，表单显示时没有col-宽度样式。有没有办法让Jquery添加的类持久化？ Web应用程序非常庞大，需要花费数小时才能将它们手动应用于所有td标记。

Answer 1

解决方案是使用CSS而不是JQuery来附加col-*样式类。

如果您使用的是Sass，只需扩展您想要的类/元素：

table {
  tr.formularClass td, &.formularTableClass tr td{
      @extend .col-6;
      display: table-cell;
   }
}

如果您使用的是CSS，请复制＆amp;将col-*样式类的内容粘贴到要扩展的类中。