如何使用JavaScript和jQuery覆蓋HTML tbody表中每行中第一列的值？

Question

這是一個表格示例：

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

有人可以幫我嗎？

Answer 1

這會將第一列更改為從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);
        }
    }
}

Answer 2

嘗試

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

演示： 小提琴

Answer 3

這是正確的答案：

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

Answer 4

對於同一件事的VanillaJS版本：

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

我添加到阿倫的小提琴

我張貼在這里，因為它不是一個可怕的很多比同一代碼的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
}