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

Question

So I have a huge HTML Table, some of which I've inserted here below:

<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>

I have thousands of rows, but what I want for each row is something like this

<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>

Is there any way I can insert this for all of the cells? Maybe a search and replace which acts on every 13th iteration or something like that? There's no way I'll be able to do this manually anyway. Sorry if it's in the wrong topic, I'm not very familiar with Stackoverflow.

Answer 1

MAKE A BACKUP OF THE HTML CODE AS THIS MIGHT FAIL!

First open the html in Notepad++. Open up "Search and replace" in the Search option (Ctrl+F). Check the "Regular Expresssion" Option and the "find \\r and \\n" Option.

This is the search text:

<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>

Click "replace all" or just go trough step by step by clicking "replace".

This is what the replace looks like:

<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>

I'm not the best programmer so ya. I hope this works for all as I just tested it on the small snippet you gave us.

Answer 2

Here is a javascript solution: You can always run it in your browser, then copy/paste the output from the DevTool.

Note: Class attribute cannot contain space. If it does, the element will have 2 class. For example: Class and 1 not just 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>