Reputation: 107

Javascript how do I get values from generated cells in HTML table?

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. 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>

Upvotes: 0

Answers (3)

The Bomb Squad

Reputation: 4337

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>

Upvotes: 0

Bibberty

Reputation: 4768

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.

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>

Upvotes: 1

Aditya Priyam

Reputation: 156

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

 cells[index].innerHTML

and perform operations on it.

Upvotes: 0

Javascript how do I get values from generated cells in HTML table?

Answers (3)

Related Questions