为什么我的javascript没有循环
[英]Why is my javascript not looping
问题描述
I have the following code which works fine for the first row, but doesn't seem to loop through the table 
我有以下代码适用于第一行，但似乎没有循环通过表
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0" cellspacing="2" cellpadding="2" id="demotbl">
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
<tr>
<td id="prodref">AA1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
<tr>
<td id="prodref">BB1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
<tr>
<td id="prodref">CC1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
<tr>
<td id="prodref">DD1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
<tr>
<td id="prodref">EE1</td>
<td><input type="text" name="h_prodref" id="h_prodre5"></td>
</tr>
<tr>
<td id="prodref">FF1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
</table>
<p id="demo"></p>
<script type="text/javascript">
var x = document.getElementById("demotbl").rows.length;
document.getElementById("demo").innerHTML = "Found " + x + " tr elements in the table.";
var prodref = document.getElementById("prodref").innerHTML;
var i = 0;
do {
document.getElementById("h_prodref").value = prodref;
i++;
}
while (i < x);
</script>
</body>
</html>
My understanding (which is very basic) is that the code will look for a id called prodref and then copy the cell value to the text box, and work its way down until it has completed all rows. 我的理解（这是非常基本的）是代码将查找名为prodref的id ，然后将单元格值复制到文本框，并向下工作直到它完成所有行。
5 个解决方案
解决方案1
7 已采纳 2015-11-05 13:18:51
As mention above id must be unique. 如上所述， id必须是唯一的。 I create the following example using classes instead: 我使用类创建以下示例：
var x = document.getElementById("demotbl").rows.length;; document.getElementById("demo").innerHTML = "Found " + x + " tr elements in the table."; var prodref = document.getElementsByClassName("prodref"); var h_prodref = document.getElementsByClassName("h_prodref"); var i = 0; for (i; i < prodref.length; i++) { h_prodref[i].value = prodref[i].innerHTML; }
<table width="100%" border="0" cellspacing="2" cellpadding="2" id="demotbl"> <tr> <th scope="col">Header 1</th> <th scope="col">Header 2</th> </tr> <tr> <td class="prodref">AA1</td> <td> <input type="text" name="h_prodref" class="h_prodref"> </td> </tr> <tr> <td class="prodref">BB1</td> <td> <input type="text" name="h_prodref" class="h_prodref"> </td> </tr> <tr> <td class="prodref">CC1</td> <td> <input type="text" name="h_prodref" class="h_prodref"> </td> </tr> <tr> <td class="prodref">DD1</td> <td> <input type="text" name="h_prodref" class="h_prodref"> </td> </tr> <tr> <td class="prodref">EE1</td> <td> <input type="text" name="h_prodref" class="h_prodref"> </td> </tr> <tr> <td class="prodref">FF1</td> <td> <input type="text" name="h_prodref" class="h_prodref"> </td> </tr> </table> <p id="demo"></p>
Example with your original html that I don't suggest using Document.querySelectorAll() : 与原始的HTML的例子，我不建议使用Document.querySelectorAll（） ：
var x = document.getElementById("demotbl").rows.length;; document.getElementById("demo").innerHTML = "Found " + x + " tr elements in the table."; var prodref = document.querySelectorAll("#prodref"); var h_prodref = document.querySelectorAll("#h_prodref"); var i = 0; for (i; i < prodref.length; i++) { h_prodref[i].value = prodref[i].innerHTML; }
<table width="100%" border="0" cellspacing="2" cellpadding="2" id="demotbl"> <tr> <th scope="col">Header 1</th> <th scope="col">Header 2</th> </tr> <tr> <td id="prodref">AA1</td> <td> <input type="text" name="h_prodref" id="h_prodref"> </td> </tr> <tr> <td id="prodref">BB1</td> <td> <input type="text" name="h_prodref" id="h_prodref"> </td> </tr> <tr> <td id="prodref">CC1</td> <td> <input type="text" name="h_prodref" id="h_prodref"> </td> </tr> <tr> <td id="prodref">DD1</td> <td> <input type="text" name="h_prodref" id="h_prodref"> </td> </tr> <tr> <td id="prodref">EE1</td> <td> <input type="text" name="h_prodref" id="h_prodref"> </td> </tr> <tr> <td id="prodref">FF1</td> <td> <input type="text" name="h_prodref" id="h_prodref"> </td> </tr> </table> <p id="demo"></p>
Also you have a typo here: 你也有一个拼写错误：
<tr>
<td id="prodref">EE1</td>
<td><input type="text" name="h_prodref" id="h_prodre5"></td>
</tr>
id is h_prodref no h_prodre5 . id是h_prodref no h_prodre5 。
解决方案2
2 2015-11-05 13:22:42
Here you go. 干得好。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0" cellspacing="2" cellpadding="2" id="demotbl">
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
<tr>
<td id="prodref1">AA1</td>
<td><input type="text" name="h_prodref" id="h_prodref1"></td>
</tr>
<tr>
<td id="prodref2">BB1</td>
<td><input type="text" name="h_prodref" id="h_prodref2"></td>
</tr>
<tr>
<td id="prodref3">CC1</td>
<td><input type="text" name="h_prodref" id="h_prodref3"></td>
</tr>
<tr>
<td id="prodref4">DD1</td>
<td><input type="text" name="h_prodref" id="h_prodref4"></td>
</tr>
<tr>
<td id="prodref5">EE1</td>
<td><input type="text" name="h_prodref" id="h_prodref5"></td>
</tr>
<tr>
<td id="prodref6">FF1</td>
<td><input type="text" name="h_prodref" id="h_prodref6"></td>
</tr>
</table>
<p id="demo"></p>
<script type="text/javascript">
var x = document.getElementById("demotbl").rows.length - 1;
document.getElementById("demo").innerHTML = "Found " + x + " tr elements in the table.";
var i = 0;
do {
var prodref = document.getElementById("prodref" + (i + 1)).innerHTML;
document.getElementById("h_prodref" + (i + 1)).value = prodref;
i++;
}
while (i < x);
</script>
</body>
</html>
解决方案3
0 2015-11-05 13:12:30
I not sure that this will be the solution to your problem. 我不确定这是否是您问题的解决方案。 I have done something similar in the past. 我过去做过类似的事。 My tip is not to use 'id' when dealing with more than one element but to use 'class' instead. 我的提示不是在处理多个元素时使用'id'而是使用'class'代替。 Hope you fix it! 希望你解决它！ :) :)
解决方案4
0 2015-11-05 13:18:04
You have many elements with the same id. 您有许多具有相同ID的元素。 id is always unique to a element. id始终是元素的唯一。 If you are using id's as a way to say apply the same styles to multiple elements you should use a class instead. 如果您使用id作为一种方式来说明将相同的样式应用于多个元素，则应该使用类来代替。
In your code the statement: 在您的代码中声明：
document.getElementById("prodref")
will always return you the first element matching the id: "prodref". 将始终返回与id匹配的第一个元素：“prodref”。 Which is the element: 这是元素：
<td id="prodref">AA1</td>
解决方案5
0 2015-11-05 13:37:31
.getElementById() returns the same element so you are setting the same td in every loop. .getElementById（）返回相同的元素，因此您在每个循环中设置相同的td。 This will do what you wanted; 这将做你想要的;
var i = 0;
var elements = document.getElementsByTagName("td");
do {
elements[i+1].firstChild.value = elements[i].innerText;
i = i+2;
}
while (i < elements.length);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.