Hi SUJAYS,
Refer below code.
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
View
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function GetRow(ele) {
var tds = $(ele).closest('tr').find('td');
$("#txtName").val(tds.eq(0).html());
$("#txtCode").val(tds.eq(1).html());
$("#txtQty").val(tds.eq(2).html());
$('#txtTotal').val($('#gTotal').html());
}
function Add() {
AddRow($("#txtName").val(), $("#txtCode").val(), $("#txtQty").val());
$("#txtName").val("");
$("#txtCode").val("");
$("#txtQty").val("");
CalculateTotal();
};
function AddRow(name, qty, price) {
var tBody = $("#tblItems > TBODY")[0];
//Add Row.
row = tBody.insertRow(-1);
//Add Name cell.
var cell = $(row.insertCell(-1));
cell.html(name);
cell.attr("onclick", "GetRow(this);");
//Add Qty cell.
cell = $(row.insertCell(-1));
cell.html(qty);
cell.attr("onclick", "GetRow(this);");
//Add Price cell.
cell = $(row.insertCell(-1));
cell.html(price);
cell.attr("onclick", "GetRow(this);");
//Add Amount cell.
cell = $(row.insertCell(-1));
cell.html(parseInt(qty) * parseInt(price));
//Add Button cell.
cell = $(row.insertCell(-1));
var btnRemove = $("<a>Remove</a>");
btnRemove.attr("href", "#");
btnRemove.attr("onclick", "Remove(this);");
cell.append(btnRemove);
};
function Remove(button) {
var row = $(button).closest("TR");
var name = $("TD", row).eq(0).html();
if (confirm("Do you want to delete item : " + name)) {
var table = $("#tblItems")[0];
table.deleteRow(row[0].rowIndex);
}
CalculateTotal();
};
function CalculateTotal() {
var grandT = 0;
$("#tblItems > TBODY > tr").each(function () {
var t3 = $(this).find('td').eq(2).html();
if (!isNaN(t3)) {
grandT += parseFloat(t3);
}
});
$("#gTotal").html(grandT.toFixed());
}
</script>
</head>
<body>
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Code</th>
<th>Qty</th>
<th></th>
</tr>
<tr>
<td><input type="text" id="txtName" class="form-control" /></td>
<td><input type="text" id="txtCode" class="form-control" /></td>
<td><input type="text" id="txtQty" class="form-control" /></td>
<td>
<a class="dropdown-item">
<input type="button" id="btnAdd" value="Add" onclick="Add()" class="btn btn-primary" />
</a>
</td>
</tr>
</table>
<br />
<input type="text" id="txtTotal" class="form-control" />
<hr />
<table id="tblItems" class="table table-responsive">
<thead>
<tr>
<th>Name</th>
<th>Code</th>
<th>Qty</th>
<th></th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td></td>
<td><span id="gTotal"></span></td>
</tr>
</tfoot>
</table>
<span id="val"></span>
</body>
</html>
