代码之家  ›  专栏  ›  技术社区  ›  Matthew Sirkin

For循环if语句在Javascript中识别==但不识别<

  •  1
  • Matthew Sirkin  · 技术社区  · 8 年前

    我试图创建一个脚本,用其他值替换表中的某些值。我用HTML生成了一个工作正常的表。我想用值1/8”替换前3行中第4列中的元素。

    var rows = document.getElementsByTagName('tr');
    
    for (var i = 0; i < rows.length; i++) {
     var cells = rows[i].getElementsByTagName('td');
     if (i < 3) {
      cells[3].innerHTML = '1/8"';
     }
    }
    

    使用上述代码对我的表没有任何作用,但是使用以下代码将第4个元素替换为我的值

    var rows = document.getElementsByTagName('tr');
    
    for (var i = 0; i < rows.length; i++) {
     var cells = rows[i].getElementsByTagName('td');
     if (i == 3) {
     cells[3].innerHTML = '1/8"';
     }
    }
    

    为什么==起作用,但<不是吗?有没有简单的方法可以打印出for循环的输出,这样我就可以更容易地调试-我对编码是新手。谢谢

    编辑:这是我正在使用的HTML,以及CSS(可能不是必需的)

    HTML5:

    <div class="eo_product_listing_table">
    <table class="tableizer-table">
    <thead>
      <tr class="tableizer-firstrow">
    
        <th>Item #</th>
        <th>Type</th>
        <th>Operting Temp.</th>
        <th>O.D.</th>
        <th>Length</th>
        <th>Material</th>
        <th>Junction</th>
        <th>Price</th>
        <th>Order</th>
      </tr>
    </thead>
    
    <tbody>
      <!--1/8-->
      <!--6-->
      <tr>
        <td>NB4-CAXL-14U-12-AAG</td>
        <td>K</td>
        <td>-270°C to 1372°C</br>–454°F to 2501°F</td>
        <td>3/8"</td>
        <td>6"</td>
        <td>316SS</td>
        <td>Grounded</td>
        <td>$51.00</td>
        <td><a href="/">Order</a></td>
      </tr>
      <tr>
        <td>NB4-CAXL-14U-12-AAU</td>
        <td>K</td>
        <td>-270°C to 1372°C</br>–454°F to 2501°F</td>
        <td>3/8"</td>
        <td>6"</td>
        <td>316SS</td>
        <td>Ungrounded</td>
        <td>$53.00</td>
        <td><a href="/">Order</a></td>
      </tr>
      <tr>
        <td>NB4-CAXL-14U-12-AAE</td>
        <td>K</td>
        <td>-270°C to 1372°C</br>–454°F to 2501°F</td>
        <td>3/8"</td>
        <td>6"</td>
        <td>316SS</td>
        <td>Exposed</td>
        <td>$51.00</td>
        <td><a href="/">Order</a></td>
      </tr>
      <!--12-->
      <tr>
        <td>NB4-CAXL-14U-12-ABG</td>
        <td>K</td>
        <td>-270°C to 1372°C</br>–454°F to 2501°F</td>
        <td>3/8"</td>
        <td>12"</td>
        <td>316SS</td>
        <td>Grounded</td>
        <td>$53.00</td>
        <td><a href="/">Order</a></td>
      </tr>
      <tr>
        <td>NB4-CAXL-14U-12-ABU</td>
        <td>K</td>
        <td>-270°C to 1372°C</br>–454°F to 2501°F</td>
        <td>3/8"</td>
        <td>12"</td>
        <td>316SS</td>
        <td>Ungrounded</td>
        <td>$55.00</td>
        <td><a href="/">Order</a></td>
      </tr>
      <tr>
        <td>NB4-CAXL-14U-12-ABE</td>
        <td>K</td>
        <td>-270°C to 1372°C</br>–454°F to 2501°F</td>
        <td>3/8"</td>
        <td>12"</td>
        <td>316SS</td>
        <td>Exposed</td>
        <td>$53.00</td>
        <td><a href="/">Order</a></td>
      </tr>
      <!--18-->
      <tr>
        <td>NB4-CAXL-14U-12-ACG</td>
        <td>K</td>
        <td>-270°C to 1372°C</br>–454°F to 2501°F</td>
        <td>1/8"</td>
        <td>18"</td>
        <td>316SS</td>
        <td>Grounded</td>
        <td>$57.00</td>
        <td><a href="/">Order</a></td>
      </tr>
      <tr>
        <td>NB4-CAXL-14U-12-ACU</td>
        <td>K</td>
        <td>-270°C to 1372°C</br>–454°F to 2501°F</td>
        <td>1/8"</td>
        <td>18"</td>
        <td>316SS</td>
        <td>Ungrounded</td>
        <td>$59.00</td>
        <td><a href="/">Order</a></td>
      </tr>
      <tr>
        <td>NB4-CAXL-14U-12-ACE</td>
        <td>K</td>
        <td>-270°C to 1372°C</br>–454°F to 2501°F</td>
        <td>1/8"</td>
        <td>18"</td>
        <td>316SS</td>
        <td>Exposed</td>
        <td>$57.00</td>
        <td><a href="/">Order</a></td>
      </tr>
    </tbody>
    

    CSS3

    .eo_product_listing_table {}
    
    .tableizer-table tr:nth-child(even) {
       background-color: #eee;
    }
    
    table.tableizer-table {
      font-size: 12px;
      border: 1px solid #CCC;
      font-family: Arial, Helvetica, sans-serif;
      color: black;
    }
    
    .tableizer-table td {
      padding: 4px;
      margin: 3px;
      border: 0px solid #CCC;
      text-align: left;
      color: black;
    }
    
    .tableizer-table th {
      background-color: #104E8B;
      color: #FFF;
      font-weight: bold;
      text-align: left;
    }
    
    .tableizer-firstrow {
      background-color: #000;
      color: whtie;
    }
    
    3 回复  |  直到 8 年前
        1
  •  0
  •   andfra    8 年前

    你使用你的脚本 <tr> 正如@Luaan所说的那样,标记是——查看HTML文件。这意味着,你必须计算表1,而不是表0。然后一切都很好。

    var rows = document.getElementsByTagName('tr');
    
    for (var i = 1; i < rows.length; i++) {
     var cells = rows[i].getElementsByTagName('td');
     if (i < 4) {
     cells[3].innerHTML = '1/8"';
     }
    }
    
        2
  •  0
  •   minseong    8 年前

    对于循环的前三次迭代:( i < 3 )您正在设置相同的单元格 innerHTML '1/8"' 一次又一次。

    也许你本想这样做:

    var rows = document.getElementsByTagName('tr');
    
    for (var i = 0; i < rows.length; i++) {
      var cells = rows[i].getElementsByTagName('td');
      if (i < 3) {
        cells[i].innerHTML = '1/8"';
      }
    }
    
        3
  •  0
  •   Luaan    8 年前

    好了,现在您已经发布了HTML,错误显而易见:)第一个 tr 您发现它不包含 td s,所以你得到了一个未处理的错误,函数中断。

    tbody ,不包括可能在 theader tfooter 表格主体 一个id并直接访问它,避免了所有这些问题。