JQuery为表格行中的单元格添加编号

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>

实际上，我想为每个表格行重新开始编号。我甚至不确定这是否可能。

- Danny Englander

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()返回一个元素相对于其兄弟元素的位置。

从文档中可以得知：

如果没有传递任何参数给.index()方法，那么返回值将是一个整数，表示jQuery对象中第一个元素相对于其同级元素的位置。

- Andreas Wong

---

.children() 比 .find() 的性能更好。 - Šime Vidas

Answer 2

一种简单的JavaScript解决方案，按行编号：

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++;
  } 
}

- RobG