主页 / 问题 / 709940
Accepted
Egor Trutnev
Asked:2020-08-24 16:43:16 +0000 UTC2020-08-24 16:43:16 +0000 UTC

添加具有相同 ID 的行。JavaScript

  • 772

表中的行数不是固定的。每行有 2 列

在此处输入图像描述

列被分成组。组更改标识符的第一位。每行都有一个唯一的标识符。一组可以有不同数量的行（从 1 到 50）。

您需要实现以下逻辑。在“开始周”列中输入数字（确切地说是数字）时，应从相邻列中提取时间并与一周开始的标识符等于输入的时间的时间相加。

也就是有数据输入

在此处输入图像描述

应接收数据：

1:7

5:5

7:1

9:4

23:6

53:7

如果省略了标识符，则应将其替换为零（即，在示例中 2-4,6,8,10-22,24-52: 0

一周开始时输入的标识符是按顺序排列的。它们从 1 开始，到 200 结束。

我知道我需要创建一个包含 200 个元素的数组，在循环中进行输入检查并使用输入事件。但是，我不知道如何从文本框和标签中获取数字并将它们关联起来，如果一组中的行数几乎在所有地方都不同并且组数不受限制（在示例中有 2 个组，每个其中有 5 行。但是，实际上可能没有 5 行，而是从 1 到 100。同样，有组）。

我不是要你写代码。我需要了解如何关联来自 2 列的信息。javascript 应该如何知道已对其 id 中包含关键字“week”的文本框（输入）进行了输入。

PS输出文本框（输入）看起来像这样

<input name="ctl00$ctl00$MainContent$PPContent$week_1_1" type="text" 
id="MainContent_PPContent_week_1_1" class="week" data-column="1" 
data-row="1" style="width:100%">

一个标签（跨度）

<span id="MainContent_PPContent_time_1_1" class="time" 
 data-columns="1" data-row="1">1</span>
javascript

1 个回答

  1. Best Answer

    var list_inputs = document.getElementsByClassName('week');
var list_span = document.getElementsByClassName('time');
var txt = document.getElementById('infotxt');

[].forEach.call(list_inputs, function (el) {
   el.addEventListener('input', function (e) {
      txt.innerHTML = null;
      var arr = [];
      for (var i = 0; i < list_inputs.length; i++) {
         if (list_inputs[i].value != "") {
            col = list_inputs[i].dataset.column;
            row = list_inputs[i].dataset.row;
            for (var j = 0; j < list_span.length; j++) {
               if (list_inputs[i].dataset.column == list_span[j].dataset.column && list_inputs[i].dataset.row == list_span[j].dataset.row) {
                  if (arr[list_inputs[i].value] == null) arr[list_inputs[i].value] = 0;
                  
                  arr[list_inputs[i].value] += parseInt(list_span[j].textContent);
                  break;
               }
            }
         }
      }
      for (var i = 1; i < arr.length; i++) {
         if (arr[i] == null) arr[i] = 0; 
         txt.innerHTML += arr[i] + "<br>";
      }
   });
});
    input[type="text"] {
   margin: 10px 5px 10px 0;
}
    <td><input style="width:80px" name="ctl00$ctl00$MainContent$PPContent$week_1_1" type="text" id="MainContent_PPContent_week_1_1" class="week" data-column="1" data-row="1" style="width:100%"></td><td><span id="MainContent_PPContent_time_1_1" class="time" data-column="1" data-row="1">1</span></td>
<td><input style="width:80px" name="ctl00$ctl00$MainContent$PPContent$week_1_2" type="text" id="MainContent_PPContent_week_1_2" class="week" data-column="2" data-row="1" style="width:100%"></td><td><span id="MainContent_PPContent_time_1_2" class="time" data-column="2" data-row="1">2</span></td>
<td><input style="width:80px" name="ctl00$ctl00$MainContent$PPContent$week_1_3" type="text" id="MainContent_PPContent_week_1_3" class="week" data-column="3" data-row="1" style="width:100%"></td><td><span id="MainContent_PPContent_time_1_3" class="time" data-column="3" data-row="1">3</span></td>
<br>
<td><input style="width:80px" name="ctl00$ctl00$MainContent$PPContent$week_2_1" type="text" id="MainContent_PPContent_week_2_1" class="week" data-column="1" data-row="2" style="width:100%"></td><td><span id="MainContent_PPContent_time_2_1" class="time" data-column="1" data-row="2">1</span></td>
<td><input style="width:80px" name="ctl00$ctl00$MainContent$PPContent$week_2_2" type="text" id="MainContent_PPContent_week_2_2" class="week" data-column="2" data-row="2" style="width:100%"></td><td><span id="MainContent_PPContent_time_2_2" class="time" data-column="2" data-row="2">2</span></td>
<td><input style="width:80px" name="ctl00$ctl00$MainContent$PPContent$week_2_3" type="text" id="MainContent_PPContent_week_2_3" class="week" data-column="3" data-row="2" style="width:100%"></td><td><span id="MainContent_PPContent_time_2_3" class="time" data-column="3" data-row="2">3</span></td>
<br>
<span id="infotxt"></span>

    • 0

相关问题