2

这是一个表格示例：

<table id="tableId">
 <thead>
  <tr>
   <th>line number</th>
   <th>value</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>2</td>
   <td>value 1</td>
  </tr>
  <tr>
   <td>3</td>
   <td>value 2</td>
  </tr>
  <tr>
   <td>1</td>
   <td>value 3</td>
  </tr>
 </tbody>
</table>
<input type="button" value="relineing" onclick="reLineNumbering('tableId')"/>

我只希望“行号”按如下顺序排列：

<table id="tableId">
 <thead>
  <tr>
   <th>line number</th>
   <th>value</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>value 1</td>
  </tr>
  <tr>
   <td>2</td>
   <td>value 2</td>
  </tr>
  <tr>
   <td>3</td>
   <td>value 3</td>
  </tr>
 </tbody>
</table>
<input type="button" value="relineing" onclick="reLineNumbering('tableId')"/>

我已经尝试了以下两个片段：

function reLineNumbering(tableId) {
  $('#'+tableId+' tbody').each(function (i) {
    this.rows[i].cells[0].text('i');
  });
}

function reLineNumbering(tableId) {
  var rowCount = $('#'+tableId+' tbody tr').length;
  for (var i=0; i<rowCount; i++) {
    $('#'+tableId+' tbody').rows[i].cells[0].text(i);
  }
}

有人可以帮助我吗？

4

4 回答 4

3

这会将第一列更改为从 1 开始的序列号：

function reLineNumbering(tableId){
    $('#' + tableId + ' > tbody > tr').each(function(i, val){
        $('td:first', this).text(i+1); 
    });
}

小提琴

纯 Javascript -小提琴：

function reLineNumbering(tableId){
    var table = document.getElementById(tableId);
    var total = table.rows.length;
    for(var i=0; i<total; i++){
        if(i > 0){
            table.rows[i].cells[0].innerHTML = i;
        }
    }
}

或者通过创建文本节点而不是设置innerHTML. 在这个简单的场景中，使用innerHTML不是问题，但通常您会希望使用 DOM 元素并设置文本节点而不是设置 HTML：

function reLineNumbering(tableId){
    var table = document.getElementById(tableId);
    var total = table.rows.length, text, cell;
    for(var i=0; i<total; i++){
        if(i > 0){
            text = document.createTextNode(i);
            cell = table.rows[i].cells[0];
            cell.removeChild(cell.firstChild);
            cell.appendChild(text);
        }
    }
}
于 2013-07-18T08:36:36.753 回答
1

尝试

$('#tableId > tbody > tr').find('td:first').text(function(idx, text){
    return idx + 1
})

演示：小提琴

于 2013-07-18T08:39:46.237 回答
1

对于同一事物的 VanillaJS 版本：

(function(t)
{
    for(var i=1;i<t.rows.length;i++)
    {
        t.rows[i].cells[0].innerHTML += ' Vanilla';
    }
}(document.getElementById('tableId')));

我添加到 Arun 的小提琴中

我把它贴在这里，因为它并不比相同代码的 jQ 版本长很多，但它更快。
您可以将其更改为：

var t = document.getElemebtById('tableId');
for(var i=1;i<t.rows.length;i++)
{
    t.rows[i].cells[0].innerHTML = 1 + i;//number tbl
}

如果您对使用 IIFE 感到不舒服。

PS：循环可以简化为：

for(var i=1;i<t.rows.length;)//do nothing here
{
    t.rows[i].cells[0].innerHTML = i++;//increment i here
}
于 2013-07-18T08:47:58.470 回答
1

这是正确的答案：

function reLineNumbering(tableId) {
        var myTable=document.getElementById(tableId);
        var rowCount = myTable.rows.length;
        for (var i = 1; i < rowCount; i++) {
            myTable.rows[i].cells[0].innerHTML = i;
        }  
    }
于 2013-07-18T08:44:02.023 回答