1

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

5 回答 5

5

getElementsByClassName给你一个元素列表，并且该列表上没有方法或属性来操作其中的所有元素。要操作元素，您必须单独遍历元素。

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

http://jsfiddle.net/BzmBX/

于 2013-10-22T05:57:43.467 回答
0

您可能希望仅限于更改表的内容。因此，为表添加 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>
于 2013-10-22T06:10:48.047 回答
0

您也可以使用 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>
于 2013-10-22T06:02:09.837 回答
0

试试这个功能：

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;
  }
}
于 2013-10-22T05:59:29.113 回答
0

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

于 2013-10-22T06:02:50.977 回答