Question

我有很多表，我想提供所有tr的个人ID。我遍历所有肢体，但只影响第一个肢体，而不是全部。当我添加表示每个肢体的循环时，它们会起作用。是否有任何有效的方法可以遍历所有正文并提供tr的个人ID。我想使用香草javascript，而不是jQuery。

我的示例代码在这里：

<table><tbody>
<tr><td>No.</td><td>Name</td><td>Score</td></tr>
<tr><td>01</td><td>ted</td><td>0.50</td></tr>
<tr><td>02</td><td>joe</td><td>0.25</td></tr>
</tbody></table>
<table><tbody>
<tr><td>Name</td><td>Address</td><td>Phone</td></tr>
<tr><td>joe</td><td>LA</td><td>012345</td></tr>
<tr><td>ted</td><td>NY</td><td>0124</td></tr>
</tbody></table>
<table><tbody>
<tr><td>Name</td><td>Spec</td><td>Budget</td></tr>
<tr><td>joe</td><td>i5</td><td>458</td></tr>
<tr><td>ted</td><td>i7</td><td>768</td></tr>
</tbody></table>

JavaScript：

var c = document.getElementsByTagName('tbody');
var _trIndex = 1;

for ( i=0; i<c.length; i++) {
  var x = c[i].rows; 
  for (i=0; i<x.length; i++){
    x[i].setAttribute('id','tr'+_trIndex++)
  }
}

第二次尝试：

var c = document.getElementsByTagName('tbody');
var _trIndex = 1;

for ( i=0; i<c.length; i++) {
  var x = c[0].rows; 
  for (i=0; i<x.length; i++){
    x[i].setAttribute('id','tr'+_trIndex++)
  }
  var y = c[1].rows;
  for (i=0; i<y.length; i++){
    y[i].setAttribute('id','tr'+_trIndex++)
  }
}

Answer 1

可能这就是您需要的：

// Instead of getting the table bodies, I get only the table 
// rows inside the tbody elements.
var c = document.querySelectorAll('tbody tr');

// Here I check if definitely the above query found any values.
if ( c ) {
  // Then I do the itteration to the found tr elements
  for ( i = 0; i < c.length; i++) {
    // And here I set the ID the same way you did in your example
    c[i].setAttribute('id','tr'+i);
  }
}

<table>
  <tbody>
    <tr><td>No.</td><td>Name</td><td>Score</td></tr>
    <tr><td>01</td><td>ted</td><td>0.50</td></tr>
    <tr><td>02</td><td>joe</td><td>0.25</td></tr>
  </tbody>
</table>

<table>
  <tbody>
    <tr><td>Name</td><td>Address</td><td>Phone</td></tr>
    <tr><td>joe</td><td>LA</td><td>012345</td></tr>
    <tr><td>ted</td><td>NY</td><td>0124</td></tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr><td>Name</td><td>Spec</td><td>Budget</td></tr>
    <tr><td>joe</td><td>i5</td><td>458</td></tr>
    <tr><td>ted</td><td>i7</td><td>768</td></tr>
  </tbody>
</table>

Answer 2

您可以使用一行JavaScript来实现。

document.querySelectorAll("tbody tr").forEach((element, index) => element.setAttribute("id", "tr" + index));

<table>
  <thead>
    <tr>
      <td>No.</td>
      <td>Name</td>
      <td>Score</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>No.</td>
      <td>Name</td>
      <td>Score</td>
    </tr>
    <tr>
      <td>01</td>
      <td>ted</td>
      <td>0.50</td>
    </tr>
    <tr>
      <td>02</td>
      <td>joe</td>
      <td>0.25</td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <td>Name</td>
      <td>Address</td>
      <td>Phone</td>
    </tr>
    <tr>
      <td>joe</td>
      <td>LA</td>
      <td>012345</td>
    </tr>
    <tr>
      <td>ted</td>
      <td>NY</td>
      <td>0124</td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <td>Name</td>
      <td>Spec</td>
      <td>Budget</td>
    </tr>
    <tr>
      <td>joe</td>
      <td>i5</td>
      <td>458</td>
    </tr>
    <tr>
      <td>ted</td>
      <td>i7</td>
      <td>768</td>
    </tr>
  </tbody>
</table>

继续遍历所有tbody元素，并将id添加到所有tr

2 个答案: