Question

由于我不知道如何提出问题，我只想解释一下需要做些什么。程序应该将表数据中的所有值和表数据的提交按钮插入值插入到输入字段（每个值到一个输入字段）中，插入数字。我设法从表数据中获取值，但不知道如何处理。这是我为测试创建的代码。注意（需要纯JavaScript）

<html>
<input type="text" class="class1" id="1"></br>
<input type="text" class="class1" id="2"></br>
<input type="text" class="class1" id="3"></br>
<input type="text" class="class1" id="4"></br>
<input type="text" class="class1" id="5"></br>
<table>
    <tr>
        <td class="class1" id="1">10</td>
    </tr>
    <tr>
        <td class="class1" id="2">20</td>
    </tr>
    <tr>
        <td class="class1" id="3">30</td>
    </tr>
    <tr>
        <td class="class1" id="4">40</td>
    </tr>
    <tr>
        <td class="class1" id="5">50</td>
    </tr>
</table>
insert number<input type="text" id="text">
<input type="submit" id="submit">

<script>
    var elements = document.getElementsByClassName("class1");
    var vrednost = "";
    for (i=0; i<elements.length; i++){
        vrednost += elements[i].textContent;
    }
    document.write(vrednost);

</script>

Answer 1

尝试使用querySelectorAll有效地完成工作，

var tds = document.querySelectorAll("table td.class1");
var inputs = document.querySelectorAll("input[type='text'].class1");

Array.from(inputs).forEach(function(elm, i){
 elm.value = tds[i].textContent;
});

DEMO

Answer 2

使用data-id关联这两个元素，并使用指定querySelector属性值的data-id选择元素。

请务必记住 ID 属性不得在网页中重复。

您不能盲目地依赖position和td元素的input，因为它们可能不同步。

Array.from()方法从类似数组或可迭代的对象创建一个新的Array实例。

document.getElementById('submit').addEventListener('click', function() {
  var elements = document.querySelectorAll("td.class1"); //Select all `td` elements having class as `class1`
  var mul = document.getElementById('text').value; //get multiplication value
  Array.from(elements).forEach(function(elem) {
    document.querySelector("input.class1[data-id='" + elem.dataset.id + "']").value = (+elem.textContent * +mul);
  });
})

<input type="text" class="class1" data-id="1">
</br>
<input type="text" class="class1" data-id="2">
</br>
<input type="text" class="class1" data-id="3">
</br>
<input type="text" class="class1" data-id="4">
</br>
<input type="text" class="class1" data-id="5">
</br>
<table>
  <tr>
    <td class="class1" data-id="1">10</td>
  </tr>
  <tr>
    <td class="class1" data-id="2">20</td>
  </tr>
  <tr>
    <td class="class1" data-id="3">30</td>
  </tr>
  <tr>
    <td class="class1" data-id="4">40</td>
  </tr>
  <tr>
    <td class="class1" data-id="5">50</td>
  </tr>
</table>
insert number
<input type="text" id="text">
<input type="submit" id="submit">

我如何使用javascript按值拆分数组

2 个答案:

DEMO