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

时间:2016-10-19 13:19:49

标签: javascript if-statement for-loop html-table inequality

我尝试创建一个脚本,用其他值替换表中的某些值。我在HTML中生成了一个工作正常的表。我想用前1/3"中的值替换前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"';
 }
}

为什么==工作,但&lt;才不是?有没有简单的方法来打印出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 个答案:

答案 0 :(得分:0)

对于循环的前三次迭代(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"';
  }
}

答案 1 :(得分:0)

您可以将脚本用于所有<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)

好的,既然您已经发布了HTML,那么错误很明显:)您找到的第一个public static void readFile(Scanner f) { int words = 0; int lines = 0; while (f.hasNextLine()) { String line = f.nextLine(); lines++; for (String token : line.split("\\s+")) { if (!token.isEmpty()) { words++; } } } System.out.println("Total number of words: " + words); System.out.println("Total number of lines: " + lines); } 不包含任何tr,因此您会收到未处理的错误,功能中断。

您只需查找td中的行,不包括tbodytheader中可能包含的行。通常一个好主意是只迭代特定表的行,而不是整个文档中的所有行。您甚至可以为特定的tfooter提供ID并直接访问它,避免所有这些问题。