使用 JavaScript 按 HTML table 中的下拉菜单值过滤

Question

我在 HTML 中创建了一个非常简单的 table。 “部门”列在下拉列表中有 4 个可能的选择。我在第二列中手动输入金额。我要做的是在第三列显示Total Money，应该是：

总金额 =（金额）* 1，如果 Sector = Footbal（因此值为“s1”）

总金额=（金额）*9，其他情况

出于某种原因，它总是乘以 9。我怎样才能让它工作？

function getValue() {
  var selectedValue1 = document.querySelectorAll(".sector");

  if (selectedValue1 == 's1') {
    CONSTANT = 1;
  } else {
    CONSTANT = 9;
  }
}

var Initial = document.querySelectorAll('.number1');
var Double = document.querySelectorAll('.number2');

Initial.forEach(myFunction);

function myFunction(item, index) {
  getValue()
  item.addEventListener('change', (event) => {
    var initialValue = event.target.value;
    Double[index].value = initialValue * CONSTANT;
  });
}

<! --COMIENZO TABLA -->

<table class="egt">

  <! --SEGUNDA LINEA -->

  <tr>
    <th>Sector</th>
    <th>Amount of money</th>
    <th>Total money</th>
  </tr>

  <! --TERCERA LINEA -->

  <tr>

    <td>
      <select class="sector">
        <option value="s1">Football</option>
        <option value="s2">Basketball</option>
        <option value="s3">Volleyball</option>
        <option value="s4">Rugby</option>
      </select>
    </td>

    <td>
      <input type="number" class="number1">
    </td>

    <td>
      <input type="number" class="number2">
    </td>

  </tr>

  <! --CUARTA LINEA -->

  <tr>

    <td>
      <select class="sector">
        <option value="s1">Football</option>
        <option value="s2">Basketball</option>
        <option value="s3">Volleyball</option>
        <option value="s4">Rugby</option>
      </select>
    </td>

    <td>
      <input type="number" class="number1">
    </td>

    <td>
      <input type="number" class="number2">
    </td>

  </tr>

</table>

<! --FINAL TABLA -->

Answer 1

您应该委托 select 更改并从中获取值

我添加了 thead 和 tbody

const table = document.querySelector(".egt");
table.addEventListener("input", function(e) { // when ANYTHING changes
  [...table.querySelectorAll("tbody tr")].forEach(row => { // loop over all rows
    const sectorValue = row.querySelector(".sector").value == 's1' ? 1 : 9; // from this row
    const num1 = row.querySelector(".number1").value;
    row.querySelector(".number2").value = num1 * sectorValue;
  });
})

<! --COMIENZO TABLA -->

<table class="egt">
  <thead>
    <! --SEGUNDA LINEA -->
    <tr>
      <th>Sector</th>
      <th>Amount of money</th>
      <th>Total money</th>
    </tr>
  </thead>
  <! --TERCERA LINEA -->
  <tbody>
    <tr>
      <td>
        <select class="sector">
          <option value="s1">Football</option>
          <option value="s2">Basketball</option>
          <option value="s3">Volleyball</option>
          <option value="s4">Rugby</option>
        </select>
      </td>
      <td>
        <input type="number" class="number1">
      </td>
      <td>
        <input type="number" class="number2">
      </td>
    </tr>
    <! --CUARTA LINEA -->
    <tr>
      <td>
        <select class="sector">
          <option value="s1">Football</option>
          <option value="s2">Basketball</option>
          <option value="s3">Volleyball</option>
          <option value="s4">Rugby</option>
        </select>
      </td>
      <td>
        <input type="number" class="number1">
      </td>
      <td>
        <input type="number" class="number2">
      </td>
    </tr>
  </tbody>
</table>
<! --FINAL TABLA -->

注意：我使用扩展运算符 [...collection] 将 HTML 集合转换为数组 - 这是为了处理集合上没有原生 forEach 的旧版 EDGE 浏览器。如果您不想支持较旧的 Edge

，则可以 table.querySelectorAll("tbody tr").forEach()

Answer 2

你的cade有一些基本问题（f.e。由于selectedValue1是一个节点列表，它不能等于“s1”），而且你的方法也不正确。

我看不出有任何理由在这里创建循环，但如果需要的话：

遍历每一行，然后得到selection的值和number，计算输出并设置。这是更简单和正确的方法。

首先，给你的 table thead 和 tbody 标签创建一个数据包装器。

let CONSTANT = 1;
let rows = document.querySelectorAll("tbody tr");
[...rows].forEach(row => {
   let selection = row.querySelector(".sector").value;
   CONSTANT = selection === "s1" ? 1 : 9;
   let number = row.querySelector(".number1").value;
   row.querySelector(".number2").value = CONSTANT * number;
})

但这也不是最好的方法。不用循环，只需添加事件侦听器并调用一个函数来计算。

let rows = document.querySelectorAll("tbody tr");
[...rows].forEach(row => {
   row.querySelector(".number1").addEventListener("input", () => {
     calculate(row)
   })
   row.querySelector(".sector").addEventListener("change", () => {
      calculate(row)
   });
})

function calculate(row) {
    let constant = row.querySelector(".sector").value === "s1" ? 1 : 9;
    let num1 = row.querySelector(".number1").value;
    row.querySelector(".number2").value = constant * num1;
}

使用 JavaScript 按 HTML table 中的下拉菜单值过滤

Filtering by drop down menu value in an HTML table using JavaScript

html

javascript

drop-down-menu