Ciao,
Per una cosa del genere io utilizzerei un approccio CSS più che scomodare javascript.
Non è necessario utilizzare una classe per assegnare un css in quel modo, ma esistono altre regole più funzionali.

Partiamo dal principio che per le tabelle sono disponibili vari tag oltre i classici <table>, <tr> e <td>.
Ad esempio gli elementi <thead> e <th> identificano una riga di intestazione e dei dati di tipo intestazione, appunto. Farebbero proprio al caso tuo, per cui, oltre ad ottenere una tabella meglio strutturata più intellegibile e soprattutto più accessibile, sarebbe semplice assegnare delle regole css per tali elementi.

Ad ogni modo, se non vuoi/puoi modificare le tabelle ma vuoi utilizzare i semplici <tr> e <td>, puoi comunque utilizzare delle pseudo-classi css3 per selezionare ad esempio un primo elemento figlio o di un certo tipo, così da assegnare in modo specifico le relative regole css.

Ti posto un esempio pratico con le due soluzioni:
codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      table{
        width:300px;
        border-collapse:collapse;
      }
      table, th, td{
        border: 1px solid gray;
      }
      
      /* -- 1° METODO --
        formatto gli elementi thead e th 
      */
      .tab1 thead{
        background:red;
      }
      .tab1 tbody th{
        background:gainsboro;
        width:20px;
      } 
      
      /* -- 2° METODO --
        uso le pseudo-classi per fare una selezione degli elementi interessati
      */
      .tab2 tr:first-child{
        background:green;
        font-weight:bold;
        text-align:center;
      }
      .tab2 tr:not(:first-child)>:first-child{
        background:gainsboro;
        font-weight:bold;
        width:20px;
        text-align:center;
      } 
    </style>

  </head>
  <body>
    <table class="tab1">
      <thead>
        <tr>
          <th></th>
          <th>A</th>
          <th>B</th>
          <th>C</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>1</th>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <th>2</th>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <th>3</th>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <br>
    <table class="tab2">
      <tr>
        <td></td>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>1</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>2</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>3</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>
Nota inoltre che gli elementi <th> assegnano una pre-formattazione al testo contenuto (dovrebbe visualizzarsi centrato e in grassetto).

Il risultato dovrebbe essere come questo che allego:

Image1.gif

Ad ogni modo i miei vogliono essere solo dei consigli, l'argomento sarebbe infatti offtopic dato che hai chiesto una soluzione in javascript.
Se però vuoi utilizzare javascript, per preferenza o per curiosità, lascio rispondere eventualmente ad altri.