向表中添加多列和多行 [关闭]

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>