如何使用JavaScript和jQuery覆盖HTMLTBody表中每行第一列的值？

以下是一个表格示例：

<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')"/>

行号
价值
2.
值1
3.
价值2
1.
价值3

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

<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')"/>

行号
价值
1.
值1
2.
价值2
3.
价值3

我尝试了以下两个片段：

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

函数重新编号（tableId）{
$（'#'+tableId+'tbody'）。每个（函数（i）{
this.rows[i]。单元格[0]。文本（'i'）；
});
}
函数重新编号（tableId）{
var rowCount=$（'#'+tableId+'tbody tr'）。长度；
对于（var i=0；i这将把第一列更改为从1开始的序列号：

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


纯Javascript-：

试一试

演示：
这是正确的答案：

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

函数重新编号（tableId）{
var myTable=document.getElementById（tableId）；
var rowCount=myTable.rows.length；
对于（变量i=1；i
对于同一事物的VanillaJS版本：

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

（函数（t）
{
例如（var i=1；iJavaScript和Java是同一件事，就像毛毛虫像猫一样word here？循环中当前的“td”
this
是循环中当前的
，因此通过将
this
作为第二个参数传递，它将选择器限制在该上下文中，从而确保它将
i+1
应用于当前
中的
。如果没有包含
this
，则d为所有单元格设置文本。谢谢！它可以工作，但由于某些原因，它不起作用：
$（'#'+tableId+'>tbody>tr'）
只有这个可以工作：
$（'#'+tableId+'tbody>tr'）
。我不知道为什么，但它找不到带有“>”的tbody。它在小提琴中工作，因此您的HTML肯定有所不同，最像是tbody与小提琴不在同一位置。
是子选择器，因此它将只选择作为表直接子级的tbody，通过更改为空格，它将成为子代选择器，因此它将在任何位置找到tbody在桌子下面。没关系，因为桌子上只有一个桌子：）谢谢
$('#tableId > tbody > tr').find('td:first').text(function(idx, text){
    return idx + 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;
        }  
    }

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

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

for(var i=1;i<t.rows.length;)//do nothing here
{
    t.rows[i].cells[0].innerHTML = i++;//increment i here
}