How to add style attribute to all cells of a coloumn in a HTML table?

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.

Do you want a javascript solution? Or you want to edit your code? — Mosh Feu, May 19 '16 at 09:48
I'd prefer to edit the code, since I am not very familiar with Javascript. However, if you have a Javascript solution, that would be good too. — Vaibhav, May 19 '16 at 09:50
The question is if the table is in your html? ot it's generated by some server side code? — Mosh Feu, May 19 '16 at 09:51
I have the table in HTML, I generated it by converting an Excel Table — Vaibhav, May 19 '16 at 09:53
Do you mind using jquery, there could be an easy solution with jquery? — Pawan Nogariya, May 19 '16 at 09:57

score 1 · Accepted Answer · answered May 19 '16 at 10:10

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.

score 0 · Answer 2 · answered May 19 '16 at 09:58

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>

I'm sorry if I'm doing something wrong, but I ran this and it doesn't change anything when I view the source code of the page. — Vaibhav, May 19 '16 at 10:13
All I'm supposed to do is add your script in the tags, right? — Vaibhav, May 19 '16 at 10:15
Sure, but don't look in the view-source but in the DevTools (F12). — Mosh Feu, May 19 '16 at 10:25

How to add style attribute to all cells of a coloumn in a HTML table?

2 Answers2