Question

我通过在创建对象时遇到问题来阅读DOM来创建新表。现在，我能够得到{100: 4}每行不同。我认为获得所需结果的最佳方法是为每个ID {ID: [loc, value, bax]}制作一个看起来像这样的对象。根据我当前的表格看起来应该是这样的。每个ID的位置始终相同，具体取决于所选的第一个位置，因此对于此实例，100将始终为USA

所需

ID |位置|价值| BAX

100 |美国| 4 | 55

我当前的HTML和JS

<table>
  <tr>
    <th>ID</th>
    <th>Location</th>
    <th>Value</th>
    <th>Bax</th>
  </tr>
  <tr>
    <td><input name ="itinValue" value="100"></td>
    <td><input name ="location" value="USA"></td>
    <td><input name="initValue" value='1'></td>
    <td><input name="bax" value='22'></td>
  </tr>
  <tr>
    <td><input name ="itinValue" value="300"></td>
    <td><input name ="location" value="CAN"></td>
    <td><input name="initValue" value='2'></td>
    <td><input name="bax" value='11'></td>
  </tr>
  <tr>
    <td><input name ="itinValue" value="100"></td>
    <td><input name ="location" value="USA"></td>
    <td><input name="initValue" value='3'></td>
    <td><input name="bax" value='33'></td>
  </tr>
  <tr>
    <td><input name ="itinValue" value="200"></td>
    <td><input name ="location" value="MEX"></td>
    <td><input name="initValue" value='4'></td>
    <td><input name="bax" value='44'></td>
   </tr>
</table>

<table class="table-two">
 <thead>
    <tr>
      <th>ID</th>
      <th>Location</th>
      <th>Value</th>
      <th>Bax</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

使用Javascript：

const itin = document.querySelectorAll('[name="itinValue"]');

var values = {};
var i  = 1;

itin.forEach((item, i) => {
  var idValue = item.value;
  var next = document.getElementsByName('initValue')[i].value;
  if (values.hasOwnProperty(idValue)) {
    values[idValue] = values[idValue] += parseInt(next);
  } else {
    values[idValue] = parseInt(next);
  }
  i++;
});


var table_two = document.querySelector('.table-two tbody');

for (var prop in values) {
  var val = values[prop];
  var tr = document.createElement('tr');
  var td1 = document.createElement('td');
  var td2 = document.createElement('td');
  td1.innerHTML = prop;
  td2.innerHTML = val;
  tr.appendChild(td1);
  tr.appendChild(td2);
  table_two.appendChild(tr);
}

并且正确地打印出ID和值。我正在考虑为BAX总计做同样的事情，做与价值总计相同的事情，给他们阵列点

  var bax = document.getElementsByName('bax')[i].value;
  if (values.hasOwnProperty(idValue)) {
    values[idValue] = [values[idValue] += parseInt(next), values[idValue] += parseInt(bax)];
  } else {
    values[idValue] = [parseInt(next), parseInt(bax)];
  }

我知道这只是为了让我知道我在想什么/想做什么。这是一个链接到快速小提琴的地方 https://jsfiddle.net/f4ha7xe6/52/

Answer 1

有一段时间了，如果有人有兴趣，最后得到一个解决方案

https://jsfiddle.net/f4ha7xe6/127/

code

使用DOM

所需

ID |位置|价值| BAX

1 个答案: