我如何获得 table 中的总分值？

Question

HTML:

<table>
  <tr>
    <th>Student Name</th>
    <th>Student Score</th>
  </tr>
  <tr>
    <td>
      <select name="dropdown" id="dropdown" onchange="showScore()">
        <option> - </option>
        <option id="StudentA"> Student A </option>
        <option id="StudentB"> Student B </option>
      </select>
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <select name="dropdown" id="dropdown" onchange="showScore()">
        <option> - </option>
        <option id="StudentA"> Student A </option>
        <option id="StudentB"> Student B </option>
      </select>
    </td>
    <td></td>
  </tr>
</table>

JS:

const data = {
  "students": [{
    "studentName": "studentA",
    "studentScore": "60"
  }, {
    "studentName": "studentB",
    "studentScore": "50"
  }, ]
}

function showScore() {
  const dropdowns = document.querySelectorAll('#dropdown')
  dropdowns.forEach(dropdown => {
    const selectedVal = dropdown.options[dropdown.selectedIndex].id
    const formattedVal = selectedVal.charAt(0).toLowerCase() + selectedVal.slice(1)
    const score = data.students.map(item => {
      if (item.studentName == formattedVal) {
        dropdown.parentElement.parentElement.children[1].innerText = item.studentScore;
      }
    })
  })
}

如何自动获取每个学生的总分值？以及如何将 const 数据移动到 php 并使其隐藏并使用 ajax 调用函数？谢谢你帮助我。

Answer 1

如上面的评论所述，建议确保每个 ID 都是唯一的，并且可以在选择中使用值而不是 ID。

您可以使用 querySelectorAll 属性映射信息，并使用 table 列上的 [data-score] 属性获取总分。

查看我的更改以允许这样做

const data = {
  "students": [{
    "studentName": "studentA",
    "studentScore": "60"
  }, {
    "studentName": "studentB",
    "studentScore": "50"
  }, ]
}

function showScore() {
  const dropdowns = document.querySelectorAll('#dropdown')
  dropdowns.forEach(dropdown => {
    const selectedVal = dropdown.options[dropdown.selectedIndex].id
    const formattedVal = selectedVal.charAt(0).toLowerCase() + selectedVal.slice(1)
    const score = data.students.map(item => {
      if (item.studentName == formattedVal) {
        dropdown.parentElement.parentElement.children[1].innerText = item.studentScore;
      }
    })
  })
  
  // Sum total score
  let scores = document.querySelectorAll("[data-score]")
  let scoresInt = [...scores].map(item => parseInt(item.textContent) || 0)
  let sum = scoresInt.reduce((a, b) => a + b, 0)
  document.querySelector("#totalScore").innerHTML = sum
}

<table>
  <tr>
    <th>Student Name</th>
    <th>Student Score</th>
  </tr>
  <tr>
    <td>
      <select name="dropdown" id="dropdown" onchange="showScore()">
        <option> - </option>
        <option id="StudentA"> Student A </option>
        <option id="StudentB"> Student B </option>
      </select>
    </td>
    <td data-score></td>
  </tr>
  <tr>
    <td>
      <select name="dropdown" id="dropdown" onchange="showScore()">
        <option> - </option>
        <option id="StudentA"> Student A </option>
        <option id="StudentB"> Student B </option>
      </select>
    </td>
    <td data-score></td>
  </tr>
</table>
<div>
Total Score
</div>
<div id="totalScore">0</div>

我创建了几个变量来获取所有分数的实例，然后使用 ES6 的 reduce 方法将这些累加并将该值设置到总分的 div 中。

Answer 2

Array.prototype.reduce() 方法最适合这样的操作（总计）。

const sumTotal = arr =>
  arr.reduce((sum, { price, quantity }) => sum + price * quantity, 0)

const data = [
  { id: 1, price: 30, quantity: 2 },
  { id: 2, price: 20, quantity: 4 },
  { id: 3, price: 10, quantity: 2 },
]

const total = sumTotal(data);

我如何获得 table 中的总分值？

How do i get total value of scores in the table?

javascript

php

ajax