Question

我有以下代码，它适用于第一行，但似乎没有循环遍历表

<!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>

我的理解（这是非常基本的）是代码将查找名为id的{{1}}，然后将单元格值复制到文本框，然后向下工作直到完成所有行。

Answer 1

如上所述，id必须是唯一的。我使用类来创建以下示例：

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>

我不建议使用Document.querySelectorAll()的原始html示例：

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>

你也有错字：

<tr>
    <td id="prodref">EE1</td>
    <td><input type="text" name="h_prodref" id="h_prodre5"></td>
  </tr>

id h_prodref没有h_prodre5。

Answer 2

你走了。

<!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>

Answer 3

我不确定这是否是您问题的解决方案。我过去做过类似的事。我的提示不是在处理多个元素时使用'id'而是使用'class'代替。希望你解决它！：）

Answer 4

您有许多具有相同ID的元素。 id始终是元素的唯一。如果您使用id作为一种方式来说明将相同的样式应用于多个元素，则应该使用类来代替。

在您的代码中声明：

document.getElementById("prodref")

将始终返回与id匹配的第一个元素：“prodref”。这是元素：

<td id="prodref">AA1</td>

Answer 5

.getElementById（）返回相同的元素，因此您在每个循环中设置相同的td。这将做你想要的;

var i = 0; 
var elements = document.getElementsByTagName("td"); 
do {
    elements[i+1].firstChild.value = elements[i].innerText;
    i = i+2;
    }
while (i < elements.length);

为什么我的javascript没有循环

5 个答案: