我如何獲得表格中的總分值？

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

How do i automatically get the value of total scores of each student? and also how do move the const data into php and make it hidden and call in the function using ajax? thank you for helping me.

uj5u.com熱心網友回復：

就像上面評論中提到的那樣，建議確保每個 ID 都是唯一的，并且可能在選擇中使用 value 代替 ID。

您可以使用屬性映射資訊并使用表格列上的屬性querySelectorAll獲取總分。[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。

uj5u.com熱心網友回復：

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

標籤：javascript php ajax

上一篇：將DIV子項的內容填充到整體網格布局

下一篇：如何在不出現控制臺錯誤的情況下檢查API物件是否未定義？