Javascript 如何从 HTML 表格中生成的单元格中获取值？

Question

I have a table (check screenshot) where I can generate rows and the second column will contain a number from a text field.我有一个表格（检查屏幕截图），我可以在其中生成行，第二列将包含来自文本字段的数字。 I want to be able to grab that number from a generated cell and perform calculations with it.我希望能够从生成的单元格中获取该数字并使用它进行计算。 I am not entirely sure how to target the cell that gets generated given I can generate X amount of rows.我不完全确定如何定位生成的单元格，因为我可以生成 X 行。 The principle for this table is to generate numbers from a text field and then press a button and the third column will display a sum of all previous second column values.此表的原理是从文本字段生成数字，然后按下按钮，第三列将显示所有先前第二列值的总和。 The execution will start after a button is pressed which I will add later按下按钮后将开始执行，我稍后会添加

 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>

Answer 1

So I added some class and row pointers to help out.所以我添加了一些类和行指针来提供帮助。 see what you think.看看你的想法。

 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>

Here is a version that takes on board with Chris G mentions about seperation.这是一个与 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>

Answer 2

The exact answer to your problem cannot be given without code snippets but here is an approach which I thought of:如果没有代码片段，就无法给出您问题的确切答案，但这是我想到的一种方法：

You can use the您可以使用

 const cells=document.querySelectorAll('td')

to get a node list of all the elements and then target specific cells by indexing this list.获取所有元素的节点列表，然后通过索引此列表来定位特定单元格。 Then you can extract value from those node elements by然后您可以通过以下方式从这些节点元素中提取值

 cells[index].innerText

or或者

 cells[index].innerHTML

and perform operations on it.并对其进行操作。

Answer 3

 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 如何从 HTML 表格中生成的单元格中获取值？

问题描述

3 个解决方案

解决方案1
1 已采纳 2020-11-03 22:54:19

解决方案2
0 2020-11-03 22:33:00

解决方案3
0 2020-11-03 23:22:45

Javascript 如何从 HTML 表格中生成的单元格中获取值？

问题描述

3 个解决方案

解决方案1 1 已采纳 2020-11-03 22:54:19

解决方案2 0 2020-11-03 22:33:00

解决方案3 0 2020-11-03 23:22:45

解决方案1
1 已采纳 2020-11-03 22:54:19

解决方案2
0 2020-11-03 22:33:00

解决方案3
0 2020-11-03 23:22:45