rashmeePrakash rashmeePrakash - 2 months ago 12
HTML Question

Add multiple columns and rows to a table

I am adding the first row and first column depending on the results I get from a query. This way the number of rows and number of columns is determined by the result of the query. This can vary with time. I want add the rest of the columns and rows and also want to use jQuery to add "class" to the other rows and columns of the table based on the class first row and the first column.

This is my current 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>
</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)]);
}

});
});


I want my table to look like this:

<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 this case I need to add 5rowsx5columns give them the class with their corresponding first row and columns? Any idea how I can do all this with jQuery?

Now my table looks like so:

enter image description here

I want it to look like this:

enter image description here

This is my Fiddle

Answer

Try this: Optimized @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>