i am creating a shopping cart in php jquery , the cart has dropdown options for weight and quantity , i need a solution that change in these dropdowns should change the total price of the product... I did it but the code changes al the columns , i need to change only the price column. any solutions?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sum Total for Column in jQuery </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('table thead th').each(function(i) {
calculateColumn(i);
});
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function() {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text('Total: ' + total);
}
</script>
</head>
<body>
<table id="sum_table" width="300" border="1">
<thead>
<tr>
<th>Apple</th>
<th>Orange</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>Total:</td>
</tr>
</tfoot>
</table>
</body>
</html>
Total Product
you should modify your code, Use children in your script:
$(this).children('td:nth-child(8)').text(total);
nth-child(8) = 8 is td column value.
Try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sum Total for Column in jQuery </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var total = [];
$('table thead th').each(function(i) {
total.push(calculateColumn(i));
});
console.log(total);
var totalFruits = 0;
for (var i in total) {
totalFruits += total[i] ;
}
console.log(totalFruits);
$('#total').text('Total: ' + totalFruits);
});
function calculateColumn(index) {
var count = 0;
$('table tr').each(function() {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
count +=value;
}
});
return count;
}
</script>
</head>
<body>
<table id="sum_table" width="300" border="1">
<thead>
<tr>
<th>Apple</th>
<th>Orange</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" id="total">Total:</td>
</tr>
</tfoot>
</table>
</body>
</html>
Related
I'm using jquery-confirm, and I need to capture the name of the element which i clicked to edit.
jQuery and jQuery-confirm
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
</head>
PHP
<?php
$products = array(['name'=>'Balloon'],
['name'=>'Bike']);
?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php foreach($products as $prod) { ?>
<tr>
<td><?php echo $prod['name'] ?></td>
<td><a class="edit" href="#">Edit Product</a></td>
</tr>
<?php } ?>
</tbody>
</table>
SCRIPT
$('a.edit').confirm({
content: '<input type="text" value="$ Name of the product.">'
});
Obs: Where It's written "$ Name of the product", should appear the name of each product that I click.
You can use this.$target to get a tag which is clicked then using .closest('tr').find('td:eq(0)').text() get first td content.
Demo Code :
$('.edit').confirm({
content: function() {
//get closest tr and find get product name..
return '<input type="text" value="' + this.$target.closest('tr').find('td:eq(0)').text().trim() + '">'
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Abc
</td>
<td><a class="edit" href="#">Edit Product</a></td>
</tr>
<tr>
<td>
Abcd
</td>
<td><a class="edit" href="#">Edit Product</a></td>
</tr>
<tr>
<td>
Abce
</td>
<td><a class="edit" href="#">Edit Product</a></td>
</tr>
</tbody>
</table>
I have table:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<table class="table-bordered" width="100%">
<tr>
<th>Product</th>
<th>Service</th>
</tr>
<tr>
<td>Product 1</td>
<td>S11</td>
</tr>
<tr>
<td></td>
<td>S13</td>
</tr>
<tr>
<td></td>
<td>S14</td>
</tr>
<tr>
<td>Product 2</td>
<td>S11</td>
</tr>
<tr>
<td></td>
<td>S120</td>
</tr>
</table>
I need: where empty row with product (where product's name is empty) delete this row and move service to up product row and delete current service from up product. Example:
In this table we have product 1. I need remove S11 and paste: S13 and S14 in single row.
I need this table on result:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<table class="table-bordered" width="100%">
<tr>
<th>Product</th>
<th>Service</th>
</tr>
<tr>
<td>Product 1</td>
<td>S13, S14</td>
</tr>
<tr>
<td>Product 2</td>
<td>S120</td>
</tr>
</table>
I know how it can do with javascript:
let tr;
$('#test1234 tr').each(function () {
if($(this).find('td:nth-child(1)').text().length){
tr = $(this);
tr.find('td:nth-child(2)').text('')
}else{
let td = $(tr).find('td:nth-child(2)');
let comma = td.text() !== "" ? ", " : '';
td.text(td.text() + comma + $(this).find('td:nth-child(2)').text())
$(this).remove()
}
});
But I need do this with php. How I can do it?
I have this html page on my php variable: $html_body.
generally you can't remove it using php but i will give you suggestion that please use continue statement when your row is blank
for example
$html = "<tbody>";
foreach($data as $row){
if(empty($row['parameter'])){
continue;
}else{
$html .= "<tr> <td></td> </tr>";
}
}
$html .= "</tbody>";
My html table goes like below, In the footer of my table i want to add the "Total" and sum of all the values at the footer of particular "quarters"
"quarter1" "quarter2" "quarter3" "quarter4"
250000 115000
175000 600000 275000
300000 150000 750000
650000 450000
850000 290000 145000
my view code is like below
How to overcome my issue, please suggest me. Any helps are appreciated,
Thank you
<table class="table table-bordered" id="referListTable">
<thead>
<tr>
<th>SI.No</th>
<th>Jan-Mar</th>
<th>Apr-Jun</th>
<th>Jul-Sep</th>
<th>Oct-Dec</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
foreach($dashboardDetails as $llist){
?>
<tr>
<td><?php echo $i; ?></td>
<td align="right">$llist['previous']; ?></td>
<td align="right">$llist['quarter1'];?></td>
<td align="right">$llist['quarter2'];?></td>
<td align="right">$llist['quarter3'];?></td>
<td align="right">$llist['quarter4'];?></td>
</tr>
<?php
$i++;
}
?>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td id="total" ></td>
<td id="total" ></td>
<td id="total" ></td>
<td id="total" ></td>
<td id="total" ></td>
</tr>
</tfoot>
</table>
Try something like this
var sums = []
$("table tbody tr").each(function() {
$(this).find("td").each(function(i, x) {
if ($(x).html().length) {
var tdValue = parseInt($(x).html());
tdValue = (tdValue + parseInt(sums[i] == undefined ? 0 : sums[i]))
sums[i] = tdValue
}
})
})
$.each(sums,function(i,x) {
$("tfoot tr").append("<td>"+x+"</td>")
})
Note this is created before we had your html code in the question, but it should be able to give you an idea how to make it work with your own html code
var sums = []
$("table tbody tr").each(function() {
$(this).find("td").each(function(i, x) {
if ($(x).html().length) {
var tdValue = parseInt($(x).html());
tdValue = (tdValue + parseInt(sums[i] == undefined ? 0 : sums[i]))
sums[i] = tdValue
}
})
})
$.each(sums,function(i,x) {
$("tfoot tr").append("<td>"+x+"</td>")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>quarter1</td>
<td>quarter2</td>
<td>quarter3</td>
<td>quarter4</td>
</tr>
</thead>
<tbody>
<tr>
<td>250000</td>
<td>115000</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>175000</td>
<td>600000</td>
<td>275000</td>
</tr>
<tr>
<td>300000</td>
<td>150000</td>
<td>750000</td>
<td></td>
</tr>
<tr>
<td>650000</td>
<td></td>
<td></td>
<td>450000</td>
</tr>
<tr>
<td>850000</td>
<td>290000</td>
<td>145000</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>
My table is Like:
<table class="tl">
<tbody>
<tr class="tlr">
<td>abcd</td>
<td class="tli"><img src="img src here" alt="English" class="icon"></td>
<td>I WANT THIS TEXT</td>
<td class="sn">12</td>
<td class="ln">44</td>
<td><div class="r0"></div></td>
</tr>
</tbody>
</table>
I am trying to access plaintext of 3rd <td> (<td>I WANT THIS TEXT</td>).
I am very confused that how to get this.
Please help me
var text = $('.tlr td:nth-child(3)').text();
alert(text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tl">
<tbody>
<tr class="tlr">
<td>abcd</td>
<td class="tli"><img src="img src here" alt="English" class="icon"></td>
<td>I WANT THIS TEXT</td>
<td class="sn">12</td>
<td class="ln">44</td>
<td><div class="r0"></div></td>
</tr>
</tbody>
</table>
Following code for get all td datas from clicking any row.
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 2; i < 3; i++) {
data.push(cells[i].innerHTML);
}
}
};
Jeet, you need to use Jquery Selectors... Take a look at the following code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ready demo</title>
<style>
p {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( document ).ready(function() {
alert($( "table tbody tr td:nth-child(3)" ).text());
});
</script>
</head>
<body>
<table class="tl">
<tbody>
<tr class="tlr">
<td>abcd</td>
<td class="tli"><img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" alt="English" class="icon"></td>
<td>I WANT THIS TEXT</td>
<td class="sn">12</td>
<td class="ln">44</td>
<td><div class="r0"></div></td>
</tr>
</tbody>
</table>
</body>
</html>
Hope this helps...
Im looking for a way to flatten table while copying from Excel to web page. Biggest problem is that in my table I have multiple headers. I'm using this code for copy paste to transform my table as HTML table but I'm stuck on how to proceed.
Main idea is that I have lot of older information which need to be imported to database and for this still even copy paste version as the code below is workable for the moment if just get the data in right format. Also solution as in here: http://jsfiddle.net/duwood/sTX7y/ could be workable.
Current output:
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td>34B</td>
<td>36B</td>
<td>38B</td>
<td></td>
<td></td>
</tr>
<tr>
<td>50-506</td>
<td>xxx</td>
<td>BLANCO</td>
<td>2475</td>
<td>2835</td>
<td>3190</td>
<td>PCS</td>
<td>$1.41</td>
</tr>
<tr>
<td>50-506</td>
<td>xxx</td>
<td>NEGRO</td>
<td>1750</td>
<td>2000</td>
<td>2250</td>
<td>PCS</td>
<td>$1.41</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>34B</td>
<td>36B</td>
<td>38B</td>
<td></td>
<td></td>
</tr>
<tr>
<td>50-530</td>
<td>yyy</td>
<td>BLANCO</td>
<td>195</td>
<td>390</td>
<td>515</td>
<td>PCS</td>
<td>$2.26</td>
</tr>
<tr>
<td>50-530</td>
<td>yyy</td>
<td>BEIGE</td>
<td>95</td>
<td>195</td>
<td>260</td>
<td>PCS</td>
<td>$2.26</td>
</tr>
</tbody>
</table>
Desired output:
<table>
<tr>
<td>50-506</td><td>xxx</td><td>BLANCO</td><td>34B</td><td>2475</td><td>pcs</td><td>$1.41</td></tr>
<tr>
<td>50-506</td><td>xxx</td><td>BLANCO</td><td>36B</td><td>2475</td><td>pcs</td><td>$1.41</td></tr>
<tr>
<td>50-506</td><td>xxx</td><td>BLANCO</td><td>38B</td><td>2835</td><td>pcs</td><td>$1.41</td></tr>
<tr>
<td>etc</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
Current code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('textarea[name=excel_data]').keyup(function() {
var data = $(this).val();
var rows = data.split("\n");
var table = $('<table />');
for(var y in rows) {
var cells = rows[y].split("\t");
var row = $('<tr />');
for(var x in cells) {
row.append('<td>'+cells[x]+'</td>');
}
table.append(row);
}
$('#excel_table').html(table);
});
});
</script>
</head>
<body>
<textarea name="excel_data" /></textarea>
<div id="excel_table"></div>
</body>
</html>