从特定的 td 中删除 css 内联类和样式

Question

我有一个剑道网格，它正在生成以下代码：

<div id="myGrid" class="k-grid k-widget" data-role="grid" style="display: block;">
   <div class="k-grid-header" style="padding-right: 17px;">
     <div class="k-grid-header-wrap">
       <table role="grid">
          <colgroup>
             <col>
          </colgroup>
          <thead role="rowgroup">
            <tr role="row">
               <th role="columnheader" data-field="filename" rowspan="1" data-title="Nombre" data-index="0" id="9d93448e-a9f6-42bd-8ba6-c8b31334efcc" class="k-header">Name</th>
               <th id="1b52a29e-730e-471c-978f-a44cffad7d90" rowspan="1" data-index="1" class="k-header">/th>
            </tr>
          </thead>
       </table>
    </div>
  </div>
  <div class="k-grid-content">
    <table role="grid">
      <colgroup>
        <col>
      </colgroup>
      <tbody role="rowgroup">
        <tr data-uid="368518f3-0ffc-4797-b262-85346e89430e" role="row">
          <td class="text-disabled-color" role="gridcell">
            <a href="javascript:" onclick="onOpenFile(&quot;/myController/myAction/OpenAttachmentById&quot;,&quot;9286f5c9-447b-4fb5-b322-0d5bf09d1913&quot;)">myFile.pdf</a>
          </td>
          <td style="display:none" role="gridcell">
            <a class="k-button k-button-icontext k-grid-delete" href="#"><span class="k-icon k-delete"></span></a>
          </td>
        </tr>
      </tbody>
    </table>
   </div>
  </div>

仅从第二个表中，我想从 td 元素中删除以下两个内联类和 css 样式：

class="text-disabled-color"
style="display:none"

我知道我可以使用 jQuery 做到这一点：

$("td[class='text-disabled-color']").removeAttr("class");​
$("td[style='display:none']").removeAttr("style");​

但这有点危险，因为如果另一个 td 元素具有相同的内联类和样式，它将被删除。

我想从 div 容器 myGrid 中的第二个表中删除内联类和样式。想象有另一个表，其中包含具有相同内联类和样式的 td 元素，在这种情况下，我不想删除它们，只删除 myGrid 容器中的那些。我该怎么做？

Answer 1

由于您总是需要删除第二张表css 和style，您可以使用table:eq(1) 这将引用第二张表，即：

$("#myGrid table:eq(1) td.text-disabled-color").removeAttr('class')
$("#myGrid table:eq(1) td[style='display:none']").removeAttr("style");

Answer 2

您可以使用下面的脚本在 div 中找到具有 k-grid-content 类的表格。查找表中的所有 td 并删除类/属性。

$(function(){
   var $table = $('#myGrid div.k-grid-content table[role=grid]');
   $table.find('td[role="gridcell"]').each(function(){
      $(this).removeClass('text-disabled-color');
      $(this).removeAttr('style');
   });
});

.text-disabled-color {
   color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myGrid" class="k-grid k-widget" data-role="grid" style="display: block;">
   <div class="k-grid-header" style="padding-right: 17px;">
     <div class="k-grid-header-wrap">
       <table role="grid">
          <colgroup>
             <col>
          </colgroup>
          <thead role="rowgroup">
            <tr role="row">
               <th role="columnheader" data-field="filename" rowspan="1" data-title="Nombre" data-index="0" id="9d93448e-a9f6-42bd-8ba6-c8b31334efcc" class="k-header">Name</th>
               <th id="1b52a29e-730e-471c-978f-a44cffad7d90" rowspan="1" data-index="1" class="k-header"></th>
            </tr>
          </thead>
       </table>
    </div>
  </div>
  <div class="k-grid-content">
    <table role="grid">
      <colgroup>
        <col>
      </colgroup>
      <tbody role="rowgroup">
        <tr data-uid="368518f3-0ffc-4797-b262-85346e89430e" role="row">
          <td class="text-disabled-color" role="gridcell">Some text
            <a href="javascript:" onclick="onOpenFile(&quot;/myController/myAction/OpenAttachmentById&quot;,&quot;9286f5c9-447b-4fb5-b322-0d5bf09d1913&quot;)">myFile.pdf</a>
          </td>
          <td style="display:none" role="gridcell">Some text
            <a class="k-button k-button-icontext k-grid-delete" href="#"><span class="k-icon k-delete"></span></a>
          </td>
        </tr>
      </tbody>
    </table>
   </div>
  </div>