I have a table like this:
<table class="table" id = "posts_table">
<caption><h2>cars</h2></caption>
<tr class="success">
<th style="text-align:center"> post_id
<th style="text-align:center"> autor
<th style="text-align:center"> title
</tr>
<?php
$cursor = $MySQLdb->prepare("SELECT * FROM posts WHERE topic_id=:topic_id");
$cursor->execute( array(":topic_id"=>"1") ); //לשנות
foreach ($cursor->fetchAll() as $obj): ?>
<tr>
<td style="text-align:center"><? echo $obj['post_id'] ?></td>
<td style="text-align:center"><? echo $obj['full_name']?></td>
<td style="text-align:center"><? echo $obj['post_title']?></td>
</tr>
<? endforeach; ?>
</table
I want to create function that when u click on the title im getting the post_id for this raw. What should I do to make it happen?
So i try to do this code and it works:
<table class="table" id = "posts_table">
<caption><h2>cars</h2></caption>
<tr class="success">
<th style="text-align:center"> post_id </th>
<th style="text-align:center"> autor </th>
<th style="text-align:center"> title </th>
</tr>
<?php
$cursor = $MySQLdb->prepare("SELECT * FROM posts WHERE topic_id=:topic_id");
$cursor->execute( array(":topic_id"=>"1") ); //לשנות
foreach ($cursor->fetchAll() as $obj): ?>
<tr>
<td class="post_id_c" style="text-align:center"><? echo $obj['post_id'] ?></td>
<td style="text-align:center"><? echo $obj['full_name']?></td>
<td style="text-align:center"><a class="click_title"><? echo $obj['post_title']?></a></td>
</tr>
<? endforeach; ?>
</table>
<script>
$(".click_title").click(function() {
var $item = $(this).closest("tr") // Finds the closest row <tr>
.find(".post_id_c") // Gets a descendent with class="nr"
.text();
console.log($item);
});
</script>
Related
I have a table that is connected to my DB.
I have 4 columns : Date, Time, Windspeed and Wind direction
Since my table gets a new row on average every 10 second or so I wondered if it was possible to dynamically refresh it without refreshing the whole page using AJAX.
I looked examples and tried to adjust it to my case but it just doesn't seems to work
My table looks like this
<table id="table" align="center" border="1px" style="width:600px; line-height:30px">
<tr>
<th colspan="4"><h2> Résultat : <?php echo htmlentities($nom) ?> </h2> </th>
</tr>
<t>
<th> Date </th>
<th> Heure </th>
<th> Vélocité (km/h) </th>
<th> Direction du vent </th>
</t>
<?php
while($rows=mysqli_fetch_assoc($result))
{
?>
<tr>
<td align="center"><?php echo $rows['Date'] ?></td>
<td align="center"><?php echo $rows['Heure'] ?></td>
<td align="center"><?php echo $rows['Velocite'] ?></td>
<td align="center"><?php echo $rows['Direction_vent'] ?></td>
</tr>
<?php
}
?>
</table>
I tried this kind of refresh :
<script>
$(document).ready(function() {
function RefreshTable() {
$( "#table" ).load( "valeurs.php #table" );
}
$("#refresh-btn").on("click", RefreshTable);
});
</script>
I have a table with multiple columns (index.php). One column is a checkbox. Whenever the checkbox is checked, it displays another column where you can select a quantity.
I want to be able to hit a button called "Add to Order" and have it use AJAX to add any selected rows to the index-order.php page. After all selections have been made, I want to be able to click the "Checkout" button and have it take me to the index-order.php page where it should be displaying all of the added selections in a table.
I know how to navigate to the index-order.php page so my main question is how can I add the selected rows to the index-order.php page by using ajax when pressing the button?
Index.php code:
<form name="form1" action="index-order.php">
<section id="checkout-btn">
<button type="submit" id="checkout" name="order">Checkout</button>
</section>
</form>
<form name="form2" method="POST" action="index-order.php">
<section id="addToOrder">
<button type="submit" class="order" id="order" name="order" value="AddToOrder">Add to Order</button>
</section>
<br>
<table id="merchTable" cellspacing="5" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($query) as $row) {?>
<tr>
<td class="ui-widget-content"><input type="checkbox" class="check" name="check"></td>
<td name="rows[0][0][loc]" class="loc ui-widget-content" id="loc-<?php echo intval ($row['Loc'])?>"><?php echo $row['Loc'];?></td>
<td name="rows[0][0][rp-code]" class="rp-code ui-widget-content" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
<td name="rows[0][0][sku]" class="sku ui-widget-content" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
<td name="rows[0][0][special-id]" class="special-id ui-widget-content" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
<td name="rows[0][0][description]" class="description ui-widget-content" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
<td name="rows[0][0][quantity]" class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
<td name="rows[0][0][unit]" class="unit ui-widget-content" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
<td name="rows[0][0][quant]" style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" name="value" id="test"></td>
</tr>
<?php } ?>
</tbody>
</table>
</form>
<div id="log"></div>
Index-order.php:
<?php if(isset($_POST['rows'])): ?>
<table cellspacing="20">
<tr align="center">
<th>Loc</th>
<th>Report Code</th>
<th>SKU</th>
<th>Special ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit</th>
<th>Quantity #</th>
</tr>
<?php
foreach($_POST['rows'][0] as $row):
?>
<tr align="center">
<td><?php echo $row['loc']; ?></td>
<td><?php echo $row['rp-code']; ?></td>
<td><?php echo $row['sku']; ?></td>
<td><?php echo $row['special-id']; ?></td>
<td><?php echo $row['description']; ?></td>
<td><?php echo $row['quantity']; ?></td>
<td><?php echo $row['unit']; ?></td>
<td><?php echo $row['quant']; ?></td>
</tr>
<?php
endforeach;
?>
</table>
<?php endif; ?>
JavaScript:
$(function () {
$("#order").click(function() {
//reset the logger
$('#log').empty();
$('#merchTable input:checkbox:checked').each(function() {
//for each checked checkbox, iterate through its parent's siblings
var array = $(this).parent().siblings().map(function() {
return $(this).text().trim();
}).get();
console.log(array);
//to print the value of array
$('#log').append(JSON.stringify(array))
var request = $.ajax({
type: 'post',
url: 'index-order.php',
data: array,
success: function(){
alert('success');
},
error: function(){
alert('failure');
}
});
})
});
});
To pass data from one page to another using php you will have to use a session.
So in your ajax call just save your data into the session like so:
add-to-cart.php
session_start();
if (!isset($_SESSION['shopping_cart'])) {
$_SESSION['shopping_cart'] = [];
} else {
$_SESSION['shopping_cart'][] = [
'id' => $_POST['item_id'],
'amount' => $_POST['amount']
];
}
If you then click your checkout button and navigate via a page reload to your index-order.php, you could then access the data via the same session index.
session_start();
if (isset($_SESSION['shopping_cart'])) {
// display your data
} else {
echo "Your shopping cart is empty.";
}
I have one html table which consists of a button on each row. When I click on that button I want to get the index of the row. With my code I am getting the index value but it starts with 1 instead of 0. In other examples I saw that row index is starting from value "0", but in my case it starts with "1". Can anybody help me where I did mistake.
Here is my table.
<div class="table-style table-municipality table-edit-community-view">
<table id="sum_table">
<tr class="titlerow">
<th>S.N.</th>
<th>Community</th>
<th>Address</th>
<th>Area</th>
<th>Estimated</th>
<th>Total</th>
<th>Action</th>
</tr>
<?
$sn = 1;
while($result= mysql_fetch_row($res))
{
?>
<tr id="<?php echo $result[0];?>">
<td align="center"><? echo $sn++; ?></td>
<td align="center"><? echo $result[1] ?></td>
<td align="center"><? echo $result[2] ?></td>
<td align="center" class="rowDataSd"><? echo $result[3] ?></td>
<td align="center" class="rowDataSd"><? echo $result[4] ?></td>
<td align="center" class="rowDataSd"><? echo $result[5] ?></td>
<td>
<button class="test">Test</button>
</td>
</tr>
<?
}
?>
</table>
</div>
script:
$(".test").click(function(){
console.log("name: ", $(this).closest('td').parent()[0].sectionRowIndex);
});
You are getting index starting by 1 because you have one tr element in start of table for headers. You can -1 from returned index to get index starting with 0.
$(".test").click(function(){
console.log("name: ", $(this).closest('tr').index()-1);
});
Or find the current rows index in collection of desired rows excluding headers row:
$(".test").click(function(){
console.log("name: ", $('#sum_table tr:not(.titlerow)').index($(this).closest('tr')));
});
The index function tells you that.
$(".test").click(function(){
console.log("name: ", $(this).closest('td').parent().index());
});
Also note that you can probably just use .closest('tr') rather than .closest('td').parent().
$(".test").click(function(){
console.log("name: ", $(this).closest('tr').index());
});
Note, though, that your title row is in the same parent as your data rows, and so will occup the index = 0 position. If you want to avoid that, put it in its own thead with the data rows in a tbody:
<div class="table-style table-municipality table-edit-community-view">
<table id="sum_table">
<thead><!-- *** Note -->
<tr class="titlerow">
<th>S.N.</th>
<th>Community</th>
<th>Address</th>
<th>Area</th>
<th>Estimated</th>
<th>Total</th>
<th>Action</th>
</tr>
</thead><!-- *** Note -->
<tbody><!-- *** Note -->
<?
$sn = 1;
while($result= mysql_fetch_row($res))
{
?>
<tr id="<?php echo $result[0];?>">
<td align="center"><? echo $sn++; ?></td>
<td align="center"><? echo $result[1] ?></td>
<td align="center"><? echo $result[2] ?></td>
<td align="center" class="rowDataSd"><? echo $result[3] ?></td>
<td align="center" class="rowDataSd"><? echo $result[4] ?></td>
<td align="center" class="rowDataSd"><? echo $result[5] ?></td>
<td>
<button class="test">Test</button>
</td>
</tr>
<?
}
?>
</tbody><!-- *** Note -->
</table>
</div>
It's generally best practice to use thead and tbody anyway.
$(".test").click(function() {
console.log("name: ", $(this).closest('tbody tr').index());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-style table-municipality table-edit-community-view">
<table id="sum_table">
<thead>
<tr class="titlerow">
<th>S.N.</th>
<th>Community</th>
<th>Address</th>
<th>Area</th>
<th>Estimated</th>
<th>Total</th>
<th>Action</th>
</tr>
</thead>
<tr>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">1</td>
<td align="center" class="rowDataSd">1</td>
<td align="center" class="rowDataSd">1</td>
<td align="center" class="rowDataSd">1</td>
<td>
<button class="test">Test</button>
</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">2</td>
<td align="center">2</td>
<td align="center" class="rowDataSd">2</td>
<td align="center" class="rowDataSd">2</td>
<td align="center" class="rowDataSd">2</td>
<td>
<button class="test">Test</button>
</td>
</tr>
</table>
</div>
Use tr with index()
I have a file where php dynamically generates a bunch of tables and each of these tables also has a dynamically generated number of rows.
<?php foreach($trees as $tree): ?>
<div class="tree">
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<?php foreach($tree as $fruit => $fruitPrice) ?>
<tr>
<td><?php echo $fruit; ?></td>
<td><?php echo $fruitPrice; ?></td>
</tr>
<?php endforeach; ?>
<tr>
<td>Total:</td>
<td class="totalPrice"></td>
</tr>
</tbody>
<table>
</div>
<?php endforeach; ?>
A resulting table would look something like this (but there would be close to 100 of those tables):
<div class="tree">
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$1.99</td>
</tr>
<tr>
<td>Banana</td>
<td>$1.29</td>
</tr>
<tr>
<td>Peach</td>
<td>$2.25</td>
</tr>
<tr>
<td>Total:</td>
<td class="totalPrice"></td>
</tr>
</tbody>
<table>
</div>
How would I access the <td>s using jQuery to sum total of the values and display the total price in .totalPrice?
The table being dynamic irritates me here.
I tried to write a loop within a loop, but couldn't get it to access the correct fields.
This should do it:
<?php foreach($trees as $tree): ?>
<div class="tree">
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<?php foreach($tree as $fruit => $fruitPrice) ?>
<tr>
<td><?php echo $fruit; ?></td>
<td id="fruitPrice"><?php echo $fruitPrice; ?></td>
</tr>
<?php endforeach; ?>
<tr>
<td>Total:</td>
<td class="totalPrice"></td>
</tr>
</tbody>
<table>
</div>
<?php endforeach; ?>
<script>
var totalPrice = null;
$("#fruitPrice").each(function()
{
totalPrice += $(this).text();
$(".totalPrice").text(totalPrice);
});
</script>
$("table").each(function () {
var totalSum = 0;
//find all tr in current table
var $dataRow = $(this).find('tbody tr');
$dataRow.each(function () {
$(this).find('td:nth-child(2)').each(function (i) {
// remove currency symbol
totalSum += parseFloat($(this).text().replace("$", ""));
});
});
var totalFixedValue = parseFloat(totalSum).toFixed(2);
//find totalPrice td and update with result
$(this).find(".totalPrice").html(totalFixedValue);
});
Give your price a class attribute to make easy the retrieve of values :
<tr>
<td><?php echo $fruit; ?></td>
<td class="price"><?php echo $fruitPrice; ?></td>
</tr>
Then get the value of price of every table :
$('table').each(function(){
var total = 0;
$('.price',this).each(function(){
total += parseFloat($(this).text().replace('$',''));
})
$('.totalPrice',this).text('$'+total);
})
Hope this helps.
$('table').each(function(){
var total = 0;
$('.price',this).each(function(){
total += parseFloat($(this).text().replace('$',''));
})
$('.totalPrice',this).text('$'+total);
})
table,table td{
border: 1px solid;
}
.totalPrice{
color: #FFF;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tree">
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td class='price'>$1.99</td>
</tr>
<tr>
<td>Banana</td>
<td class='price'>$1.29</td>
</tr>
<tr>
<td>Peach</td>
<td class='price'>$2.25</td>
</tr>
<tr>
<td>Total:</td>
<td class="totalPrice"></td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peach</td>
<td class='price'>$1</td>
</tr>
<tr>
<td>Banana</td>
<td class='price'>$3.9</td>
</tr>
<tr>
<td>Total:</td>
<td class="totalPrice"></td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Banana</td>
<td class='price'>$1.96</td>
</tr>
<tr>
<td>Apple</td>
<td class='price'>$6.25</td>
</tr>
<tr>
<td>Total:</td>
<td class="totalPrice"></td>
</tr>
</tbody>
</table>
</div>
I have the list of products ,using below code
<table id="product">
<thead>
<tr>
<th style="width:30%;">Item Name</th>
<th style="width:11%;">Price</th>
<th style="width:11%;">Qty</th>
</tr>
</thead>
<tbody id="cart_contents">
<?php $i=1;
foreach($cart as $line=>$item)
{
?>
<tr>
<td style="align:center;"><?php echo $item['name']; ?></td>
<td><input type="text" id="price_<?php echo $i;?>" value="<?php echo $item['price']; ?>" name="price"></td>
<td id="qnty"><input type="text" id="quantity_<?php echo $i;?>" value="<?php echo $item['quantity']; ?>" name="quantity"></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
I need to edit quantity and price fields of last added product.
<table width="297px" style="float:left" class="CSSTableGenerator">
<tr>
<td onclick="click_quantity();">Qty</td>
<td onclick="click_price();"> <a href="javascript:void(0);" >Price</a></td>
</tr>
</table>
function click_quantity(){
$("#table register").find("td qnty").each(function(){
var id = $(this).attr("id");
alert(id);
})
}
How to get the last quantity field's id, after clicking the Qty link?
I have tried some codes, but I am unable to get last element's id.
EX : id names are quantity_1, quantity_2, quantity_3, quantity_4.
How to get quantity_4 (last elment's id)?
HTML
<table id="product">
<thead>
<tr>
<th style="width:30%;">Item Name</th>
<th style="width:11%;">Price</th>
<th style="width:11%;">Qty</th>
</tr>
</thead>
<tbody id="cart_contents">
<?php $i=1;
foreach($cart as $line=>$item)
{
?>
<tr>
<td style="align:center;"><?php echo $item['name']; ?></td>
<td>
<input type="text" id="price_<?php echo $i;?>" value="<?php echo $item['price']; ?>" name="price"/>
</td>
<td class="qnty">
<input class="qnty_input" type="text" id="quantity_<?php echo $i;?>" value="<?php echo $item['quantity']; ?>" name="quantity"/>
</td>
</tr>
<?php
$i++;
} ?>
</tbody>
</table>
JS Code
function click_quantity(){
var id = $("#cart_contents tr:last-child .qnty_input").attr("id");
// rest of your logic
}
1) you are using same ID in loop, that is not valid;
2) I think your js is wrong, use : $("#register").find("#qnty"), but has to be find('.qnty')
Try this one.
var last_id = $( 'table tbody tr td:last-child').attr( 'id' );
To get the last row(td) in table you can use this,
$('table tbody tr td:last-child')
In order to get last child element you can make use of Try to use last property of jquery
$("#cart_contents td:last").find('input[type=text]').attr('id');
$("#cart_contents td:last")
using this you'll find last column in each row so you have to use
$("#cart_contents tr:last-child td.qnty")