Javascript 特定表格單元格的設置值

Question

我在通過 javascript 和 jQuery 動態填充 HTML 表時遇到問題。

該表顯示了一些基於性別的數字，每次用戶做出選擇時，他們都會從服務器返回新數據，這些數據會填充到該表中。 有兩行和 4 個單元格。 每次 API 返回新數據時，我都會動態插入單元格並通過 javascript 更新文本。 問題是數據被填充到錯誤的表格單元格中——“女性/單元格 2”的數字最終出現在“女性/單元格 3”中，依此類推。 我不知道如何根據數據定位正確的單元格。 這是通過codepen進行的最小復制，或者也請參見下面的代碼：

我也確實查看了以下主題，但沒有看到任何似乎解決我的問題的內容：

s/o 線程 1 ----- s/o 線程 2

數據非常簡單，看起來像這樣——女性和男性分別有正百分比、中性百分比和負百分比：

let genderData = [
  { gender: "female", percent: 36, score: "neutral" },
  { gender: "female", percent: 1, score: "negative" },
  { gender: "female", percent: 18, score: "positive" },
  { gender: "male", percent: 27, score: "neutral" },
  { gender: "male", percent: 14, score: "positive" },
  { gender: "male", percent: 1, score: "negative" }
];

HTML 表如下所示，其中 header 行硬編碼在 HTML 中：

<!-- Gender Table -->
<table id="sentiment-table__gender" class="table">
  <thead class="sticky">
    <tr id="sentiment-gender-tr">
      <!-- gender -->
      <th class="sticky left-align table-th">Gender</th>
      <!-- percent positive posts -->
      <th class="sticky right-align table-th">Positive Posts</th>
      <!-- percent neutral posts -->
      <th class="sticky right-align table-th">Neutral Posts</th>
      <!-- percent Negative posts -->
      <th class="sticky right-align table-th">Negative Posts</th>
    </tr>
  </thead>
  <tbody id="sentiment-page-table__body"></tbody>
</table>

我需要做的是用每種情緒的百分比填充表格，按性別分類。 “中性”得分為“36%”的“女性”項目應出現在女性行/單元格 2（中性）中，但出現在不同的單元格中。 我懷疑這是因為數據沒有按特定順序排列，所以我不能一個一個地填充單元格。 我無法更改有關后端或數據返回方式的任何內容。

我循環遍歷數據，然后編寫條件來分離女性和男性數據。 然后我根據情緒編寫一個 switch 語句並為每個項目插入單元格。 我知道我缺少的是某種方法來指定數據點應該插入到哪個單元格中。 我嘗試通過說newFemaleRow.insertCell(2) （或我想要定位的任何單元格）來指定它，但這引發了錯誤：

sentiment.js:280 Uncaught DOMException: 
Failed to execute 'insertCell' on 'HTMLTableRowElement': 
The value provided (2) is outside the range [-1, 1].

請參閱下面的完整代碼段，包括我的 JS，這里還有一個codepen鏈接。

 $(function () { populateTable(); }); let genderData = [ { gender: "female", percent: 36, score: "neutral" }, { gender: "female", percent: 1, score: "negative" }, { gender: "female", percent: 18, score: "positive" }, { gender: "male", percent: 27, score: "neutral" }, { gender: "male", percent: 14, score: "positive" }, { gender: "male", percent: 1, score: "negative" } ]; const populateTable = () => { // Local variables let genderTable = $("#sentiment-table__gender"); // Store table id in variable let tableRef = document.getElementById("sentiment-table__gender"); // Clear out table data before loading new results $(tableRef).find("tr:gt(0)").remove(); let newMaleRow = tableRef.insertRow(-1); let newFemaleRow = tableRef.insertRow(-1); let maleGenderCell = newMaleRow.insertCell(0); let maleGenderText = document.createTextNode("Male"); maleGenderCell.className = "left-align"; maleGenderCell.appendChild(maleGenderText); let femaleGenderCell = newFemaleRow.insertCell(0); let femaleGenderText = document.createTextNode("Female"); femaleGenderCell.className = "left-align"; femaleGenderCell.appendChild(femaleGenderText); // Loop through the data to populate the table for (let item of genderData) { // MALE if (item.gender === "male") { switch (item.score) { case "negative": let negativeMalePostsCell = newMaleRow.insertCell(); let negativeMalePostsText = document.createTextNode( item.percent.toLocaleString("en-US") + "%" ); negativeMalePostsCell.className = "right-align"; negativeMalePostsCell.appendChild(negativeMalePostsText); break; case "neutral": let neutralMalePostsCell = newMaleRow.insertCell(); let neutralMalePostsText = document.createTextNode( item.percent.toLocaleString("en-US") + "%" ); neutralMalePostsCell.className = "right-align"; neutralMalePostsCell.appendChild(neutralMalePostsText); break; case "positive": let positiveMalePostsCell = newMaleRow.insertCell(); let positiveMalePostsText = document.createTextNode( item.percent.toLocaleString("en-US") + "%" ); positiveMalePostsCell.className = "right-align"; positiveMalePostsCell.appendChild(positiveMalePostsText); break; } } // FEMALE if (item.gender === "female") { switch (item.score) { case "negative": let negativeFemalePostsCell = newFemaleRow.insertCell(); let negativeFemalePostsText = document.createTextNode( item.percent.toLocaleString("en-US") + "%" ); negativeFemalePostsCell.className = "right-align"; negativeFemalePostsCell.appendChild(negativeFemalePostsText); break; case "neutral": let neutralFemalePostsCell = newFemaleRow.insertCell(); let neutralFemalePostsText = document.createTextNode( item.percent.toLocaleString("en-US") + "%" ); neutralFemalePostsCell.className = "right-align"; neutralFemalePostsCell.appendChild(neutralFemalePostsText); break; case "positive": let positiveFemalePostsCell = newFemaleRow.insertCell(); let positiveFemalePostsText = document.createTextNode( item.percent.toLocaleString("en-US") + "%" ); positiveFemalePostsCell.className = "right-align"; positiveFemalePostsCell.appendChild(positiveFemalePostsText); break; } } } };

 /* ================================================== Table styling ================================================== */.table { text-overflow: wrap; border-collapse: collapse; border-spacing: 0; width: 80%; border: 1px solid #ddd; position: relative; } /* GENERAL TABLE STYLING */.sticky { position: sticky; position: -webkit-sticky; top: -1px; background: white; }.table-th, .table td { padding: 8px; height: 40px; }.right-align { text-align: right; }.center-align { text-align: center; }.left-align { text-align: left; }.table tr:nth-child(even) { background-color: orange; }.border { border-bottom: 1px inset black; }

 <:-- jQuery --> <script src="https.//code.jquery.com/jquery-3.6.0.min:js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <.-- jQuery UI --> <script src="https.//code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <!-- Gender Table --> <table id="sentiment-table__gender" class="table"> <colgroup> <col span="1" /> <col span="1" /> <col span="1" /> <col span="1" /> </colgroup> <thead class="sticky"> <tr id="sentiment-gender-tr"> <!-- gender --> <th class="sticky left-align table-th">Gender</th> <!-- percent positive posts --> <th class="sticky right-align table-th">Positive Posts</th> <!-- percent neutral posts --> <th class="sticky right-align table-th">Neutral Posts</th> <!-- percent Negative posts --> <th class="sticky right-align table-th">Negative Posts</th> </tr> </thead> <tbody id="sentiment-page-table__body"></tbody> </table>

Answer 1

射擊，這應該很容易。 我只需要按照與 HTML 相同的順序動態插入 JS，我所做的就是在 switch 語句中切換 case 的順序以匹配表 header 中單元格的順序，然后 boom。 所有數據都填充在正確的單元格中。

這是一個更新的codepen

 $(function () { populateTable(); }); let genderData = [ { gender: "female", percent: 36, score: "neutral" }, { gender: "female", percent: 1, score: "negative" }, { gender: "female", percent: 18, score: "positive" }, { gender: "male", percent: 27, score: "neutral" }, { gender: "male", percent: 14, score: "positive" }, { gender: "male", percent: 1, score: "negative" } ]; const populateTable = () => { // Local variables let genderTable = $("#sentiment-table__gender"); // Store table id in variable let tableRef = document.getElementById("sentiment-table__gender"); // Clear out table data before loading new results $(tableRef).find("tr:gt(0)").remove(); let newMaleRow = tableRef.insertRow(-1); let newFemaleRow = tableRef.insertRow(-1); let maleGenderCell = newMaleRow.insertCell(0); let maleGenderText = document.createTextNode("Male"); maleGenderCell.className = "left-align"; maleGenderCell.appendChild(maleGenderText); let femaleGenderCell = newFemaleRow.insertCell(0); let femaleGenderText = document.createTextNode("Female"); femaleGenderCell.className = "left-align"; femaleGenderCell.appendChild(femaleGenderText); // Loop through the data to populate the table for (let item of genderData) { // MALE if (item.gender === "male") { switch (item.score) { case "neutral": let neutralMalePostsCell = newMaleRow.insertCell(); let neutralMalePostsText = document.createTextNode( item.percent.toLocaleString("en-US") + "%" ); neutralMalePostsCell.className = "right-align"; neutralMalePostsCell.appendChild(neutralMalePostsText); break; case "negative": let negativeMalePostsCell = newMaleRow.insertCell(); let negativeMalePostsText = document.createTextNode( item.percent.toLocaleString("en-US") + "%" ); negativeMalePostsCell.className = "right-align"; negativeMalePostsCell.appendChild(negativeMalePostsText); break; case "positive": let positiveMalePostsCell = newMaleRow.insertCell(); let positiveMalePostsText = document.createTextNode( item.percent.toLocaleString("en-US") + "%" ); positiveMalePostsCell.className = "right-align"; positiveMalePostsCell.appendChild(positiveMalePostsText); break; } } // FEMALE if (item.gender === "female") { switch (item.score) { case "neutral": let neutralFemalePostsCell = newFemaleRow.insertCell(); let neutralFemalePostsText = document.createTextNode( item.percent.toLocaleString("en-US") + "%" ); neutralFemalePostsCell.className = "right-align"; neutralFemalePostsCell.appendChild(neutralFemalePostsText); break; case "negative": let negativeFemalePostsCell = newFemaleRow.insertCell(); let negativeFemalePostsText = document.createTextNode( item.percent.toLocaleString("en-US") + "%" ); negativeFemalePostsCell.className = "right-align"; negativeFemalePostsCell.appendChild(negativeFemalePostsText); break; case "positive": let positiveFemalePostsCell = newFemaleRow.insertCell(); let positiveFemalePostsText = document.createTextNode( item.percent.toLocaleString("en-US") + "%" ); positiveFemalePostsCell.className = "right-align"; positiveFemalePostsCell.appendChild(positiveFemalePostsText); break; } } } };

 /* ================================================== Table styling ================================================== */.table { text-overflow: wrap; border-collapse: collapse; border-spacing: 0; width: 80%; border: 1px solid #ddd; position: relative; } /* GENERAL TABLE STYLING */.sticky { position: sticky; position: -webkit-sticky; top: -1px; background: white; }.table-th, .table td { padding: 8px; height: 40px; }.right-align { text-align: right; }.center-align { text-align: center; }.left-align { text-align: left; }.table tr:nth-child(even) { background-color: orange; }.border { border-bottom: 1px inset black; }

 <:-- jQuery --> <script src="https.//code.jquery.com/jquery-3.6.0.min:js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <.-- jQuery UI --> <script src="https.//code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <!-- Gender Table --> <table id="sentiment-table__gender" class="table"> <colgroup> <col span="1" /> <col span="1" /> <col span="1" /> <col span="1" /> </colgroup> <thead class="sticky"> <tr id="sentiment-gender-tr"> <!-- gender --> <th class="sticky left-align table-th">Gender</th> <!-- percent neutral posts --> <th class="sticky right-align table-th" id='neutral-posts-th'>Neutral Posts</th> <!-- percent Negative posts --> <th class="sticky right-align table-th" id='negative-posts-th'>Negative Posts</th> <!-- percent positive posts --> <th class="sticky right-align table-th" id='positive-posts-th'>Positive Posts</th> </tr> </thead> </table>