[英]For loop if statement recognizes == but not < in Javascript
我正在尝试创建一个脚本,用其他值替换表中的某些值。 我在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;
}
对于循环的前三次迭代( 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"';
}
}
您可以将脚本用于所有<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"';
}
}
好的,既然你已经发布了你的HTML,那么错误很明显:)你发现的第一个tr
不包含任何td
,所以你得到一个未处理的错误而且函数会中断。
您只需在tbody
查找行,不包括可能位于theader
或tfooter
。 通常一个好主意只能遍历特定表的行,而不是整个文档中的所有行。 你甚至可以给特定的tbody
一个id并直接访问它,避免所有这些问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.