<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>`enter code here`
$(document).ready(function () {
var result=1;
$('input').keyup(function(){`enter code here`
$('tr').each(function () {
var sum = $(this).find('td.combat').text();
var combat = $(this).find('input.combat').val();
if (!isNaN(sum) && sum.length !== 0 && !isNaN(combat) && combat.length !== 0) {
result = parseFloat(sum)*parseFloat(combat);
}
$(this).find('.total-combat').html(result);
});
});
$('.add').click(function(){
var sno = $(this).parent().siblings('.sno').text();
var cust = $(this).parent().siblings('.cust').text();
var price = $(this).parent().siblings('td.combat').text();
var rowValue = [];
$(this).closest('tr').find("input").each(function() {
rowValue.push($(this).val());
return $(this).val();
});
var rowValue1 = [];
$(this).closest('tr').find("span").each(function() {
rowValue1.push($(this).text());
return $(this).val();
});
var markup = "<tr><td class='sno'>" + sno + "</td><td class='custname'>" + cust +"</td><td class='price'>" + price +"</td><td><input type='text' class='newtext' value="+ rowValue[0] +"></td><td class='total'>" + rowValue1[0] +"</td><td><input type='submit' class='update' value='upd'><input type='button' class='del' value='del'></td></tr>";
var rightcol = $(this).closest('tr').find(".cust");
var row_count = $('.tbl1 tbody tr').length;
alert(row_count);
if (row_count == 0) {
$(".tbl1 tbody").append(markup);
}
else
{
var tes=0;
$('.tbl1 tbody tr').each(function(){
var leftcol = $(this).find(".custname");
if(rightcol.html() == leftcol.html()) {
alert(leftcol.html()+"-----------------"+rightcol.html());
$(this).find('.sno').text(sno);
$(this).find('.custname').text(cust);
$(this).find('.price').text(price);
$(this).find('.newtext').val(rowValue[0]);
$(this).find('.total').text(rowValue1[0]);
tes++;
}
});
if(tes==0){
$(".tbl1 tbody").append(markup);
}
}
});
$(".tb").on("click", ".update", function(e) {
var rowValues = [];
$(this).closest('tr').find("input").each(function() {
rowValues.push($(this).val());
return $(this).val();
});
var total=$(this).closest('tr').find('.total').text();
var right_cols = $(this).closest('tr').find(".custname");
$('.tbl tbody tr').each(function(){
var row = $(this);
var left_cols = $(this).find(".cust");
if(left_cols.html() == right_cols.html()) {
$(this).find('.text').val(rowValues[0]);
$(this).find('.total-combat').text(total);
}
});
});
$(".tb").on("keyup", "input", function() {
$('tr').each(function () {
var sum = $(this).find('td.price').text();
var combat = $(this).find('input.newtext').val();
if (!isNaN(sum) && sum.length !== 0 && !isNaN(combat) && combat.length !== 0) {
result = parseFloat(sum)*parseFloat(combat);
}
$(this).find('.total').html(result);
});
});
$(".tb").on("click", ".del", function() {
$(this).closest('tr').remove();
});
});
</script>
<style>
.table_style {
width: 500px;
margin: 0px auto;
}
table{
width: 100%;
border-collapse: collapse;
}
table tr td{
width: 50%;
border: 5px solid #ff751a;
padding: 5px;
}
table tr th{
border: 5px solid #79ff4d;
padding: 5px;
}
input{
width:35px;
}
.tbl1{
margin-top: 50px;
border: 0px solid #cdcdcd;
}
.btn{
float:left;
}
</style>
<title>E-Commerce-Table</title>
</head>
<body>
<div class="table_style">
<caption>Price-List</caption>
<table class="tbl">
<tr>
<th>S.No</th>
<th>P.Name</th>
<th>Price</th>
<th>Qnty</th>
<th>Rate</th>
<th>action</th>
</tr>
<tbody>
<tr>
<td class="sno">1</td>
<td class="cust">A</td>
<td class="combat">5</td>
<td class="tester"><input type="number" id="qnty1" name="Qnty" value="0" class="combat text"></td>
<td><span class="total-combat"></span></td>
<td><input type="submit" name="submit" value="Add" class="add"></td>
</tr>
<tr>
<td class="sno">2</td>
<td class="cust">B</td>
<td class="combat">8</td>
<td><input type="number" id="qnty2" name="Qnty" value="0" class="combat text"></td>
<td><span class="total-combat"></span></td>
<td><input type="submit" name="submit" value="Add" class="add"></td>
</tr>
<tr>
<td class="sno">3</td>
<td class="cust">C</td>
<td class="combat">7</td>
<td><input type="number" id="qnty3" name="Qnty" value="0" class="combat text"></td>
<td><span class="total-combat"></span></td>
<td><input type="submit" name="submit" value="Add" class="add"></td>
</tr>
<tr>
<td class="sno">4</td>
<td class="cust">D</td>
<td class="combat">2</td>
<td><input type="number" id="qnty4" name="Qnty" value="0" class="combat text"></td>
<td><span class="total-combat"></span></td>
<td><input type="submit" name="submit" value="Add" class="add"></td>
</tr>
</tbody>
</table>
<table class="tbl1">
<thead>
<tr>
<th>S.No</th>
<th>P.Name</th>
<th>Price</th>
<th>Qnty</th>
<th>Rate</th>
<th>action</th>
</tr>
</thead>
<tbody class="tb">
</tbody>
</table>
<button type="submit" name="addtocart" id="btn">Add-to-cart</button>
</div>
</body>
</html>