Question

我有一个可以接受输入的大表，然后使用Javascript从这些输入中获取值-我给它们提供了保存标签，以便我可以收集所有它们并将它们放入数组中。然后，我进行一些计算，最后得到另一个数组，该数组包含要添加到表中的数据。我的问题是：是否有任何简单的方法将这些数据添加到输入TD旁边的TD？我一直在寻找简单的东西，例如当我使用document.getElementsByTagName()时却相反，因此它实际上向具有该标记的所有元素添加了值。

不确定我是否足够明确...

（免责声明：我什至不确定我进行这些计算的方式是否正确）

<head>
<title>calculadora v2.0</title>
<meta charset="UTF-8">
<script type="text/javascript">
var Nivel= [];
var Pontos_Base=[10,16,20,24,10,10,42,512,19,0,24,10,6,6,6,5,6,5,8];
var Pontos_Finais=[];

    function asseb_calc(){
        var Nivel = document.getElementsByTagName("asseb_edificios");
        for (var i = 0; i < Nivel.length; i++) {
        var x= Math.round(Pontos_Base[i]*Math.pow(1.2,Nivel[i]-1));
        Pontos_Finais.push(x);
        }
    }


</script>

    <body>
<table><tr><th>Edifício</th><th>Nível</th><th>Pontos</th><th >Fazenda Ocupada</th></tr>
    <tr><td> Edificio Principal</td><td><input onchange="asseb_calc()" type="number" class="asseb_edificios"></td><td class="asseb1" class="center">0</td><td class="center">0</td></tr>
    <tr><td> Quartel</td><td><input onchange="asseb_calc()" type="number" class="asseb_edificios"></td><td class="asseb1" class="center">0</td><td class="center">0</td></tr>
    <tr><td> Estábulo</td><td><input onchange="asseb_calc()" type="number" class="asseb_edificios"></td><td class="asseb1" class="center">0</td><td class="center">0</td></tr>
    <tr><td> Oficina</td><td><input onchange="asseb_calc()" type="number" class="asseb_edificios"></td><td class="asseb1" class="center">0</td><td class="center">0</td></tr></table>

试图从中删除所有CSS以及其中的一些额外行。想法是将Pontos_Finais中的值传递给以class="asseb1"为类的TD。

对不起，我的编码不好我正在尝试自己学习：p

Answer 1

onchange="asseb_calc()"不是处理事件的最佳方法，但是使用这种方法，您可以执行以下onchange="asseb_calc(this)"，其中this代表事件的html元素，即您的输入标签。您必须将函数定义更改为：

   function asseb_calc(element){
     // your calculating code here
     // ...
     // you have your input element so you can change it, 
     // or change its parent, or find the parent `tr` 
     // i.e you have your reference point          
   }

Answer 2

是的。您可以使用parentNode和“ nextSibling”属性将其转到输入的TD父级，然后再转到下一个TD。

function asseb_calc(){
        var Nivel = document.getElementsByTagName("asseb_edificios");
        for (var i = 0; i < Nivel.length; i++) {
        var x= Math.round(Pontos_Base[i]*Math.pow(1.2,Nivel[i]-1));
        Pontos_Finais.push(x);
        Nivel[i].parentNode.nextSibling.innerHTML = x;
        }
    }

如何使用数组中的值编辑具有相同类的td的所有值

2 个答案: