Question

我正在添加第一行和第一列，具体取决于我从查询中获得的结果。这样，行数和列数由查询结果确定。这可能会随时间而变化。我想添加其余的列和行，并且还希望使用jQuery根据类的第一行和第一列将“class”添加到表的其他行和列。

这是我目前的表格：

<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

试试这个：

我将类名放在标签td中，您可以将其删除。

更改：

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

致：

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

最终代码：

＆＃13;

$(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>");
       
   })
    
    
})

＆＃13;

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

＆＃13;

Answer 2

试试这个：优化的@ehsan代码

＆＃13;

static void printXingHeader(const char *fileName)
{
    TagLib::FileRef ref(fileName);
    TagLib::MPEG::File *file = dynamic_cast<TagLib::MPEG::File *>(ref.file());

    if(!file)
        return;

    TagLib::MPEG::Properties *properties = file->audioProperties();
    const TagLib::MPEG::XingHeader *xingHeader = properties->xingHeader();

    if(!xingHeader)
        return;

    std::cout << "total frames: " << xingHeader->totalFrames()
              << " total size: " << xingHeader->totalSize()
              << std::endl;

}

＆＃13;

$(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>");
         }
   })
})

＆＃13;

向表中添加多个列和行

2 个答案: