テーブルの最初の行とテーブルの最初の列のクラスに基づいてテーブルの行とクラスにクラスを追加

Question

jQueryを使用して、テーブルの他の行と列に「クラス」を追加したいクラスの最初の行と最初の列。たとえば、次のように私は私のコードは、ボタンクリックで表示したい

<table class="numAlpha" border="1"> 
    <tr> 
     <th bgcolor="#ff9999"></th> 
     <th class="alpha a" bgcolor="#5588bb">a</th> 
     <th class="alpha b" bgcolor="#5588bb">b</th> 
     <th class="alpha c" bgcolor="#5588bb">c</th> 
     <th class="alpha d" bgcolor="#5588bb">d</th> 
     <th class="alpha e" bgcolor="#5588bb">e</th> 
    </tr> 
    <tr> 
     <td class="num 1" bgcolor="#5588bb">1</td> 
     <td name="classAdd">Dexter</td> 
     <td name="classAdd">Rita</td> 
     <td name="classAdd">Astor</td> 
     <td name="classAdd">Cody</td> 
     <td name="classAdd">Harrison</td> 
    </tr> 
    <tr> 
     <td class="num 2" bgcolor="#5588bb">2</td> 
     <td name="classAdd">Debra</td> 
     <td name="classAdd">Quinn</td> 
     <td name="classAdd">Angel</td> 
     <td name="classAdd">LaGuerta</td> 
     <td name="classAdd">Masuka</td> 
    </tr> 
    <tr> 
     <td class="num 3" bgcolor="#5588bb">3</td> 
     <td name="classAdd">Chuck</td> 
     <td name="classAdd">Sarah</td> 
     <td name="classAdd">Casey</td> 
     <td name="classAdd">Ellie</td> 
     <td name="classAdd">Awesome</td> 
    </tr> 
    <tr> 
     <td class="num 4" bgcolor="#5588bb">4</td> 
     <td name="classAdd">Castle</td> 
     <td name="classAdd">Kate</td> 
     <td name="classAdd">Espisito</td> 
     <td name="classAdd">Ryan</td> 
     <td name="classAdd">Captain</td> 
    </tr> 
    <tr> 
     <td class="num 5" bgcolor="#5588bb">5</td> 
     <td name="classAdd">Bones</td> 
     <td name="classAdd">Booth</td> 
     <td name="classAdd">Hodgins</td> 
     <td name="classAdd">Angela</td> 
     <td name="classAdd">Sweets</td> 
    </tr> 
</table> 

：

私の現在のHTMLコードがある

<table class="numAlpha" border="1"> 
    <tr> 
     <th bgcolor="#ff9999"></th> 
     <th class="alpha a" bgcolor="#5588bb">a</th> 
     <th class="alpha b" bgcolor="#5588bb">b</th> 
     <th class="alpha c" bgcolor="#5588bb">c</th> 
     <th class="alpha d" bgcolor="#5588bb">d</th> 
     <th class="alpha e" bgcolor="#5588bb">e</th> 
    </tr> 
    <tr> 
     <td class="num 1" bgcolor="#5588bb">1</td> 
     <td name="classAdd" class="1a">Dexter</td> 
     <td name="classAdd" class="1b">Rita</td> 
     <td name="classAdd" class="1c">Astor</td> 
     <td name="classAdd" class="1d">Cody</td> 
     <td name="classAdd" class="1e">Harrison</td> 
    </tr> 
    <tr> 
     <td class="num 2" bgcolor="#5588bb">2</td> 
     <td name="classAdd" class="2a">Debra</td> 
     <td name="classAdd" class="2b">Quinn</td> 
     <td name="classAdd" class="2c">Angel</td> 
     <td name="classAdd" class="2d">LaGuerta</td> 
     <td name="classAdd" class="2e">Masuka</td> 
    </tr> 
    <tr> 
     <td class="num 3" bgcolor="#5588bb">3</td> 
     <td name="classAdd" class="3a">Chuck</td> 
     <td name="classAdd" class="3b">Sarah</td> 
     <td name="classAdd" class="3c">Casey</td> 
     <td name="classAdd" class="3d">Ellie</td> 
     <td name="classAdd" class="3e">Awesome</td> 
    </tr> 
    <tr> 
     <td class="num 4" bgcolor="#5588bb">4</td> 
     <td name="classAdd" class="4a">Castle</td> 
     <td name="classAdd" class="4b">Kate</td> 
     <td name="classAdd" class="4c">Espisito</td> 
     <td name="classAdd" class="4d">Ryan</td> 
     <td name="classAdd" class="4e">Captain</td> 
    </tr> 
    <tr> 
     <td class="num 5" bgcolor="#5588bb">5</td> 
     <td name="classAdd" class="5a">Bones</td> 
     <td name="classAdd" class="5b">Booth</td> 
     <td name="classAdd" class="5c">Hodgins</td> 
     <td name="classAdd" class="5d">Angela</td> 
     <td name="classAdd" class="5e">Sweets</td> 
    </tr> 
</table> 

私のjQuery：

var numbers = new Array(); 
var alphas = new Array(); 

$('.exportBtn').click(function(event) { 
    $('.numAlpha .alpha').each(function() { 
     alphas.push(($(this).attr('class')).slice(6)); 
    }); 

    $('.numAlpha .num').each(function() { 
     numbers.push(($(this).attr('class')).slice(4)); 
    }); 

    for (i = 0; i <= numbers.length; i++) { 
     for (j = 0; j = < alphas.length; j++) { 
      alert(numbers[i] + "," + alphas[j]); 
     } 
    } 
}); 

これは私ですFiddle

Answer 1

次のようにすることができます。

$('.exportBtn').click(function(event) { 
    var first = $('.numAlpha th.alpha').map(function() { 
     return $(this).attr('class').split(' ')[1]; 
    }).get(); 

    $('.numAlpha tr').not(':first').each(function() { 
     var num = $(this).find('td:first').attr('class').split(' ')[1]; 

     $(this).find('td').not(':first').each(function(i) { 
      $(this).addClass(num + first[i]); 
     }); 
    }); 
}); 

UPDATED FIDDLE

Answer 2

私は少し異なるアプローチを提案するつもりでした。あなたは既に列名を知っていると私は（demo）の列が順番に番号が付けられ、このコードは動作しますと仮定していますので：

$(function() { 
    var alphas = ['a', 'b', 'c', 'd', 'e']; 

    $('.exportBtn').click(function() { 
    console.log('ok'); 
    var i, j, 
     $table = $('.numAlpha'), 
     // ignore first row 
     $rows = $table.find('tr:gt(0)'), 
     // get number of columns 
     columns = alphas.length, 
     len = $rows.length; 
    for (i = 0; i < len; i++) { 
     for (j = 0; j < columns; j++) { 
     // use j+1 to skip first column 
     $rows.eq(i).find('td')[j+1].className = alphas[j] + (i+1); 
     } 
    } 
    }); 
}); 

注：bgcolor作品が、もはやほとんどのブラウザでサポートされています。だからここ

th, td:nth-child(1) { 
    background: #5588bb; 
} 

th:nth-child(1) { 
    background: #ff9999; 
} 

Answer 3

は、htmlタグに基づくソリューションは、目/ TD

var alphas = []; 
var num; 

$('.exportBtn').click(function(event) { 

    $('.numAlpha th').each(function(i, el) { 

     if($(el).attr('class')) 
      alphas.push($(el).attr('class').slice(6)); 

    }); 

    $('.numAlpha td').each(function(i, el) { 

     if($(el).attr('class')){ 
      num = $(el).attr('class').slice(4); 
     }else{ 
      $(el).addClass(num + alphas[(i-1)]); 
     } 

    }); 
}); 

である代わりにCSSを使用