How to change HTML table cell value (ie: if i enter quantity in the text box it should reflect qty colm of pol(last table value ) ) using JavaScript

I need to get the value from the textbox(Discount or quantity) and need to change the last column value of the quantity or discount in the table

<div class="col-md-2">
<h5 class="bordercool"><b>Quantity</b></h5>
<input type="text" class="form-control text-uppercase" id="Quantity" placeholder="Quantity">
</div>
<div class="col-md-2">
<h5 class="bordercool"><b>Discount</b></h5>
<input type="text" class="form-control text-uppercase" id="Discount" placeholder="Discount">
</div>

<table id="sales_table" class="table table-bordered table-hover ">
<thead>
<tr class="tableheader">
<th style="width:40px">#</th>
<th style="width:250px">Item Name</th>
<th style="width:120px">Price</th>
<th style="width:60px">Disc %</th>
<th style="width:60px">Qty</th>
<th style="width:60px">GST %</th>
<th style="width:60px">GST AMT</th>
<th style="width:60px">CGST %</th>
<th style="width:60px">CGST AMT</th>
<th style="width:120px">Total</th>
<th style="width:px"></th>
</tr>
</thead>
<tbody></tbody>
</table>


2 Answers
2

let Quantity = document.getElementById('Quantity')
let Discount = document.getElementById('Discount')

Quantity.addEventListener('keyup',function(e)
document.querySelector('.tableheader > .columnQty').innerText = 'Qty '+ e.target.value +'%';

,false)
Discount.addEventListener('keyup',function(e)
document.querySelector('.tableheader > .columnDisc').innerText = 'Disc '+ e.target.value +'%';
,false)

<div class="col-md-2">

<h5 class="bordercool"><b>Quantity</b></h5>
<input type="text" class="form-control text-uppercase" id="Quantity" placeholder="Quantity">
</div>
<div class="col-md-2">
<h5 class="bordercool"><b>Discount</b></h5>
<input type="text" class="form-control text-uppercase" id="Discount" placeholder="Discount">
</div>

<table id="sales_table" class="table table-bordered table-hover ">
<thead>
<tr class="tableheader">
<th style="width:40px">#</th>

<th style="width:250px">Item Name</th>

<th style="width:120px">Price</th>

<th style="width:60px" class='columnDisc'>Disc %</th>
<th style="width:60px" class='columnQty'>Qty</th>
<th style="width:60px">GST %</th>
<th style="width:60px">GST AMT</th>
<th style="width:60px">CGST %</th>
<th style="width:60px">CGST AMT</th>
<th style="width:120px">Total</th>
<th style="width:px" class="changedItem"></th>
</tr>
</thead>
<tbody></tbody>
</table>

this will capture the input and place it in a new row. just enter a number for quantity and hit enter. duplicate code for discount.














var quantInput = document.getElementById('Quantity');




quantInput.addEventListener("keyup", function(event)
// Cancel the default action, if needed
// event.preventDefault();
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13)
var quantity =document.getElementById("Quantity");

var table = document.getElementById("sales_table");
var row = table.insertRow(1);
var cell = new Array(11);
var length= document.getElementById("sales_table").rows.length;
var row = table.insertRow(length);

for(var i = 0; i<11;i++)
cell[i] = row.insertCell(i);


cell[4].innerHTML = quantity.value;
document.getElementById("Quantity").value = '';

);

<div class="col-md-2">

<h5 class="bordercool"><b>Quantity</b></h5>
<input type="text" class="form-control text-uppercase" id="Quantity" placeholder="Quantity" >
</div>
<div class="col-md-2">
<h5 class="bordercool"><b>Discount</b></h5>
<input type="text" class="form-control text-uppercase" id="Discount" placeholder="Discount">
</div>

<table id="sales_table" class="table table-bordered table-hover ">
<thead>
<tr class="tableheader">
<th style="width:40px">#</th>

<th style="width:250px">Item Name</th>

<th style="width:120px">Price</th>

<th style="width:60px">Disc %</th>
<th style="width:60px">Qty</th>
<th style="width:60px">GST %</th>
<th style="width:60px">GST AMT</th>
<th style="width:60px">CGST %</th>
<th style="width:60px">CGST AMT</th>
<th style="width:120px">Total</th>
<th style="width:px"></th>
</tr>
</thead>
<tbody></tbody>
</table>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.