I have a table (parent) and one another table inside that table(child).
I want to update the cell value of parent table from child table.
<table id="example" class="table table-bordered table-striped mt-4 nowrap" style="width:100%">
<thead>
<tr class="bg-primary text-light">
<th></th>
<th>
#Html.DisplayName("Restaurant Name")
</th>
<th>
#Html.DisplayName("Delivery Date")
</th>
<th>
#Html.DisplayName("Status")
</th>
<th class="none">
#Html.DisplayName("Preferred Delivery Date")
</th>
<th class="none">
<b> #Html.DisplayName("Item List") </b>
</th>
<th class="none"></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td></td>
<td>
#Html.DisplayFor(modelItem => item.RestaurantName)
</td>
<td>
#String.Format("{0:dd/MM/yyyy}", item.DELIVERED_DATE)
#*#Html.DisplayFor(modelItem => item.DELIVERED_DATE.Value.ToString("dd/MM/yyyy"))*#
</td>
<td>
#if (item.STATUS == 1)
{
<span class="badge badge-secondary">Draft</span>
}
#if (item.STATUS == 2)
{
<span class="badge badge-warning">Pending confirmation</span>
}
#if (item.STATUS == 3)
{
<span class="badge badge-primary">Confirmed</span>
}
#if (item.STATUS == 4)
{
<span class="badge badge-suceess">Delivered</span>
}
</td>
<td>
: #String.Format("{0:dd/MM/yyyy}", item.PREFERRED_DELIVERY_DATE)
</td>
<td>
:
<table>
<thead>
<tr class="bg-primary text-light">
<th>
#Html.DisplayName("Item Name")
</th>
<th>
#Html.DisplayName("Quantity")
</th>
<th>
#Html.DisplayName("Price")
</th>
</tr>
</thead>
<tbody>
<tr>
#foreach (var test in item.OrderSupplierItems)
{
<tr>
<td>#Html.DisplayFor(modelItem => test.IngredientName)</td>
<td>#Html.DisplayFor(modelItem => test.QUANTITY)</td>
<td>#Html.DisplayFor(modelItem => test.PRICE)$</td>
</tr>
}
<tr>
<td colspan="2">Sum</td>
<td>#item.OrderSupplierItems.Sum(b => b.PRICE)$</td>
</tr>
<tr>
</tbody>
</table>
</td>
<td>
<a class='Confirm btn btn-success' href='javascript:;#item.ID_ORDER_SUPPLIER'>CONFIRM</a>
<a class='btn btn-primary'>MAKE CHANGES</a>
</td>
</tr>
}
</tbody>
</table>
I want to change the status on ajax success request.
$("body").on("click", "#example TBODY .Confirm", function () {
if (confirm("Do you want to confirm this order?")) {
var row = $(this).closest("tr");
var orderSupplierId = $(this).attr('href').substr(12);
$.ajax({
type: "PUT",
url: "#System.Configuration.ConfigurationManager.AppSettings["ServiceUrl"]/api/OrderSupplier/" + orderSupplierId +"?status=3",
contentType: 'application/json', // <---add this
dataType: 'text',
success: function (response) {
//here i want to do this
},
error: function (xhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
I need to update the status field of parent table based on confirm changes button.
I need to replace the current text of status field of current table.
You can use closest('tr').find("td:eq(3)") this will refer to 4th column td in your table i.e : status column and use .html or .text to make changes there .
Demo Code :
$("body").on("click", ".Confirm", function() {
if (confirm("Do you want to confirm this order?")) {
var row = $(this); //declare this outside..ajax call
var orderSupplierId = $(this).attr('href').substr(12);
//ajaxcodes..
//success: function(response) {
//here i want to do this
row.closest('tr').find("td:eq(3)").html('<span class="badge badge-primary">Confirmed</span>')
//},
//other codes
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<table id="example" class="table table-bordered table-striped mt-4 nowrap" style="width:100%">
<thead>
<tr class="bg-primary text-light">
<th></th>
<th>
Restaurant Name
</th>
<th>
Delivery Date
</th>
<th>
Status
</th>
<th class="none">
Preferred Delivery Date
</th>
<th class="none">
<b>Item List </b>
</th>
<th class="none"></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
Somehtings..
</td>
<td>
02/02/202
</td>
<td>
<span class="badge badge-warning">Pending confirmation</span>
</td>
<td>
02/3/2020
</td>
<td>
<table>
<thead>
<tr class="bg-primary text-light">
<th>
Item Name
</th>
<th>
Quantity
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>somehting</td>
<td>abc</td>
<td>12$</td>
</tr>
<tr>
<td colspan="2">Sum</td>
<td>123$</td>
</tr>
<tr>
</tbody>
</table>
</td>
<td>
<a class='Confirm btn btn-success' href='javascript:;#item.ID_ORDER_SUPPLIER'>CONFIRM</a>
<a class='btn btn-primary'>MAKE CHANGES</a>
</td>
</tr>
<tr>
<td></td>
<td>
Somehtings..
</td>
<td>
02/02/202
</td>
<td>
<span class="badge badge-success">Delivered</span>
</td>
<td>
02/3/2020
</td>
<td>
<table>
<thead>
<tr class="bg-primary text-light">
<th>
Item Name
</th>
<th>
Quantity
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>somehting</td>
<td>abc</td>
<td>12$</td>
</tr>
<tr>
<td colspan="2">Sum</td>
<td>123$</td>
</tr>
<tr>
</tbody>
</table>
</td>
<td>
<a class='Confirm btn btn-success' href='javascript:;#item.ID_ORDER_SUPPLIER'>CONFIRM</a>
<a class='btn btn-primary'>MAKE CHANGES</a>
</td>
</tr>
</tbody>
</table>
You can search back from the element you're in, which is the button, with .closest(). Then find the status field from there. Best would be to give the status a class or id. So:
$(this).closest('table').find('.status')
Related
I have a table and I want to compare it to the table.
If A2 > A1, I want to set the row to red color.
I can access data with Each command, but I have difficulty in the class to assign.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-sm table-bordered mt-4" style="font-size: 12px; ">
<thead>
<th>
<center>Stok</center>
</th>
<th>
<center>A1</center>
</th>
<th>
<center>A2</center>
</th>
</thead>
<tbody id="arsivTablosu">
<tr id="satir">
<td>A1</td>
<td id="envanter" class="">
<center>44</center>
</td>
<td id="kritikStok" class="">
<center>45</center>
</td>
</tr>
<tr id="satir">
<td>A2</td>
<td id="envanter" class="">
<center>50</center>
</td>
<td id="kritikStok" class="">
<center>10</center>
</td>
</tr>
<tr id="satir">
<td>A3</td>
<td id="envanter" class="">
<center>26</center>
</td>
<td id="kritikStok" class="">
<center>27</center>
</td>
</tr>
<tr id="satir">
<td>A4</td>
<td id="envanter" class="">
<center>40</center>
</td>
<td id="kritikStok" class="">
<center>39</center>
</td>
</tr>
</tbody>
</table>
You can use .each loop to iterate through your tbody trs then use .find("td:eq(1) center") to get value of td from 2nd column and .find("td:eq(2) center") to get value from 3rd column then compare both and add class depending on this .
Demo Code :
//loop through tr
$("#arsivTablosu tr").each(function() {
//check the value of 2 & 3 td
parseInt($(this).find("td:eq(2) center").text()) > parseInt($(this).find("td:eq(1) center").text()) ? $(this).addClass("red_color") : ""
})
.red_color {
background-color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-sm table-bordered mt-4" style="font-size: 12px; ">
<thead>
<th>
<center>Stok</center>
</th>
<th>
<center>A1</center>
</th>
<th>
<center>A2</center>
</th>
</thead>
<tbody id="arsivTablosu">
<tr>
<td>A1</td>
<td>
<center>44</center>
</td>
<td>
<center>45</center>
</td>
</tr>
<tr>
<td>A2</td>
<td>
<center>50</center>
</td>
<td>
<center>10</center>
</td>
</tr>
<tr>
<td>A3</td>
<td>
<center>26</center>
</td>
<td>
<center>27</center>
</td>
</tr>
<tr>
<td>A4</td>
<td>
<center>40</center>
</td>
<td>
<center>39</center>
</td>
</tr>
</tbody>
</table>
I am basically performing calculation in dynamic table cell want to change sum of cell value whenever cell value change by user
I have already tried different method of jquery but not get what i want
<table class="table table-responsive table-hover table-bordered" id="tablefinaldata">
<thead>
<tr>
<td>
<h5> Code</h5>
</td>
<td>
<h5> Item</h5>
</td>
<td>
<h5> Price</h5>
</td>
<td>
<h5> Quantity</h5>
</td>
<td>
<h5> Sub Total</h5>
</td>
</tr>
</thead>
<tbody id="tablefinalbody">
</tbody>
function CalSum ()
{
$("#setfinaldata #subtotal").each(function () {
var row = $(this);
var rowTotal = 0;
$(this).find('th').each(function () {
var th = $(this);
if ($.isNumeric(th.text())) {
rowTotal += parseFloat(th.text());
}
});
row.find('th:last').text(rowTotal);
});
}
function CalSum() {
var $trList = $("#tablefinalbody").find('tr');
var rowTotal = new Array($trList.length);
$trList.each(function() {
var row = $(this);
$(this).find('th').each(function(index) {
var th = $(this);
if ($.isNumeric(th.text())) {
if (!rowTotal[index]) rowTotal[index] = 0
rowTotal[index] += parseFloat(th.text());
}
});
});
$trList.last().children().each(function(index) {
$(this).text(rowTotal[index])
})
}
CalSum();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-responsive table-hover table-bordered" id="tablefinaldata">
<thead>
<tr>
<td>
<h5> Code</h5>
</td>
<td>
<h5> Item</h5>
</td>
<td>
<h5> Price</h5>
</td>
<td>
<h5> Quantity</h5>
</td>
<td>
<h5> Sub Total</h5>
</td>
</tr>
</thead>
<tbody id="tablefinalbody">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<th>123</th>
<th>42</th>
<th>53</th>
<th>64</th>
<th>234</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tbody>
</table>
i'm struggling trying to perform the following operation:
I've this table:
<table id="saleDetails" class="table table-hover table-condensed">
<thead>
<tr>
<th>Code </th>
<th>Description </th>
<th>Price </th>
<th>Quantity </th>
</tr>
</thead>
<tbody>
<tr>
<th> 001 </th>
<th> One description </th>
<th> 30.5 </th>
<th> <input type="number"></input> </th>
</tr>
<tr>
<th> 002 </th>
<th> Some description </th>
<th> 120 </th>
<th> <input type="number"></input> </th>
</tr>
<tr>
<th> 003 </th>
<th> Other description </th>
<th> 300.5 </th>
<th> <input type="number"></input> </th>
</tr>
</tbody>
</table>
what i'm trying to do is get the unitPrice and multiply it by the quantity input value to get the subtotal for each line.
i got the unitPrice with this sentence for each cell in column 3:
$('#saleDetails tr td:nth-child(3)').each(function () {
console.log( $(this).text() );
});
but i would like to perform the operation unitPrice * quantity (quantity is a input component) and i'm not sure how get the unitPrice and quantity at the same time (I'm not sure if that's possible) for each iteration on the table.
Any help will be welcome.
Thanks.
You can do something like this:
$('#saleDetails tr').each(function () {
var price = $(this).find("td:nth-child(3)").text()
var quantity = $(this).find("td:nth-child(4) input").val()
console.log( quantity + " " + price);
});
You can use DOM traversal method to target the input. Use .closest() to traverse up to TR element the use .find() to target the input
$('#saleDetails tr td:nth-child(3)').each(function () {
var quantity = $(this).closest('tr').find('input').val();
console.log( $(this).text(), quantity );
});
$('#saleDetails tr td:nth-child(3)').each(function() {
var quantity = $(this).closest('tr').find('input').val();
console.log($(this).text().trim(), quantity);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="saleDetails" class="table table-hover table-condensed">
<thead>
<tr>
<th>Code </th>
<th>Description </th>
<th>Price </th>
<th>Quantity </th>
</tr>
</thead>
<tbody>
<tr>
<td> 001 </td>
<td> One description </td>
<td> 30.5 </td>
<td> <input type="number" value="5" /></d>
</tr>
</tbody>
</table>
There are various method, you can also use
var quantity = $(this).closest('td').next().find('input').val();
Try this code by using class selector; jsfiddle
html:
<table id="saleDetails" class="table table-hover table-condensed">
<thead>
<tr>
<th>Code </th>
<th>Description </th>
<th>Price </th>
<th>Quantity </th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td> 001 </td>
<td> One description </td>
<td class="unitprice"> 30.5 </td>
<td> <input type="number" class="quantity" /> </td>
<td class="total"></td>
</tr>
<tr>
<td> 002 </td>
<td> Some description </td>
<td class="unitprice"> 120 </td>
<td> <input type="number" class="quantity" /> </td>
<td class="total"></td>
</tr>
</tbody>
</table>
and js:
$('#saleDetails tr').on("change", ".quantity", function (event) {
var $row = $(event.delegateTarget);
var price = $row.find(".unitprice").text();
var quantity = $row.find(".quantity").val();
var total = price*quantity;
$row.find(".total").text(total);
});
When i click on page number it doesn't display the corresponding results.
Here is a sample of code.
<div class="col wrapper-sm w-md bg-auto dk r-r">
<div class="panel panel-default" ng-show="$parent.showPie === true;">
<div class="table-responsive">
<table class="table" ng-show="hashes[0]" id="placement">
<thead>
<th> Hash </th>
<th> MalwareFamily </th>
<th> Score </th>
<th> Counts </th>
</thead>
<tbody>
<tr dir-paginate="hash in hashes| itemsPerPage:20">
<td><a href="#/app/country/{{countryName}}/cCode/{{stateCode}}/hash/{{hash['hash']}}/inbox/info" >{{hash['hash']}} </a></td>
<td> {{hash['malFamily']}} </td>
<td> {{hash['malScore']}} </td>
<td> {{hash['hits']}} </td>
</tr>
</tbody>
</table>
</div>
<div id="content">
<dir-pagination-controls></dir-pagination-controls>
</div>
</div>
Corresponding controller is where am populating data from services, service is giving right data:
function malPAge(test) {
crudSrv.getResults(rootURL.url.baseURL + "global/country/" + $scope.stateCode + "/attacks/malware/hashes/" + test + "/", function(data, status) {
ngProgress.complete();
$scope.hashes = data;
var m = "placement";
$location.hash(m);
$anchorScroll();
});
}
I fixed it using id concept. Below is my code how i fixed this issue.
<div class="col wrapper-sm w-md bg-auto dk r-r">
<div class="panel panel-default" ng-show="$parent.showPie === true;">
<div class="table-responsive">
<table class="table" ng-show="hashes[0]" id="placement">
<thead>
<th> Hash </th>
<th> MalwareFamily </th>
<th> Score </th>
<th> Counts </th>
</thead>
<tbody>
<tr dir-paginate="hash in hashes| itemsPerPage:20" pagination-id="hash">
<td><a href="#/app/country/{{countryName}}/cCode/{{stateCode}}/hash/{{hash['hash']}}/inbox/info" >{{hash['hash']}} </a></td>
<td> {{hash['malFamily']}} </td>
<td> {{hash['malScore']}} </td>
<td> {{hash['hits']}} </td>
</tr>
</tbody>
</table>
</div>
<div id="content">
<dir-pagination-controls pagination-id="hash"></dir-pagination-controls>
</div>
</div>
<button class="btn btn-warning delCartItem" onclick="delCartItem(3)">
Delete
</button>
<button class="btn btn-warning delCartItem" onclick="delCartItem(3)">
Delete
</button>
...so on
I'm making the button which can delete the shopping cart item.
And the parameter of delCartItem() is product id.
How to get the index of button when I click one of the button in delCartItem() function?
Supplement:
This is my purpose:
When I click the button => get the index of button
=> use $('.item_price').eq(idx).text() get the price of shopping cart item
<thead>
<tr>
<th>
<h3><strong> 項目 </strong></h3></th>
<th>
<h3><strong> 商品編號 </strong></h3></th>
<th>
<h3><strong> 商品名稱 </strong></h3></th>
<th>
<h3><strong> 存貨量 </strong></h3></th>
<th>
<h3><strong> 原價 </strong></h3></th>
<th>
<h3><strong> 數量 </strong></h3></th>
<th>
<h3><strong> 小計 </strong></h3></th>
<th>
<h3><strong> 操作 </strong></h3></th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>用mBlock玩Arduino - Starting from Scratch</td>
<td>0</td>
<td class="item_price">300</td>
<td>
<select name="cnt_item[]" class="selectpicker cnt_item" data-width="fit" data-style="btn-default" data-live-search="true"></select>
</td>
<td class="item_total_price">300</td>
<td>
<button class="btn btn-warning delCartItem" id='item1' onclick="delCartItem(this.id, 2)"> <i class="fa fa-times-circle"></i> 刪除 </button>
</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>深入淺出程式設計</td>
<td>9</td>
<td class="item_price">578</td>
<td>
<select name="cnt_item[]" class="selectpicker cnt_item" data-width="fit" data-style="btn-default" data-live-search="true"></select>
</td>
<td class="item_total_price">578</td>
<td>
<button class="btn btn-warning delCartItem" id='item0' onclick="delCartItem(this.id, 1)"> <i class="fa fa-times-circle"></i> 刪除 </button>
</td>
</tr>
</tbody>
[edited]
This should work.
$(".delCartItem").on("click", function(){
var $tr = $(this).closest("tr");
var price = $tr.find(".item_price").text();
var id = $(this).attr('id');
var index = $("tr", $tr.closest("table")).index($tr)
alert("clicked btn in rom: "+ index);
//delCartItem(index);
});
function delCartItem(i){
//alert("deleting item "+i);
return;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>
<h3><strong> 項目 </strong></h3></th>
<th>
<h3><strong> 商品編號 </strong></h3></th>
<th>
<h3><strong> 商品名稱 </strong></h3></th>
<th>
<h3><strong> 存貨量 </strong></h3></th>
<th>
<h3><strong> 原價 </strong></h3></th>
<th>
<h3><strong> 數量 </strong></h3></th>
<th>
<h3><strong> 小計 </strong></h3></th>
<th>
<h3><strong> 操作 </strong></h3></th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>用mBlock玩Arduino - Starting from Scratch</td>
<td>0</td>
<td class="item_price">300</td>
<td>
<select name="cnt_item[]" class="selectpicker cnt_item" data-width="fit" data-style="btn-default" data-live-search="true"></select>
</td>
<td class="item_total_price">300</td>
<td>
<button class="btn btn-warning delCartItem" id='item1' onclick="delCartItem(this.id, 2)"> <i class="fa fa-times-circle"></i> 刪除 </button>
</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>深入淺出程式設計</td>
<td>9</td>
<td class="item_price">578</td>
<td>
<select name="cnt_item[]" class="selectpicker cnt_item" data-width="fit" data-style="btn-default" data-live-search="true"></select>
</td>
<td class="item_total_price">578</td>
<td>
<button class="btn btn-warning delCartItem" id='item0' onclick="delCartItem(this.id, 1)"> <i class="fa fa-times-circle"></i> 刪除 </button>
</td>
</tr>
</tbody>
</table>
I suggest the use of a data-* attribute on your button elements to reference the item ids and to create the click handlers programmatically to ease the retrieval of the indexes of the buttons.
$("#the-table .btn").each(function(index, button){
$(button).on("click", function(){
var itemId = $(button).data("item-id");
console.log("button index:", index);
console.log("item id:", itemId);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="the-table">
<tbody>
<td class="item_price">578</td>
<td>
<button class="btn btn-warning delCartItem" data-item-id="1"> Delete </button>
</td>
</tbody>
<tbody>
<td class="item_price">608</td>
<td>
<button class="btn btn-warning delCartItem" data-item-id="2"> Delete </button>
</td>
</tbody>
</table>