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

Copy single value into multiple columns using JAVASCRIPT

本文关键字：复制 JAVASCRIPT 单个值 使用      更新时间：2023-09-26

我这里有这段代码。我需要放置用户输入的值（例如整数 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>

getElementsByClassName为您提供了一个元素列表，并且该列表中没有方法或属性来操作其中的所有元素。要操作元素，您必须单独迭代元素。

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

http://jsfiddle.net/BzmBX/

试试这个函数：

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;
  }
}

你也可以使用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>

你快到了，代码的唯一问题是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 元素。

您可能

希望限制为仅更改表的内容。因此，为表添加一个 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>
相关文章：