Question

我这里有这个代码。我需要放置用户输入的值（比如整数10），计算一个操作并将答案输入到我的表定义的行中。

我无法在4列中复制相同的值。我该如何更改我的代码？

<html>

<table>
   <tr>
     <td class="demo"></td>
     <td class="demo"></td>
     <td class="demo"></td>
     <td class="demo"></td>
   </tr>
</table>

Enter Input:<input type="text" name="test"/>


<script>
  function testfunc()
    {
      var tt=document.getElementsByName("test")[0].value;   
      document.getElementsByClassName("demo").innerHTML = tt*20;
    }
</script>

<button onclick="testfunc()">TEST</button>

</html>

Answer 1

getElementsByClassName为您提供元素列表，该列表中没有方法或属性来操纵其中的所有元素。要操纵元素，您必须单独遍历元素。

  cells = document.getElementsByClassName("demo");
  for (var i = 0; i < cells.length; i++){
    cells[i].innerHTML = tt*20;
  }

http://jsfiddle.net/BzmBX/

Answer 2

尝试此功能：

function testfunc(){
  var tt=document.getElementsByName("test")[0].value;
  var tds = document.querySelectorAll('td.demo');
  var nrtds = tds.length;
  for(var i=0; i<nrtds; i++) {
    tds[i].innerHTML = tt;
  }
}

Answer 3

您也可以使用id代替类。

尝试

<html>
<head>
<script type="text/javascript">
    function testfunc()
    {
          var tt=document.getElementById("test").value;
          //alert(tt);
          var log;
          log = tt*20;
          for(i=1;i<=4;i++)
              document.getElementById("c"+i).innerHTML = log;
    }
</script>
</head>
<body>
<table border=1>
   <tr>
     <td>Col1</td>
     <td>Col2</td>
     <td>Col3</td>
     <td>Col4</td>
   </tr>
   <tr>
     <td id='c1'> </td>
     <td id='c2'> </td>
     <td id='c3'> </td>
     <td id='c4'> </td>
   </tr>
</table>
Enter Input: <input type="text" id="test" name="test"/>
<button onclick="Javascript:testfunc();">TEST</button>
</body>
</html>

Answer 4

你几乎就在那里，只有代码的问题是Javascript函数getElementsByClassName 返回一组具有所有给定类名的元素。

所以正确的Javascript代码是：

<script>
  function testfunc() {
    var tt = document.getElementsByName("test")[0].value;

    // Loop through all demo table columns returned.
    demoColumns = document.getElementsByClassName("demo");
    for (var i = demoColumns.length - 1; i >= 0; i--) {
      demoColumns[i].innerHTML = tt * 20;
    };

    // Incorrect.
    // document.getElementsByClassName("demo").innerHTML = tt*20;
  }
</script>

在您的示例中，您尝试在集合上设置内部HTML而不是单个DOM元素。

Answer 5

您可能希望限制仅更改表的内容。因此，为表添加一个id“demoTbl”，并使用document.getElementById（“demoTbl”）。getElementsByClassName（“demo”）将只搜索表id =“demoTbl”中带有“demo”类的元素

 <html>

    <table id="demoTbl">
       <tr>
         <td class="demo"></td>
         <td class="demo"></td>
         <td class="demo"></td>
         <td class="demo"></td>
       </tr>
    </table>

    Enter Input:<input type="text" name="test"/>


    <script>
      function testfunc()
        {

          var tt=document.getElementsByName("test")[0].value;   
          var sel = document.getElementById("demoTbl").getElementsByClassName("demo");

          for (var i=0; i<sel.length; i++) {
            sel[i].innerHTML = tt*20;
          }

        }
    </script>

    <button name="test" onclick="testfunc()">TEST</button>

    </html>

使用JAVASCRIPT将单个值复制到多个列中

5 个答案: