Question

我已经想出了这个函数来为我表中的表行中的元素添加编号类：

$('tr td:contains(".")').each(function(i){
     $(this).addClass("reportcellno-" + i);
});

基本上在这里，我正在搜索任何带小数点的表格单元格，我想在每一行中对它们进行交互并添加类reportcellno-1，reportcellno-2

这很好用，我整天都在玩它。唯一的问题是编号一直在继续，而不是按行限制。

我输出的HTML代码是：

<tr>
<td class="reportcellno-1">10.1</td>
<td class="reportcellno-2">5.7</td>
</tr>

<tr>
<td class="reportcellno-3">10.6</td>
<td class="reportcellno-4">10.9</td>
</tr>

虽然我实际上想要得到这个：

<tr>
<td class="reportcellno-1">10.1</td>
<td class="reportcellno-2">5.7</td>
</tr>

<tr>
<td class="reportcellno-1">10.6</td>
<td class="reportcellno-2">10.9</td>
</tr>

所以基本上对于每个表行，我想开始编号。我甚至不确定这是否可行。

Answer 1

改为tr：

$('tr').each(function() {
   $(this).children('td:contains(".")').each(function(i) {
      $(this).addClass("reportcellno-" + i);
   });
});

编辑：循环方式较少，但可能性较差：

$('tr td:contains(".")').each(function(){
   $(this).addClass("reportcellno-" + (+$(this).index() + 1));
});

在这里，我们使用的事实是td是tr的孩子，index()返回元素相对于其兄弟的位置。

来自docs：

如果没有将参数传递给.index（）方法，则返回值为一个整数，表示第一个元素在其中的位置 jQuery对象相对于它的兄弟元素。

Answer 2

一个普通的js解决方案，按行编号：

var rows = document.getElementsByTagName('tr');

for (var j=0, jLen=rows.length; j<jLen; j++) {
  var cell, cells = rows[j].getElementsByTagName('td');

  for (var i=0, iLen=cells.length, c=0, txt; i<iLen; i++) {
    cell = cells[i];
    txt = cell.innerText || cell.textContent;

    if ( txt.indexOf('.') > -1) {
      cell.className = cell.className + ' reportcellno-' + c++;
    }
  } 
}

在表格中不断编号：

var cell, cells = document.getElementsByTagName('td');

for (var i=0, iLen=cells.length, c=0, txt; i<iLen; i++) {
  cell = cells[i];
  txt = cell.innerText || cell.textContent;

  if (txt.indexOf('.') > -1) {
    cell.className = cell.className + ' reportcellno-' + c++;
  } 
}

JQuery在表行中向tds添加编号

2 个答案: