Javascript 如何從 HTML 表格中生成的單元格中獲取值？
[英]Javascript how do I get values from generated cells in HTML table?
問題描述
我有一個表格（檢查屏幕截圖），我可以在其中生成行，第二列將包含來自文本字段的數字。 我希望能夠從生成的單元格中獲取該數字並使用它進行計算。 我不完全確定如何定位生成的單元格，因為我可以生成 X 行。 此表的原理是從文本字段生成數字，然后按下按鈕，第三列將顯示所有先前第二列值的總和。 按下按鈕后將開始執行，我稍后會添加
var counter = 1; var pNum = 0; var i; //Target elements let btnAdd = document.getElementById('btn'); let testBtn = document.getElementById('test'); let table = document.getElementById('table1'); let bTimeInput = document.querySelector('#bTime') let bValue = document.querySelector('bCell'); //check for empty value function checkForEmpty(input) { if(input.value == null || input.value == undefined || input.value.length == 0) { return true; } return false; } btnAdd.addEventListener('click', () => { if(checkForEmpty(bTimeInput)) { alert('Enter a number') } else { counter++; pNum++; let bTime = bTimeInput.value; let wTime = 'dummyValue'; let taTime = 0; let template = ` <tr> <td>${pNum}</td> <td>${bTime}</td> <td>${wTime}</td> </tr>`; table.innerHTML += template; } });
<!DOCTYPE html> <html lang="en"> <head> <title>FCFS CPU Scheduling Algorithm</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="container"> <div id="data"> <input type="number" id="bTime" placeholder="enter burst time"> <button id="btn">Add process</button> </div> <table id="table1"> <tr> <th>P#</th> <th id="bCell">burst time</th> <th>wait time</th> <th>t/a time</th> </tr> </table> </div> <script src="algorithm.js"></script> </body> </html>
3 個解決方案
解決方案1
1 已采納 2020-11-03 22:54:19
所以我添加了一些類和行指針來提供幫助。 看看你的想法。
var counter = 0; var pNum = 0; var i; //Target elements let btnAdd = document.getElementById('btn'); let testBtn = document.getElementById('test'); let table = document.getElementById('table1'); let bTimeInput = document.querySelector('#bTime') let bValue = document.querySelector('bCell'); //check for empty value function checkForEmpty(input) { if(input.value == null || input.value == undefined || input.value.length == 0) { return true; } return false; } const getTotalTime = (bTime, counter) => { if (counter === 1) return bTime; const { innerText: pTime } = document.querySelector(`tr.row${counter-1} td.col4`); return parseInt(bTime, 10) + parseInt(pTime, 10); }; btnAdd.addEventListener('click', () => { if(checkForEmpty(bTimeInput)) { alert('Enter a number') } else { counter++; pNum++; let bTime = bTimeInput.value; let wTime = 'dummyValue'; let taTime = 0; let template = ` <tr class="row${counter}"> <td class="col1">${pNum}</td> <td class="col2">${bTime}</td> <td class="col3">${wTime}</td> <td class="col4">${getTotalTime(bTime, counter)}</td> </tr>`; table.innerHTML += template; } });
<!DOCTYPE html> <html lang="en"> <head> <title>FCFS CPU Scheduling Algorithm</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="container"> <div id="data"> <input type="number" id="bTime" placeholder="enter burst time"> <button id="btn">Add process</button> </div> <table id="table1"> <tr> <th>P#</th> <th id="bCell">burst time</th> <th>wait time</th> <th>t/a time</th> </tr> </table> </div> <script src="algorithm.js"></script> </body> </html>
這是一個與 Chris G 提到的分離有關的版本。
var counter = 0; var pNum = 0; var i; const data = { points: [] }; const headerTemplate = () => ` <tr> <th>P#</th> <th id="bCell">burst time</th> <th>wait time</th> <th>t/a time</th> </tr> `; const rowTemplate = ({id, bTime, wTime, tTime}) => ` <tr> <td>${id}</td> <td>${bTime}</td> <td>${wTime}</td> <td>${tTime}</td> </tr> `; //Target elements let btnAdd = document.getElementById('btn'); let testBtn = document.getElementById('test'); let table = document.getElementById('table1'); let bTimeInput = document.querySelector('#bTime') let bValue = document.querySelector('bCell'); //check for empty value function checkForEmpty(input) { if(input.value == null || input.value == undefined || input.value.length == 0) { return true; } return false; } const getTotalTime = (bTime) => { if (data.points.length === 0) return bTime; return bTime + data.points[data.points.length-1].tTime; }; const drawTable = () => data.points.map(point => rowTemplate(point)).join(''); btnAdd.addEventListener('click', () => { if(checkForEmpty(bTimeInput)) { alert('Enter a number') } else { counter ++; const bTime = parseInt(bTimeInput.value); const newDataPoint = { id: counter, bTime, wTime: 'dummyValue', tTime: getTotalTime(bTime) }; data.points.push(newDataPoint); table.innerHTML = headerTemplate() + drawTable(data); } });
<!DOCTYPE html> <html lang="en"> <head> <title>FCFS CPU Scheduling Algorithm</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="container"> <div id="data"> <input type="number" id="bTime" placeholder="enter burst time"> <button id="btn">Add process</button> </div> <table id="table1"> </table> </div> <script src="algorithm.js"></script> </body> </html>
解決方案2
0 2020-11-03 22:33:00
如果沒有代碼片段，就無法給出您問題的確切答案，但這是我想到的一種方法：
您可以使用
const cells=document.querySelectorAll('td')
獲取所有元素的節點列表，然后通過索引此列表來定位特定單元格。 然后您可以通過以下方式從這些節點元素中提取值
cells[index].innerText
或者
cells[index].innerHTML
並對其進行操作。
解決方案3
0 2020-11-03 23:22:45
var counter = 1; var pNum = 0; var i; //Target elements let btnAdd = document.getElementById('btn'); let testBtn = document.getElementById('test'); let table = document.getElementById('table1'); let bTimeInput = document.querySelector('#bTime') let bValue = document.querySelector('bCell'); //check for empty value function checkForEmpty(input) { if(input.value == null || input.value == undefined || input.value.length == 0) { return true; } return false; } var x0=[]//array for saving btnAdd.addEventListener('click', () => { if(checkForEmpty(bTimeInput)) { alert('Enter a number') } else { counter++; pNum++; let bTime = bTimeInput.value; let wTime = 'dummyValue'; let taTime = 0; //extremely long but successful traceable tags begin var x1=document.createElement('tr') table.appendChild(x1)//parent element in proper place //now to create children var x2=document.createElement('td') var x3=document.createElement('td') var x4=document.createElement('td') //now to apply data to children x2.innerText=pNum x3.innerText=bTime x4.innerText=wTime //now to deploy the children x1.appendChild(x2) x1.appendChild(x3) x1.appendChild(x4) //extremely long but successful traceable tags end //now to place in array x0.push({x1:x1,x2:x2,x3:x3,x4:x4}) console.log(x0[x0.length-1]) } });
<!DOCTYPE html> <html lang="en"> <head> <title>FCFS CPU Scheduling Algorithm</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="container"> <div id="data"> <input type="number" id="bTime" placeholder="enter burst time"> <button id="btn">Add process</button> </div> <table id="table1"> <tr> <th>P#</th> <th id="bCell">burst time</th> <th>wait time</th> <th>t/a time</th> </tr> </table> </div> <script src="algorithm.js"></script> </body> </html>
如何從javascript中的multidimensionnal表中獲取值？
[英]how do i get values from multidimensionnal table in javascript?
如何使用 javascript 將表格中單元格的值設置為文本輸入 onclick 的值？
[英]How do I set the values of cells in a table to be values of a text input onclick using javascript?
如何制定我的for循環代碼以在特定的html表單元格中插入值？
[英]How do I formulate my for-loop code to insert values in specific html table cells?
如何遍歷JavaScript中的表行和單元格並添加值？
[英]How do I iterate through table rows and cells in JavaScript and add the values?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何使用JavaScript從HTML表格的單元格中獲取值
如何從javascript中的multidimensionnal表中獲取值？
如何在PHP生成的表格的單元格中創建鏈接？
如何使用 javascript 將表格中單元格的值設置為文本輸入 onclick 的值？
如何獲取用javascript生成的HTML？
如何制定我的for循環代碼以在特定的html表單元格中插入值？
如何遍歷JavaScript中的表行和單元格並添加值？
如何獲取Javascript中HTML屬性的某些值？
如何獲取HTML / Javascript中的鍵值
如何將 html 多行表數據獲取到 Javascript
相關標簽