テーブルに複数の列と行を追加する

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> 
</tr> 
<tr> 
<td class="num 2" bgcolor="#5588bb">2</td> 
</tr> 
<tr> 
<td class="num 3" bgcolor="#5588bb">3</td> 
</tr> 
<tr> 
<td class="num 4" bgcolor="#5588bb">4</td> 
</tr> 
<tr> 
<td class="num 5" bgcolor="#5588bb">5</td> 
</tr> 
</table> 

jQueryの

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)]); 
    } 

    }); 
    }); 

私は私のテーブルは次のようになりたい：

<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 class="1a"></td> 
    <td class="1b"></td> 
    <td class="1c"></td> 
    <td class="1d"></td> 
    <td class="1e"></td> 
    </tr> 
    <tr> 
    <td class="num 2" bgcolor="#5588bb">2</td> 
    <td class="2a"></td> 
    <td class="2b"></td> 
    <td class="2c"></td> 
    <td class="2d"></td> 
    <td class="2e"></td> 
    </tr> 
    <tr> 
    <td class="num 3" bgcolor="#5588bb">3</td> 
    <td class="3a"></td> 
    <td class="3b"></td> 
    <td class="3c"></td> 
    <td class="3d"></td> 
    <td class="3e"></td> 
    </tr> 
    <tr> 
    <td class="num 4" bgcolor="#5588bb">4</td> 
    <td class="4a"></td> 
    <td class="4b"></td> 
    <td class="4c"></td> 
    <td class="4d"></td> 
    <td class="4e"></td> 
    </tr> 
    <tr> 
    <td class="num 5" bgcolor="#5588bb">5</td> 
    <td class="5a"></td> 
    <td class="5b"></td> 
    <td class="5c"></td> 
    <td class="5d"></td> 
    <td class="5e"></td> 
    </tr> 
    </table> 

この場合には、私は5rowsx5columnsを追加する必要があります与えますそれらの対応する最初の行と列を持つクラス？どのように私はjQueryでこれをすべて行うことができますか？

が今私のテーブルはそうのようになります。

私はそれは次のようになりたい：

これは私のFiddle

Answer 1

はこれを試してみてください。最適化された@ehsanコード

$(document).ready(function() { 
 

 
    $("tr td[bgcolor]").each(function(){ 
 
     var row = $(this).text(); 
 
    for(var i = 1; i < $("th").length; i++) 
 
     { 
 
     var classTxt = row+$("th").eq(i).text(); 
 
      $(this).closest("tr").append("<td class=" + classTxt + ">"+ classTxt +"</td>"); 
 
     } 
 
    }) 
 
})

<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> 
 
</tr> 
 
<tr> 
 
<td class="num 2" bgcolor="#5588bb">2</td> 
 
</tr> 
 
<tr> 
 
<td class="num 3" bgcolor="#5588bb">3</td> 
 
</tr> 
 
<tr> 
 
<td class="num 4" bgcolor="#5588bb">4</td> 
 
</tr> 
 
<tr> 
 
<td class="num 5" bgcolor="#5588bb">5</td> 
 
</tr> 
 
</table> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 2

これを試してみてくださいです：

クラス名をタグtdに入れて、それを削除することができます。

変更：

$(this).closest("tr").append("<td class=" + num+arr[i] + ">"+num+arr[i]+"</td>"); 

へ：

$(this).closest("tr").append("<td class=" + num+arr[i] + "></td>"); 

決勝コード：

$(document).ready(function() { 
 
    
 
    var arr = ['a','b','c','d','e']; 
 
    
 
    $("tr td[bgcolor]").each(function(){ 
 
     
 
     var num = $(this).text(); 
 

 
     
 
     for(var i = 0; i <arr.length; i++) 
 
      $(this).closest("tr").append("<td class=" + num+arr[i] + ">"+num+arr[i]+"</td>"); 
 
     
 
    }) 
 
    
 
    
 
})

<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> 
 
</tr> 
 
<tr> 
 
<td class="num 2" bgcolor="#5588bb">2</td> 
 
</tr> 
 
<tr> 
 
<td class="num 3" bgcolor="#5588bb">3</td> 
 
</tr> 
 
<tr> 
 
<td class="num 4" bgcolor="#5588bb">4</td> 
 
</tr> 
 
<tr> 
 
<td class="num 5" bgcolor="#5588bb">5</td> 
 
</tr> 
 
</table> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>