如何将样式属性添加到 HTML 表格中列的所有单元格？

Question

所以我有一个巨大的 HTML 表格，其中一些我已在下面插入：

<thead>
  <tr class="tableizer-firstrow">
    <th>Name</th>
    <th>Language</th>
    <th>Pages</th>
    <th>Author</th>
    <th>Publisher</th>
    <th>Category</th>
    <th>Class 1</th>
    <th>Class 2</th>
    <th>Class 3</th>
    <th>Class 4</th>
    <th>Class 5</th>
    <th>Class 6</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Sarvanna Shikshan- Swapna Navhe Hakka!</td>
    <td>Marathi</td>
    <td>64</td>
    <td>Vinaya Deshpande</td>
    <td>Bharat Gyan Vigyan Samuday (BGVS) Maharashtra</td>
    <td>Uncategorized</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Apalya Gavat Aple Arogya</td>
    <td>Marathi</td>
    <td>&nbsp;</td>
    <td>-</td>
    <td>Cehat Pune</td>
    <td>Uncategorized</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</tbody>

我有数千行，但我想要的每一行都是这样的

<tr>
  <td class="name">Sarvanna Shikshan- Swapna Navhe Hakka!</td>
  <td class="Language">Marathi</td>
  <td class="Pages">64</td>
  <td class="Author">Vinaya Deshpande</td>
  <td class="Publisher">Bharat Gyan Vigyan Samuday (BGVS) Maharashtra</td>
  <td class="Category">Uncategorized</td>
  <td class="Class 1">&nbsp;</td>
  <td class="Class 2">&nbsp;</td>
  <td class="Class 3">&nbsp;</td>
  <td class="Class 4">&nbsp;</td>
  <td class="Class 5">&nbsp;</td>
  <td class="Class 6">&nbsp;</td>
</tr>

有什么方法可以为所有单元格插入这个吗？也许是每 13 次迭代或类似的搜索和替换？无论如何，我无法手动执行此操作。抱歉，如果主题有误，我对 * 不是很熟悉。

Answer 1

备份 HTML 代码，因为这可能会失败！

首先在 Notepad++ 中打开 html。 在搜索选项 (Ctrl+F) 中打开“搜索和替换”。 检查“正则表达式”选项和“查找\r和\n”选项。

这是搜索文本：

<tr>(.*?)\r\n(.*?)<td>(.*?)</td>\r\n(.*?)<td>(.*?)</td>\r\n(.*?)<td>(.*?)</td>\r\n(.*?)<td>(.*?)</td>\r\n(.*?)<td>(.*?)</td>\r\n(.*?)<td>(.*?)</td>\r\n(.*?)<td>(.*?)</td>\r\n(.*?)<td>(.*?)</td>\r\n(.*?)<td>(.*?)</td>\r\n(.*?)<td>(.*?)</td>\r\n(.*?)<td>(.*?)</td>\r\n(.*?)<td>(.*?)</td>\r\n(.*?)</tr>

点击“全部替换”或点击“替换”一步一步进行。

这就是替换的样子：

<tr>\1\r\n\2<td class=\"name\">\3</td>\r\n\4<td class=\"Language\">\5</td>\r\n\6<td class=\"Pages\">\7</td>\r\n\8<td class=\"Author\">\9</td>\r\n$10<td class=\"Publisher\">$11</td>\r\n$12<td class=\"Category\">$13</td>\r\n$14<td class=\"Class 1\">$15</td>\r\n$16<td class=\"Class 2\">$17</td>\r\n$18<td class=\"Class 3\">$19</td>\r\n$20<td class=\"Class 4\">$21</td>\r\n$22<td class=\"Class 5\">$23</td>\r\n$24<td class=\"Class 6\">$25</td>\r\n$26</tr>

我不是最好的程序员，所以你。我希望这对所有人都有效，因为我刚刚在您提供给我们的小型 sn-p 上对其进行了测试。

Answer 2

这是一个 javascript 解决方案：您始终可以在浏览器中运行它，然后复制/粘贴 DevTool 的输出。

注意：类属性不能包含空格。如果是这样，该元素将具有 2 个类。例如：Class 和 1 不仅仅是 Class 1

var cls = ['name', 'Language', 'Pages', 'Author', 'Publisher', 'Category', 'Class-1', 'Class-2', 'Class-3', 'Class-4', 'Class-5', 'Class-6'];

[].forEach.call(document.querySelectorAll('tbody > tr'), function(row) {
  [].forEach.call(row.querySelectorAll('td'), function(cell, index) {
    cell.classList.add(cls[index]);
  });
});

table {
  border-collapse:collapse;  
}

td {
  border:1px solid;  
}

<table>
  <thead>
    <tr class="tableizer-firstrow">
      <th>Name</th>
      <th>Language</th>
      <th>Pages</th>
      <th>Author</th>
      <th>Publisher</th>
      <th>Category</th>
      <th>Class 1</th>
      <th>Class 2</th>
      <th>Class 3</th>
      <th>Class 4</th>
      <th>Class 5</th>
      <th>Class 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sarvanna Shikshan- Swapna Navhe Hakka!</td>
      <td>Marathi</td>
      <td>64</td>
      <td>Vinaya Deshpande</td>
      <td>Bharat Gyan Vigyan Samuday (BGVS) Maharashtra</td>
      <td>Uncategorized</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Apalya Gavat Aple Arogya</td>
      <td>Marathi</td>
      <td>&nbsp;</td>
      <td>-</td>
      <td>Cehat Pune</td>
      <td>Uncategorized</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>