I want a functionality, i have a list with checkbox i if checkbox is selected i want to paste the selected value in a text field.
Something like appeared in above image.
edited:
<table id="userTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order Id</th>
<th>Order Proposed Id</th>
<th>Order Proposed Date</th>
<th>Store Id</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<%for(Order orderSList:orderList){ %>
<tr>
<td><%=orderSList.getOrderId()%></td>
<td><%=orderSList.getOrderProposedId()%></td>
<td><%=orderSList.getOrderProposedDate()%></td>
<td><%=orderSList.getStoreId()%></td>
<td><input type="checkbox" name="<portlet:namespace/>notSubmitList" value="<%=orderSList.getOrderId()%>" class="case" /></td>
</tr>
<%} %>
</tbody>
</table>
<script>
var selectedValue = function(id, _this){
var checkboxes = document.getElementsByClassName('selectedIN');
for (var i = 0; i < checkboxes.length; i++) {
if(_this != checkboxes[i]){
checkboxes[i].checked = false;
}
}
if(_this.checked){
document.getElementById('result').innerHTML = document.getElementById(id).value;
}else{
document.getElementById('result').innerHTML = '';
}
}
input:-moz-read-only { /* For Firefox */
background-color: none;
border:none;
}
input:read-only {
background-color: none;
border:none;
}
<table id="userTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order Id</th>
<th>Order Proposed Id</th>
<th>Order Proposed Date</th>
<th>Store Id</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>
<input type="text" value="123" readonly="true" id="opID_1"/>
</td>
<td>Order Proposed Date</td>
<td>Store Id</td>
<td>
<input type='checkbox' onchange="selectedValue('opID_1',this)" class="selectedIN"/>
</td>
</tr>
<tr>
<td>5555</td>
<td>
<input type="text" value="456" readonly="true" id="opID_2"/>
</td>
<td>Order Proposed Date</td>
<td>Store Id</td>
<td>
<input type='checkbox' onchange="selectedValue('opID_2',this)" class="selectedIN"/>
</td>
</tr>
<tr>
<td>5555</td>
<td>
<input type="text" value="789" readonly="true" id="opID_3"/>
</td>
<td>Order Proposed Date</td>
<td>Store Id</td>
<td>
<input type='checkbox' onchange="selectedValue('opID_3',this)" class="selectedIN"/>
</td>
</tr>
<tr>
<td>5555</td>
<td>
<input type="text" value="999" readonly="true" id="opID_4"/>
</td>
<td>Order Proposed Date</td>
<td>Store Id</td>
<td>
<input type='checkbox' onchange="selectedValue('opID_4',this)" class="selectedIN"/>
</td>
</tr>
</table>
<div class='selected_values'>
<strong>Selected Value: <span id="result"></span></strong>
</div>
</tbody>
var inputs = [].slice.call(document.querySelectorAll("#userTable input[type=checkbox]"));
function generateText() {
return inputs.reduce(function(builtList, input) {
if (input.checked) {
return builtList.concat(input.value);
}
return builtList;
}, []).join();
}
var textarea = document.querySelector("textarea");
inputs.forEach(function(input) {
input.addEventListener("click", function() {
textarea.value = generateText();
});
});
Preferably, you'd use a better way (such as document.getElementById()) to select the text area, but you didn't include it in your code so I don't know its ID
You can detect the checkbox checked or not with onchange function of Jquery. After that you just select the its Order Proposal Id using by parent and find functions.
I added Jquery 2.1.1 to the below snippet.
$("input").on("change",function(){
var thiz = $(this);
if(thiz.is(':checked')){
var value = thiz.parent().parent().find("td:nth-child(2)").text();
$(".selected_values span").text(value);
}
else{
$(".selected_values span").text("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1'>
<tr>
<th>Order Id</th>
<th>Order Proposal Id</th>
<th>Order Proposal Date</th>
<th>Store Id</th>
<th>Store Id</th>
</tr>
<tr>
<td>2</td>
<td>1001</td>
<td>2016-10-21</td>
<td>1709</td>
<td>
<input type='checkbox'/>
</td>
</tr>
<tr>
<td>10</td>
<td>82715421</td>
<td>2017-05-22</td>
<td>525</td>
<td>
<input type='checkbox'/>
</td>
</tr>
<tr>
<td>11</td>
<td>82715422</td>
<td>2016-12-31</td>
<td>525</td>
<td>
<input type='checkbox'/>
</td>
</tr>
</table>
<div class='selected_values'>
<strong>Selected Value: <span></span></strong>
</div>
Pure Javascript Solution
var value_span = document.getElementById("selected_value");
function printSelectedValue(e, selected_value){
if (e.checked) {
value_span.textContent = selected_value;
}
else{
value_span.textContent = "";
}
}
<table border='1'>
<tr>
<th>Order Id</th>
<th>Order Proposal Id</th>
<th>Order Proposal Date</th>
<th>Store Id</th>
<th>Store Id</th>
</tr>
<tr>
<td>2</td>
<td>1001</td>
<td>2016-10-21</td>
<td>1709</td>
<td>
<input type='checkbox' onChange="printSelectedValue(this,'1001')"/>
</td>
</tr>
<tr>
<td>10</td>
<td>82715421</td>
<td>2017-05-22</td>
<td>525</td>
<td>
<input type='checkbox' onChange="printSelectedValue(this,'82715421')"/>
</td>
</tr>
<tr>
<td>11</td>
<td>82715422</td>
<td>2016-12-31</td>
<td>525</td>
<td>
<input type='checkbox' onChange="printSelectedValue(this,'82715422')"/>
</td>
</tr>
</table>
<div>
<strong>Selected Value: <span id='selected_value'></span></strong>
</div>
Related
I want to delete every row from the table using javascirpt Here's the code
I tried using .remove function but it did'nt work out...
HTML TABLE CODE
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
</div>
JAVASCRIPT CODE
if(tablebody.children.length > 0)
{
for (let i = 0; i < tablebody.children.length; i++)
{
tablebody.children[i].remove()
}
}
Explination
This will get all tr (rows) for the tables body.
Then it will delete (remove) any that it finds
Solution
let trs = document.querySelectorAll('#table_body tr');
trs.forEach((tr)=>{
tr.remove();
});
Find all table rows, iterate over them using for of then remove each row with Element.remove().
const rows = document.querySelectorAll("#table_body tr");
for (const row of rows) {
row.remove();
}
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td>mess fee</td>
<td>2500</td>
<td>0</td>
<td>
<input
type="number"
id="remaing_amount"
name="remaing_amount[]"
class="form-control"
placeholder="Enter Paid Amount"
/>
</td>
</tr>
</tbody>
</table>
</div>
If you want to delete all tr maybe you should do something like this
document.getElementById('table_body').innerHTML = ''
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
</div>
Try this way...
const tBody = document.querySelector('#table_body');
const tRow =document.querySelector('#table_body tr')
if (tBody.contains(tRow) {
tRow.remove();
}
try this code:
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr id = "row1">
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
<button onclick = "deletetr()">
Click here
</button>
<script>
function deletetr() {
document.getElementById("row1").remove();
}
</script>
</div>
I have a table like so
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td>431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
I have a jquery array where there some ids stored of those rows example
id= [123,431,213]
what I want is when my page loads the ids which are inside the array to be already checked
$(document).ready(function () {
//code
});
I do not know how to go about this any help would be helpful
Iterate over each row in the table body and for each take the text value of the first cell and check to see if your array includes it.
const arr = [ 431, 123, 888 ];
// Iterate over the rows
$('tbody tr').each((i, el) => {
// Grab the first cell's text and coerce it to a number
const number = Number($(el).find('td').first().text());
// If the value is in the array
if (arr.includes(number)) {
// Find the input and check it
$(el).find('input[type="checkbox"]').prop('checked', 'checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td>431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>124</td>
<td>Bob</td>
<td>23</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
var ids = ['431', '132'];
$( document ).ready(function() {
$('td.id').each(function( index ) {
if (ids.includes($(this).text())){
$( "input.checkboxes" ).eq( index ).prop( "checked", true );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td class="id">123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
i want to calculate sum of all columns, and subtraction of col1 and col2 only, i found few examples online to add row data but how i can perform both action on one row. using class or id name.
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th >column two</th>
<th >column three</th>
<th >sum of all columns</th>
<th >subtraction</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">1</td>
<td class="col2">2</td>
<td class="col3">3</td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col1">43</td>
<td class="col2">432</td>
<td class="col3">33</td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate" onclick = "calculate()">calculate</button>
jquery:
function calculate(){
var col1=$('.col1').text();
var col2=$('.col2').text();
var col3=$('.col3').text();
var sum= col1+col2+col3;
var subtract= col1-col2;
$(".sum").text(sum);
$(".subtract").text(subtract);
}
JSFiddle
Loop through all the table tr and use .find() on the columns you need. I added .col on each of the value columns so we won't need to specify the three columns on addition.
function calculate() {
var sum;
var difference;
$("tbody tr").each(function() {
sum = 0;
difference = 0;
$(this).find(".col").each(function() {
// console.log($(this).html());
sum += parseFloat($(this).html());
});
difference = parseFloat($(this).find(".col1").html()) - parseFloat($(this).find(".col2").html());
$(this).find(".sum").html(sum);
$(this).find(".subtract").html(difference);
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th>column two</th>
<th>column three</th>
<th>sum of all columns</th>
<th>subtraction</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col col1">1</td>
<td class="col col2">2</td>
<td class="col col3">3</td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col col1">43</td>
<td class="col col2">432</td>
<td class="col col3">33</td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate" onclick="calculate()">calculate</button>
Here's the answer using input fields;
$(document).ready(function() {
$("#calculate").on("click", function() {
var sum;
var difference;
$("tbody tr").each(function() {
sum = 0;
difference = 0;
$(this).find(".col").each(function() {
// console.log($(this).html());
sum += parseFloat($(this).find("input").val());
});
difference = parseFloat($(this).find(".col1").find("input").val()) - parseFloat($(this).find(".col2").find("input").val());
$(this).find(".sum").html(sum);
$(this).find(".subtract").html(difference);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th>column two</th>
<th>column three</th>
<th>sum of all columns</th>
<th>subtraction</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col col1"><input value="1" /></td>
<td class="col col2"><input value="2" /></td>
<td class="col col3"><input value="3" /></td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col col1"><input value="43" /></td>
<td class="col col2"><input value="432" /></td>
<td class="col col3"><input value="33" /></td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate">Sum
</button>
Please check this working example.
var col1=0,col2=0,col3=0,sum=0,subtract=0;
function calculate(){
$(".jsTableBody tr").each(function(){
col1=$(this).find('.col1').text();
col2=$(this).find('.col2').text();
col3=$(this).find('.col3').text();
sum= parseInt(col1) + parseInt(col2)+ parseInt(col3);
console.log(sum);
subtract= parseInt(col1)-parseInt(col2);
$(this).find(".sum").html(sum);
$(this).find(".subtract").html(subtract);
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th >column two</th>
<th >column three</th>
<th >sum of all columns</th>
<th >subtraction</th>
</tr>
</thead>
<tbody class="jsTableBody">
<tr>
<td class="col1">1</td>
<td class="col2">2</td>
<td class="col3">3</td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col1">43</td>
<td class="col2">432</td>
<td class="col3">33</td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate" onclick = "calculate()">calculate</button>
I can't delete the rows that are selected.
I want to delete the rows checked with checkbox. But I can't access the table rows and check whether the checkbox is checked. What should I do?
Code:
<div class="container">
<div class="tab tab-1">
<table id="table" border="1">
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>edit</th>
</tr>
<tr>
<td><input type="checkbox" id="select"></td>
<td>A1</td>
<td>B1</td>
<td>10</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
<tr>
<td><input type="checkbox" id="select"></td>
<td>A3</td>
<td>B3</td>
<td>30</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
<tr>
<td><input type="checkbox" id="select" class="select"></td>
<td>A2</td>
<td>B2</td>
<td>20</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
</table>
</div>
<button onclick="deleteRow();">Remove</button>
<script>
function deleteRow() {
var table = document.getElementById("table");
var rowCount = table.rows.length;
console.log("rowcount : " + rowCount);
for (var i = 1; i < rowCount; i++) {
var c = table.rows[i].cells[0].childNodes;
console.log(c);
if (c.checked == 1) {
console.log("i :" + i);
table.deleteRow(i);
}
}
}.
</script>
Use querySelectorAll() and :checked to select all checked checkbox.
parentNode.parentNode is to get parent tr node
function deleteRow() {
document.querySelectorAll('#table .select:checked').forEach(e => {
e.parentNode.parentNode.remove()
});
}
<div class="container">
<div class="tab tab-1">
<table id="table" border="1">
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>edit</th>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>A1</td>
<td>B1</td>
<td>10</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>A3</td>
<td>B3</td>
<td>30</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>A2</td>
<td>B2</td>
<td>20</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
</table>
</div>
</div>
<button onclick="deleteRow();">Remove</button>
Note: Avoid using duplicate id
The problem with your code is that after deleting a row, the index of all subsequent rows immediately decreases by one because HTMLTableElement.prototype.rows returns a live HTMLCollection.
That not only leads to your loop executing too often (because you cached table.rows.length), but also to subsequent indexes no longer matching.
I'd suggest using the much more readable for...of loop, which only gets slightly more complicated because tables don't seem to allow for using table.removeChild(row):
function deleteRow() {
const table = document.getElementById("table");
for (const [index, row] of [...table.rows].entries()) {
if (row.querySelector('input:checked')) {
table.deleteRow(index);
}
}
}
<table id="table" border="1">
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>edit</th>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>A1</td>
<td>B1</td>
<td>10</td>
<td><input type="button" value="edit" class="edit"></td>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>A3</td>
<td>B3</td>
<td>30</td>
<td><input type="button" value="edit" class="edit"></td>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>A2</td>
<td>B2</td>
<td>20</td>
<td><input type="button" value="edit" class="edit"></td>
</tr>
</table>
<button onclick="deleteRow();">Remove</button>
The way you go about deleting the rows is wrong, because you use a for loop with a pre-cached length, but when a row, say i, is deleted then the row i+1 becomes i and the length changes.
A correct way to solve this problem is to use a while loop without caching the number of rows and incrementing the index only when you don't delete a row.
Example:
function deleteRow () {
/* Cache the table. */
var table = document.getElementById("table");
/* Create the index used in the loop. */
var index = 1;
/* Repeat as long as the index is less than the number of rows. */
while (index < table.rows.length) {
/* Get the input of the cell. */
var input = table.rows[index].cells[0].children[0];
/* Check whether the input exists and is checked. */
if (input && input.checked) {
/* Delete the row at the current index. */
table.deleteRow(index);
}
else {
/* Increment the index. */
index++;
}
}
}
<div class="container">
<div class="tab tab-1">
<table id="table" border="1">
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>edit</th>
</tr>
<tr>
<td><input type="checkbox" id="select"></td>
<td>A1</td>
<td>B1</td>
<td>10</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
<tr>
<td><input type="checkbox" id="select"></td>
<td>A3</td>
<td>B3</td>
<td>30</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
<tr>
<td><input type="checkbox" id="select" class="select"></td>
<td>A2</td>
<td>B2</td>
<td>20</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
</table>
</div>
<button onclick="deleteRow();">Remove</button>
I have a table in which I have some columns:
<table id="TableID1">
<thead>
<tr>
<th>Sr. No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th width="10%">Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>TE0011200MAH3VG00</td>
<td>3 d1,</td>
<td>12</td>
<td><input type="number"></td>
<td><input type="number"></td>
</tr>
<tr>
<td>6</td>
<td>SG0246100KAD1HG10</td>
<td>3 d1,</td>
<td>12</td>
<td><input type="number"></td>
<td><input type="number"></td>
</tr>
</tbody>
</table>
If a user adds some value in the "Price" column then I multiply "Quantity" and "Price" and show the result in the third column "Total" in the same row. It will have to run time. Please give me a solution in javascript or jQuery.
You can do it like this :
$("#TableID1").find("input").change(function(){
var getVal = $(this).parent().index();
var multiply = Number($(this).parent().parent().find("td").eq(getVal-1).text()) * $(this).val();
$(this).parent().parent().find("td").eq(getVal+1).find("input").val(multiply)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TableID1">
<thead>
<tr>
<th>Sr. No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th width="10%">Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>TE0011200MAH3VG00</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
<tr>
<td>6</td>
<td>SG0246100KAD1HG10</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
</tbody>
</table>
Hope it helps :)
Attach input event handler and update the input based on the value.
$(document).ready(function() {
$('tr td:nth-child(5) input').on('input', function() {
// get input in last column and set value
$(this).closest('tr').find('td:nth-child(6) input').val(
// get value from input, and use `+` to convert string to number
+$(this).val() *
// get quantity value and multiply
+$(this).closest('tr').find('td:nth-child(4)').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TableID1">
<thead>
<tr>
<th>Sr. No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th width="10%">Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>TE0011200MAH3VG00</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
<tr>
<td>6</td>
<td>SG0246100KAD1HG10</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
</tbody>
</table>