如何使用JavaScript按值拆分数组

Question

如何使用JavaScript按值拆分数组

3

由于我不知道如何提出问题，所以我将尝试解释需要完成的任务。程序应该从表格数据中获取所有值，并在提交按钮上将表格数据的值插入到输入字段中（每个值插入一个输入字段），并乘以插入的数字。我成功地从表格数据中获取了值，但不知道如何继续。这是我为测试创建的代码。注意（纯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>

- Stefan Michelangelo Mihajlovic

2个回答

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;
});

演示

- Rajaprabhu Aravindasamy

你能解释一下这段代码吗？@Rajaprabhu Aravindasamy - Stefan Michelangelo Mihajlovic

关于选择器“table td.class1”，是否存在TD不是TABLE元素的后代的情况？ - RobG

@StefanMichelangeloMihajlovic，我们只是在遍历一个元素集合，并通过使用索引将其值设置为另一个集合中的元素。请查看Array.prototype.forEach文档。querySelectorAll将返回一个元素集合而不是数组，因此我使用了Array.from()将元素集合转换为数组。 - Rajaprabhu Aravindasamy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rayon · Accepted Answer

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

请记住，在网页中，ID属性不能重复。

您不能仅仅依靠td和input元素的position，因为它们可能不同步。 Array.from()方法从类似数组或可迭代对象创建一个新的数组实例。

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">