Как редактировать все значения тд, которые имеют одинаковый класс со значениями из массива - PullRequest
Новая
       7

Как редактировать все значения тд, которые имеют одинаковый класс со значениями из массива

0 голосов
/ 27 июня 2018

У меня есть большая таблица, которая принимает входные данные, затем я использую 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 передавались в TD, у которых class="asseb1" в качестве класса.

Извините за плохое кодирование, я пытаюсь учиться самостоятельно: p

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

Да. Атрибуты 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;
        }
    }
0 голосов
/ 27 июня 2018

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