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

【问题标题】：How to edit all values of a td that have the same class with values from an array如何使用数组中的值编辑具有相同类的 td 的所有值
【发布时间】：2018-12-06 19:45:44
【问题描述】：

我有一个接受输入的大表，然后我使用 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

【问题讨论】：

标签： javascript html arrays html-table

【解决方案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          
   }

【讨论】：

【解决方案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;
        }
    }

【讨论】：