根據表格的第一行和表格的第一列中的類添加類到表的行和類

Question

我想使用jQuery將「類」添加到表的其他行和列中班級的第一行和第一列。例如：

我當前的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">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> 

我希望我的代碼來顯示按鈕點擊：

<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作品，但在大多數瀏覽器不再支持。因此，使用CSS代替

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

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

Answer 3

這裏是基於HTML標籤的解決方案TH/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)]); 
     } 

    }); 
});