Question

我想使用jQuery根据类的第一行和第一列将“class”添加到表的其他行和列。例如：

我目前的HTML代码是：

<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 name="classAdd">Dexter</td>
      <td name="classAdd">Rita</td>
      <td name="classAdd">Astor</td>
      <td name="classAdd">Cody</td>
      <td name="classAdd">Harrison</td>
   </tr>
   <tr>
      <td class="num 2" bgcolor="#5588bb">2</td>
      <td name="classAdd">Debra</td>
      <td name="classAdd">Quinn</td>
      <td name="classAdd">Angel</td>
      <td name="classAdd">LaGuerta</td>
      <td name="classAdd">Masuka</td>
   </tr>
   <tr>
      <td class="num 3" bgcolor="#5588bb">3</td>
      <td name="classAdd">Chuck</td>
      <td name="classAdd">Sarah</td>
      <td name="classAdd">Casey</td>
      <td name="classAdd">Ellie</td>
      <td name="classAdd">Awesome</td>
   </tr>
   <tr>
      <td class="num 4" bgcolor="#5588bb">4</td>
      <td name="classAdd">Castle</td>
      <td name="classAdd">Kate</td>
      <td name="classAdd">Espisito</td>
      <td name="classAdd">Ryan</td>
      <td name="classAdd">Captain</td>
   </tr>
   <tr>
      <td class="num 5" bgcolor="#5588bb">5</td>
      <td name="classAdd">Bones</td>
      <td name="classAdd">Booth</td>
      <td name="classAdd">Hodgins</td>
      <td name="classAdd">Angela</td>
      <td name="classAdd">Sweets</td>
   </tr>
</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>
      <td name="classAdd" class="1a">Dexter</td>
      <td name="classAdd" class="1b">Rita</td>
      <td name="classAdd" class="1c">Astor</td>
      <td name="classAdd" class="1d">Cody</td>
      <td name="classAdd" class="1e">Harrison</td>
   </tr>
   <tr>
      <td class="num 2" bgcolor="#5588bb">2</td>
      <td name="classAdd" class="2a">Debra</td>
      <td name="classAdd" class="2b">Quinn</td>
      <td name="classAdd" class="2c">Angel</td>
      <td name="classAdd" class="2d">LaGuerta</td>
      <td name="classAdd" class="2e">Masuka</td>
   </tr>
   <tr>
      <td class="num 3" bgcolor="#5588bb">3</td>
      <td name="classAdd" class="3a">Chuck</td>
      <td name="classAdd" class="3b">Sarah</td>
      <td name="classAdd" class="3c">Casey</td>
      <td name="classAdd" class="3d">Ellie</td>
      <td name="classAdd" class="3e">Awesome</td>
   </tr>
   <tr>
      <td class="num 4" bgcolor="#5588bb">4</td>
      <td name="classAdd" class="4a">Castle</td>
      <td name="classAdd" class="4b">Kate</td>
      <td name="classAdd" class="4c">Espisito</td>
      <td name="classAdd" class="4d">Ryan</td>
      <td name="classAdd" class="4e">Captain</td>
   </tr>
   <tr>
      <td class="num 5" bgcolor="#5588bb">5</td>
      <td name="classAdd" class="5a">Bones</td>
      <td name="classAdd" class="5b">Booth</td>
      <td name="classAdd" class="5c">Hodgins</td>
      <td name="classAdd" class="5d">Angela</td>
      <td name="classAdd" class="5e">Sweets</td>
   </tr>
</table>

我的jQuery：

var numbers = new Array();
var alphas = new Array();

$('.exportBtn').click(function(event) {
   $('.numAlpha .alpha').each(function() {
       alphas.push(($(this).attr('class')).slice(6));
   });

   $('.numAlpha .num').each(function() {
       numbers.push(($(this).attr('class')).slice(4));
   });

   for (i = 0; i <= numbers.length; i++) {
       for (j = 0; j = < alphas.length; j++) {
           alert(numbers[i] + "," + alphas[j]);
       }
   }
});

这是我的Fiddle

Answer 1

你可以这样做。

$('.exportBtn').click(function(event) {
    var first = $('.numAlpha th.alpha').map(function() {
         return $(this).attr('class').split(' ')[1];
    }).get();

    $('.numAlpha tr').not(':first').each(function() {
        var num = $(this).find('td:first').attr('class').split(' ')[1];

        $(this).find('td').not(':first').each(function(i) {
            $(this).addClass(num + first[i]);
        });
    });
});

UPDATED FIDDLE

Answer 2

我打算提出一种略有不同的方法。由于您已经知道列名称，并且我假设列按顺序编号，因此此代码可以正常工作（demo）：

$(function() {
  var alphas = ['a', 'b', 'c', 'd', 'e'];

  $('.exportBtn').click(function() {
    console.log('ok');
    var i, j,
      $table = $('.numAlpha'),
      // ignore first row
      $rows = $table.find('tr:gt(0)'),
      // get number of columns
      columns = alphas.length,
      len = $rows.length;
    for (i = 0; i < len; i++) {
      for (j = 0; j < columns; j++) {
        // use j+1 to skip first column
        $rows.eq(i).find('td')[j+1].className = alphas[j] + (i+1);
      }
    }
  });
});

注意：bgcolor有效，但大多数浏览器不再支持。所以使用css代替

th, td:nth-child(1) {
  background: #5588bb;
}

th:nth-child(1) {
  background: #ff9999;
}

Answer 3

这是一个基于html标签th / td

的解决方案

GL_R16I, GL_RED_INTEGER

根据表的第一行中的类和表的第一列，将类添加到表的行和类

3 个答案: