Question

我有一个代码表，

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

从上面的代码中我想添加class =＆＃34; row1＆＃34;通过增量id示例

到每个tr中

<table>
    <tr class="row1">
    <td class="row11">1</td>
    <td class="row12">2</td>
    <td class="row13">3</td>
    </tr>
    <tr class="row2">
    <td class="row21">1</td>
    <td class="row22">2</td>
    <td class="row23">3</td>
    </tr>
    </table>

如何使用jquery

将动态类ID添加到表中的tr和td中

Answer 1

var counter=0;
$("#myTable tr").each(function(){
counter++;
    var self=$(this);
    self.addClass("row_"+counter);
    var tdCounter=0;
    self.find('td').each(function(){
    tdCounter++;
       $(this).addClass("row_"+counter+tdCounter);
    });
});

<强> DEMO 1

<强>编辑：用于为每行设置第1个td左边距的代码

var counter = 0;
$("#myTable tr").each(function () {
    counter++;
    var self = $(this);
    self.addClass("row_" + counter);
    var tdCounter = 0;
    self.find('td').each(function (index) {
        tdCounter++;
        if (index == 0) {
            $(this).css({ "margin-left": 30,'float': 'left'});
        }
        $(this).addClass("row_" + counter + tdCounter);
    });
});

<强> DEMO 2

Answer 2

使用：

$('tr').each(function(trindex){
  $(this).addClass('row'+(trindex+1));
  $(this).find('td').each(function(tdindex){
     $(this).addClass('row'+(trindex+1)+(tdindex+1));
});});

<强> Working Demo

Answer 3

var i = 1;
$('table > tr').each(function() {
    $(this).addClass('row' + i);
    i++;
});

var n = 1
$('table > tr > td').each(function() {
    var that = $(this);
    var rowNum = that.closest('tr').attr('class').replace('row', '');
    $(this).addClass('row' + rowNum + n);
    n++;
});

Jquery为具有自动增量值的表添加动态类名

3 个答案: