Hi I have looped and echoed out this result
echo '<tr><td id="'.$row['productID'].'"><img height="150px" width="130px"
src="products/'.$row['image_url'].'"></td><td>'.$row['name'].'</td>
<td>'.$row['price'].'</td></tr>';
The above resulted in a table full of data, now How do i remove a specific row, I want to remove it not delete from the table, as in a shopping cart where you remove the item but not delete it from the table. How would you use javascript or any other in this case?
Thank you very much.
Make a extra field in table.
Default value for the active Row is 1....
deactive row is value is 0
When retrieve the data form table used the where function for the Active rows
Please you don't need JQuery for something simple like this..
document.getElementById('id_off_product').style.display = 'none';
You don't need jQuery to do this, although you can use it if you want.
If you want to hide the product:
document.getElementById('product_id').style.display = 'none';
With jQuery:
$('#product_id').hide();
If you want to show it again:
document.getElementById('product_id').style.display = '';
With jQuery:
$('#product_id').show();
If you want to completely remove the product:
document.getElementById('product_id').remove();
With jQuery:
$('#product_id').remove();
Also, you should probably put the id on the actual table row (tr) instead of on the table cell (td).
skimberk1's answer is most comprehensive. Here is an example that would allow a button on the row that would remove the row (parent/tr).
<table id="test">
<tr>
<td>one</td><td>two</td><td id="test" onclick="removerow(this);">remove</td>
</tr>
</table>
function removerow(e) {
e.parentNode.remove();
}
http://jsfiddle.net/FqbHW/19/embedded/result/
If completely removing is not desirable, then hiding or otherwise indicating it's inactive is possible... I would in that case also point you to Taveer's answer. You would need to track which rows are active/inactive. If you need additional details on this please comment.
Give it a id and using jQuery do as
$('yourid').hide(); // to hide
$('yourid').show(); // to show
if u use jquery, u have to know the id of product to remove
$('td#productId').parent().hide();
Related
Overview:
I am creating a dynamic web invoicing system,
Most of the page are textareas and I have used tables to nest as they will post data into seperate tables after the form is submitted. When the "Nested" Add a Row is selected, it should add a row inside with form field that has details on which row and which position so it can be gathered in a for loop when it is posted.
Image:
Problem:
Adding a row in the circled area does not add it in the last row, It add's it as it is in the image. Additionally it only works on the first item, the second add a row does not even register a click.
I am unsure how to get the variables to create the form name[][] in this particular index size and the parents index number (located in javascript line 2-3)
Relevent Code:
Javascript
$("#additemrow").click(function(){
var currentListItem = $(this).length;
var currentJobItem = $(this).parents('#items').index('#items');
currentListItem++;
$("#listitem:last").after(/*Blank Form Row*/);
bind();
})
PHP
<table id="items">
<tr class="item-row"><td>/*form elements*/</td></tr>
<tr class="list-row">
<td colspan=5>
<table class="itemlist">
<?php
$itemCount = 0;
foreach($jobListItem as $items) {
foreach($items as $item) {
if($problem['item_id'] == $item['item_id']) {
?>
<tr id="listitem">
<td class="list-item">
<div class="delete-wpr">
<textarea class="item" name="item[/*A PARENT ITEM NUMBER*/][<?php echo $itemCount;?>][item]"></textarea>
<a class="deleteitem" href="javascript:;" title="Remove row">X</a>
</div>
</td>
</tr>
<?php
}
$itemCount++;
}
}
?>
<tr>
<td colspan="5"><a id="additemrow" href="javascript:;" title="Add a row">Add a row</a></td>
</tr>
</table>
//NEXT ITEMLIST GOES HERE
</table>
EDIT: Foreach Loop is just used to get variables from a array.
Please let me know if you need more details or bits of code as im not sure if I have given enough information.
Regarding the problem where your row gets insertet at the top:
Like Bertrand Lefort already said: in JQuery you can append nodes to the end of another (parent) node by calling parent_node.append(child_node) (more information here)
You can also add elements before/after another element by calling another_element.before(element) / another_element.after(element) or (be aware of reversed syntax!) element.insertBefore(another_element) / element.insertAfter(another_element)
Regarding the problem where only the first "add a row" registers a click:
You're selecting by id. Id's are (or should be) unique, so when you call $("#additemrow").click(function(){ ... }) the onClick-function will only be attached to the first element that matches the given id (as far as I remember).
If you want to attach the same onClick-function to multiple elements use class instead. However, if you do so, you got to make sure you insert the new element relative to the clicked element (eg. by using .parent(), .siblings() or similar functions).
Regarding your problem #2, I don't really know what you're trying to do, but this is what I noticed:
currentListItem and currentJobItem seem to be unused in their scope, since you are declaring them as local variables but not using them
.parents('#items').index('#items') is redundant because .parents('#items') already selects only the parent elements that match '#items'. If you want to get the index of the matched element, use index() (without parameters, see jquery API for more)
Some other notes:
If you have the time (and the need of a clean project) I recommend using template engines like Smarty to separate your logic from the output. This improves the readability of your code and also makes it easier to find/eliminate bugs.
I hope this helped a little bit. If you provide more information on what you're trying to do and what doesn't work as you expext, I will try to provide further help and update my answer.
You could add an id to the parent html element, then in your click handler:
$("#additemrow").click(function(){
$("#parent").append(/*Blank Form Row*/);
})
A bit of a random exercise but I want to take content from an existing table and create a new table based on the entries taken.
In the image above, the table on the left is what I have to work with already. The blue table on the right is what I want to create; using the data from the table on the left.
Can this be done with jQuery or some basic PHP?
If you're wondering why I'm doing this its because I don't have access to the SQL database and I want to use Google Charts API to display total number of user registrations for each month.
As always, your help is MUCH appreciated.
Using JQuery it can be done in this way
//initialize monthArray
var monthArr = [{month:'April', occ:0}, {month:'May', occ:0},{month:'June', occ:0}];
//read occurrences for MonthNames in your existing table
$.each(monthArr, function(n,i){
var _occ = $("td:contains('"+monthArr[n].month+"')").size();
monthArr[n].occ = _occ;
});
// create new table and show the values
$.each(monthArr, function(index, value) {
//alert(value.occ+ ': ' + value.month);
$('#inTable').append('<tr><td>'+value.month+'</td><td>'+value.occ+'</td></tr>');
});
Here is fiddle: http://jsfiddle.net/A3WeJ/38/
Note: Table look and feel formatting has not been done in this solution
The question of whether or not you wish to use jQuery or PHP depends on whether the content of these tables is likely to change after the page has loaded. If the page will not change, you should use PHP.
Assuming the table is produced using a while or foreach loop, you can simply set up counts for each option that you have in the table. Within the loop, if you check what is in this column and add to an appropriate arbitrary count, you can count how many are in each.
It would probably be good to check what the contents is, and if it's already in your array.
Hope that provides some initial help to the thinking behind this question!
You may try this (You didn't provide more information, so just may be an idea)
HTML The id maintable could be changed with another id/class or just table
<table id="maintable">
<thead><th>Name</th><th>Join Month</th><th>Join Year</th></thead>
<tbody>
<tr><td>Joe Blogs</td><td>April</td><td>2012</td></tr>
<tr><td>Mr. X</td><td>April</td><td>2012</td></tr>
<tr><td>Andrew Xmen</td><td>April</td><td>2012</td></tr>
<tr><td>Matt Bblogs</td><td>may</td><td>2012</td></tr>
<tr><td>Malcom McGuiness</td><td>June</td><td>2012</td></tr>
<tr><td>Friday Needavodka</td><td>June</td><td>2012</td></tr>
</tbody>
</table>
<div id="myTblDiv"></div>
JS
$(function(){
var rows={};
$('table#maintable tbody tr').each(function(){
var item=$('td:eq(1)', $(this));
if(rows.hasOwnProperty(item.text()))
rows[item.text()]=parseInt(rows[item.text()])+1;
else rows[item.text()]=1;
});
var myTable=$('<table />', {'id':'myNewtable', 'class':'table table-striped'});
var th=$('<thead><th>Total</th><th>Month</th></thead>');
var tbody=$('<tbody></tbody>');
myTable.append(th).append(tbody);
$.each(rows, function(k, v){
var row=$('<tr><td>'+v+'</td><td>'+k+'</td></tr>');
myTable.find('tbody').append(row);
});
$('div#myTblDiv').append(myTable);
});
DEMO or Different Style.
Notice, I've used an id (maintable) for the table generated by google, in this case you have to change the id or class (if it has any) or even you can just use table without any id or class name but make sure there is only one table when you are using only $('table'), also if you can wrap the table within a parent div then you can use $('div#parentDivId table').
I am a beginner in php.
I want to know how a particular row in a php session array can be deleted(not from the database, but from the page only).
I have a table namely, issues having columns issue_id & issue_descrp.
The page is displayed with a table in which each row contains issue and its corresponding id. Each row contain a delete button too. What I want is to delete the corresponding row from the page when I click the button.
This is my php code:
<?php
foreach($_SESSION['meeting_issues'] as $meeting_issues)
{
$query="select issue_id,issue from issues where issue_id='$meeting_issues'";
$result=$_SESSION['connection']->query($query) or die (mysql_error());
while($row = $result->fetch_assoc())
{?>
<?php $issue_id=$row['issue_id']; ?>
<tr><td><?php echo $row['issue_id']; ?></td><td><?php echo $row['issue']; ?></td><td><input type="button" name="<?php echo $row['issue_id']; ?>" id="button" value="Remove"/></td>
</tr>
<?php
}
}
?>
Hope my question is clear. Please help me. Thanks in advance.
use unset to delete array elements such as those in $_SESSION
http://php.net/manual/en/function.unset.php
do not delete the whole session this way, use this instead
http://php.net/manual/en/function.session-unset.php
To remove a row on the page itself, you will need Javascript or jQuery. jQuery is advised because of all the possibilities it gives and it is easier to use than normal Javascript.
jQuery:
$("#button").parents("tr:closest").remove();
Javascript:
document.getElementById('button').parentNode.parentNode.parentNode.removeChild(document.getElementById('button').parentNode.parentNode);
As you can see, jQuery is alot faster and more easy to type.
You are using an ID for the buttons, but the ID is always the same. I recommend using classes for this, because an ID should be unique on a page.
jQuery website
I have a form and I'm using the jQuery Table AddRow plugin to dynamically add rows to a table, the problem is I'm trying to when you select a Menu Item that the menu item goes into the text box to the left of it. It works on the first row but I can't figure out how to get it to work with rows that are added via the plugin.
You can see my code in action here: http://jsfiddle.net/VXNzd/
Here is the jQuery code:
// This moves the select box text to the input box
$('#mnu_names').change(function() {
var mnuProduct = $("#mnu_names").find(':selected').text();
var mnuCleanProduct = mnuProduct.split(' - ');
$('#topping_name').attr('value', mnuCleanProduct[0]);
});
// This code is needed to add and delete rows with the plugin
$(".toppings_add").btnAddRow({
It may be easier to see what I'm talking about by visiting the jsfiddle link up top. When it loads use the select box to and select something, It will put that info over into the text box without the price info. Add a new row and try it again. Won't work, can't figure out how to make it work.
The problem was as said by tomhallam your ID's are not unique. Also $.change() does not work on blocks added after you ran that. You should instead use $.on('change',...).
I updated your code and posted it on http://jsfiddle.net/PDPbn/5/.
The modified jquery-code goes as follows:
$(document).on('change','.mnu_names',function() {
var mnuProduct = $(this).find(':selected').text();
var mnuCleanProduct = mnuProduct.split(' - ');
$(this).parentsUntil('tbody').find('.topping_name').attr('value', mnuCleanProduct[0]);
});
I write a web site with jquery and lot of ajax request to get data for table and ask data modifications with PHP/MySql on server side.
Currently, I use id attribute to store the id of the field of the table (which is an autoincrement int value).
And it works fine.
BUT I have recently learned that id should be unique (and start with a letter...).
AND I have different tables that could have the same id value (for different sql table)
Then I am not html (nor xhtml) compliant...
How could I correct my code ?
By using .data() function of jQuery ?
An hidden html element with the id as value (<span class="id">3</span>) ?
Other solution ?
Additional informations:
I have wrote a widget to manage my tables.
To add a new row, I do:
row = $('<div class="row" id="'+item.id+'"/>');
[...] // I add fields to my row
row.appendTo(tableData);// tableData is the html element where rows are
When a field element is changed, I trigger an event to the table that will ask the modification to the server with the right id:
$(e.target).closest(".row").attr("id")
If you are able to use jQuery 1.4.3 or greater look at using the html 5 data-* attributes. jQuery 1.4.3 will automatically use those data- attributes and place them in the .data() collection on the element.
Example:
<table>
<tr data-rowId="1">
</tr>
</table>
$("tr:first").data("rowId") would print 1
This method would also allow you to store json objects as well.
<table>
<tr data-row='{"Id" : 1, "Name": "Smith"}'>
</tr>
</table>
And than in your data()
var row = $("tr:first").data("row")
You can reference row.Id and row.Name
You can prefix your id with the table name :
<div id="mytable_1234"></div>
It's easy to extract the table name and the id from the field and this is HTML compliant.
var values = $(element).attr('id').split('_');
// values[0] is the table name and values[1] is the id.
You can use any other separator if you're already using underscores in your table names.
you can also use jQuery metadata .....
Its awesome to store data in html
Instead of using id use data-id and use the .data('id') (on that element) to retrieve it with jQuery.
I think... I understand your question - multiple data tables, all with autoincrement ids?
My solution would be pre-appending the ID with a letter (like you said) to differentiate it.
Example would be a dataset for 'cars' I would do:
<table>
<tr id="cars_1">
...
</tr>
<tr id="cars_2">
...
</tr>
<tr id="cars_3">
...
</tr>
</table>
Later if you have another table, bikes, you would do:
<table>
<tr id="bike_1">
...
</tr>
<tr id="bike_2">
...
</tr>
<tr id="bike_3">
...
</tr>
</table>
Your end result would be unique ID's while keeping the ID db value in mind, so you would do a simple check (if cars, then do this, etc), then to seperate the prefix (cars from the id 1, you would use something like the PHP expolode() fn).
Hope that clarifies it, and that I understood your question.