Mehrere Spalten und Zeilen zu einer Tabelle hinzufügen

Question

Ich füge die erste Zeile und die erste Spalte hinzu, abhängig von den Ergebnissen, die ich von einer Abfrage erhalte. Auf diese Weise wird die Anzahl der Zeilen und die Anzahl der Spalten durch das Ergebnis der Abfrage bestimmt. Dies kann mit der Zeit variieren. Ich möchte den Rest der Spalten und Zeilen hinzufügen und möchte auch jQuery verwenden, um "Klasse" zu den anderen Zeilen und Spalten der Tabelle basierend auf der ersten Zeile der Klasse und der ersten Spalte hinzuzufügen.

Dies ist meine aktuelle Tabelle:

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

    }); 
    }); 

ich meine Tabelle wie folgt aussehen wollen:

<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> 

in diesem Fall muss ich 5rowsx5columns hinzufügen geben ihnen die Klasse mit ihrer entsprechenden ersten Zeile und Spalten? Irgendeine Idee, wie ich das alles mit jQuery machen kann?

Jetzt sieht meine Tabelle wie folgt:

Das ist mein Fiddle

Answer 1

Versuchen: Optimierte @ehsan Code

$(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

Versuchen Sie folgendes::

ich es so aussehen wollen

Ich lege den Klassennamen in das Tag td, du kannst es entfernen.

Wechsel:

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

An:

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

Schlusscode:

$(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>

Diese 210