Need to delete row if checkbox is checked - javascript

I've got a jQuery/AJAX solution set up to update and delete items that are displayed in a table. The AJAX part works fine but once an item is deleted I need to be able to remove it from view and I can't figure out how to identify the selected item(s) based on their value after the submit button is clicked.
Here's my jQuery:
$('#button').click(function(event){
var order = $("#sortable tbody").sortable("serialize");
order += "&" + $("form[name=favorites]").serialize().replace(/%5B%5D/g, '[]');
order += "&crudtype=update_favorites";
$('#savemessage').html('<p>Saving changes...</p>');
$.post("/crud",order,function(theResponse){
$('#savemessage').html(theResponse);
});
});
});
My HTML is generated from PHP so the quantities and IDs are variable but the format is as follows:
<tr class="odd" id="field_37">
<td class="handle">Item #1 Name</td>
<td><input type="checkbox" name="fid[]" id="fid" value="37" class="box check-child"></td>
</tr>
<tr class="even" id="field_29">
<td class="handle">Item #2 Name</td>
<td><input type="checkbox" name="fid[]" id="fid" value="29" class="box check-child"></td>
</tr>
So effectively what (I think) I need is to add to my .click function something like "foreach checked fid, remove the corresponding row ID" if that makes any sense.

A basic selector to get a checked checkbox is
'input[type="checkbox"]:checked'
or
'input:checkbox:checked'
Now you can either use has() or loop through and use closest to get the trs
$('input[type="checkbox"]:checked').closest("tr").remove();
or
$('tr:has(input[type="checkbox"]:checked)').remove();

You can do it like this: http://jsfiddle.net/dSANw/
When user clicks on checked box add class to the parent tr
$(".box").click(function() {
if($(this).is(':checked')) {
$(this).parents('tr').addClass('checkedtd');
} else {
$(this).parents('tr').removeClass('checkedtd');
}
});
When clicked on delete, get all tables tr's classed 'checkedtd' and delete
$("#delt").click(function() {
alert($('.checkedtd').length);
$('.checkedtd').remove();
});

Related

Accessing an individual column in a row which is selected by default with a radio button on page load

With the code below, I am trying to access a particular column "quantity" from a row in a table. What is happening is one of the rows is selected by default when page loads while the rest of the rows can be selected when user chooses. I created a click event handler to handle manual selection.
When accessing the column with a class name, it returns nothing. I need to assign this value to an input box in the same form. I would attach the image of the row
Table Markup:
<tr valign="top" class="row6">
<td>
{if $tpl_order_details[lineitems].quantity > 1}
{if $radio_flag == "false"}
<input type="radio" name="line_item" class="radio_class" id="line_item" value="{$tpl_order_details[lineitems].mSku}" checked onclick="handleClick(this);"/>
{assign var=radio_flag value='true'}
{else}
<input type="radio" name="line_item" class="radio_class" id="line_item" value="{$tpl_order_details[lineitems].mSku}" onclick="handleClick(this);" />
{/if}
{/if}
</td>
<td>
{$tpl_order_details[lineitems].sku}
</td>
<td>
</td>
<td>{$tpl_order_details[lineitems].item_description}</td>
<td class="quantity_class" >{$tpl_order_details[lineitems].quantity}</td>
<td>{$tpl_order_details[lineitems].item_status}</td>
Markup with the Input field outside the loop:
<table>
<tr>
<td><label for="new_quantity">Enter New Quantity</label></td>
<td><input type="number" id="split_quantity" name="split_quantity"
min="1" max="6"></td>
<td><button type="submit" value="Save"
name="submit_action">Submit</button></td>
<td><button type="submit" value="Cancel"
name="submit_action">Cancel</button></td>
</tr>
</table>
JavaScript:
// This is to handle the radio button selected by default on page load.
$( document ).ready(function() {
var firstRadioValue = 0;
firstRadioValue = $("input[name='line_item']:checked").val();
$('input[name="split_quantity"]').attr('max', firstRadioValue);
var quantity = $(".radio_class").parent().find(".quantity_class").val();
alert(quantity);
});
// This is to handle the radio button that user actually chooses.
var currentRadioValue = 0;
function handleClick(line_item) {
alert('New value: ' + line_item.value);
currentRadioValue = line_item.value;
$('input[name="split_quantity"]').attr('max', currentRadioValue);
}
You're not going far enough up the tree to find the class. You have:
var quantity = $(".radio_class").parent().find(".quantity_class").val();
which gets you to the parent <td> The element you're looking for is a sibling of this:
<td class="quantity_class" >...
What you want to do is go one element higher (the table row), then find the class you're looking for from there, so use closest(). Note that .quantity_class doesn't have a value so you have to get the text in the table cell:
var quantity = $(".radio_class").closest('tr').find(".quantity_class").text();
In addition, I do not see any markup with the max attribute or any markup with the name of split_quantity.
EDIT - based on a conversation with the user it was found that there needed to be a number of changes. First, the table holding split_quantity needed to be identified so it could be targeted in the grander markup:
<table id="split_quantity_id">
<tr>
<td><label for="new_quantity">Enter New Quantity</label></td>
<td><input type="number" id="split_quantity" name="split_quantity" min="1" max="6"></td>
<td><button type="submit" value="Save" name="submit_action">Submit</button></td>
<td><button type="submit" value="Cancel" name="submit_action">Cancel</button></td>
</tr>
</table>
Then we got rid of the onclick="handleClick(this) inline JavaScript in favor of letting jQuery handle the click event. Finally we refactored the functions:
$(function() {
var firstRadioValue = 0;
firstRadioValue = $("input[name='line_item']:checked").closest('tr').find('.quantity_class').text();
$('input[name="split_quantity"]').attr('max', firstRadioValue);
var quantity = $(".radio_class").closest('tr').find(".quantity_class").text();
console.log(quantity);
$('table').delegate('.line_item', 'click', function(){
currentRadioValue = $(this).closest('tr').find('.quantity_class').text();
console.log(currentRadioValue);
$('#split_quantity_id').find('[name="split_quantity"]').attr('max', currentRadioValue);
});
});
NOTE: It was also discovered that the OP is using Smarty 2 which is an older version of Smarty using an older version of jQuery, so .delegate() is used instead of on().

Delete table rows if table data does not contain a specific class

I got a question regarding removing table rows within a table. I got the following HTML:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td>disabled</td>
<td>disabled</td>
<td>Specifies that a drop-down list should be disabled</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
I need a mechanism that looks whether the first <td> does not contain the html5badge class and delete the parent: <tr>.
To do this I created the following jQuery code:
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
var classname = $('table tr td').not('.html5badge');
console.log(classname)
for (i = 0; i < classname.length; i++) {
$(classname[i].parentNode).remove();
}
});
});
This works but it does not exactly what I want. As you can see in my JSFIDDLE it will delete all the table rows. But what I want is the following desired output:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
The desired output is that the <tr> that contained the text: disabled is been removed! Based on the fact that the <td> within this <tr> does not contained the class: html5badge.
How can I achieve this?
You can use filter() to retrieve the tr elements which do not contain td.html5badge and remove them:
$(".onlyhtml5").click(function(e) {
e.preventDefault();
$('tr').filter(function() {
return $(this).find('td.html5badge').length == 0;
}).remove();
});
Updated fiddle
simply make it
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
$('table tr td').not('.html5badge').each( funtion(){
$( this ).parent().remove();
} );
});
});

Multiple JQuery effects from a single event

I'm new to JQuery but have some experience with HTML and CSS.
I'm trying to make a list of checkboxes on a form more interactive, I though I could put them inside a table, clicking anywhere inside each row would check the corresponding checkbox and change the row color so the user would know the selection had been made. For some of the rows I would need a toggle effect to reveal a new row where more information could be entered. I have had some success in doing these things on their own but cannot get them to work together. Please Help!
My toggle effect was simple enough
$(document).ready(function(){
$("#top1").click(function(){$("#bottom1").toggle();});
$("#top2").click(function(){$("#bottom2").toggle();});
});
For the click selection I used
$(document).ready(function() {
$('#row5 tr').click(function(event) {
$(this).toggleClass('selected');
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
});
Each click would add/remove the 'selected' class which I would use to change the row color. However I'm finding that the selected class only take effect if I use an anonymous function for the click event and adding the code for the extra row, breaks the function.
What am I missing, or am I doing this all wrong? Would love some guidance.
This is the HTML structure I am using
<table class="rowclick" id="rowclick5">
<tbody>
<tr>
<td class="cb"><input type="checkbox" value="yes" /></td>
<td>row 1</td>
</tr>
<tr>
<td class="cb" id="bottom2"><input type="checkbox" value="yes" /></td>
<td>row 2</td>
</tr>
<tr>
<td class="cb"><input type="checkbox" value="yes" /></td>
<td>row 3</td>
</tr>
</tbody>
</table>
Here is what I would do:
$(function() {
$(document).on('click', '#row5 tr', function (event) {
var newState = !$(this).is('.selected');
$(this)
.toggleClass('selected', newState)
.find(':checkbox').prop('checked', newState);
});
});
This uses event delegation (via $(document).on()) and prevents that the state of the checkbox (checked/not checked) and the state of the row (selected/not selected) ever become inconsistent.
Note that I would probably use tr.selectable instead of #row5 tr, as the latter is a bit too specific and therefore hinders re-usability.
You could simply check /uncheck it using:
$(document).ready(function() {
$('#row5 tr').click(function(event) {
$(this).toggleClass('selected');
if ($(event.target).is(':not(:checkbox)')) {
$(':checkbox', this).prop('checked', $(this).hasClass('selected'));
// if you want to trigger click handler bound to checkbox
// without making it bubbles, use:
/*$(':checkbox', this).triggerHandler('click');*/
}
});
});
-jsFiddle-

Having incremental order ids for tr in tables after deleting rows too

I have table with following format
<table>
<tr>
<td>
<input type="hidden" name="help[0].id" />
</td>
<td> <span class="tr-close">X</span>
</tr>
<tr>
<td>
<input type="hidden" name="help[1].id" />
</td>
<td> <span class="tr-close">X</span>
</tr>
<tr>
<td>
<input type="hidden" name="help[2].id" />
</td>
<td> <span class="tr-close">X</span>
</tr>
</table>
Now I have Add button which will add row to the end of table. On clicking X icon I am deleting the entire row. Suppose if I delete row with name help[1].id, Now if I again add the new row, it should have help[1].id..So, on each addition/deletion the name should have differenct incrementatal non repeating numbers like id's 0,1,2,3....
After deleting the row, you can loop through each hidden field to update the name attribute. You can use .each() for looping. use .attr() method to update the name attribute
$(".tr-close").click(function(){
$(this).parents("tr").remove();
$("input[type=hidden]").each(function(i){
$(this).attr("name","help["+i+"]");
});
});
Demo
I think you can use a "Heap" data structure to maintain the smallest number of your deleted index. Pick from the Heap when you add a new row.
RemoveRow ->
Insert index to Heap
AddRow ->
if Heap is empty:
Index = Rows.length
else:
Index = top of heap
remove top of heap
You can do it like this
//In order to have the dynamically created rows to have the
//delete function also you can use you on() like this
$('table').on('click', '.tr-close', function(){
$(this).parents('tr').remove();
});
// the #add refers to the add button you use
$('#add').click(function(){
var counter = 0;
$('table')
.append('<tr><td><input type="hidden" name=""/></td><td> <span class="tr-close">X</span></td></tr>');
$('tr').each(function(){
$(this).find('input').prop('name', 'help[' + counter + '].id');
counter++;
});
});

jQuery search through table rows, hidden and visible

I've got a table where i display message history. By default the table displays only the last message between two people. But all of the messages are in the HTML code, just that they are set with display:none;
Im trying to make the search go through both visible and hidden tr rows.
What i currently have:
HTML:
<table cellpadding="0" cellspacing="0" width="100%" class="tDefault mytasks" id="history">
<tr>
<td>Finish design</td>
<td align="center"><strong class="grey">0%</strong></td>
</tr>
<tr>
<td>Aquincum HTML code</td>
<td align="center"><strong class="green">89%</strong></td>
</tr>
<tr style="display:none;">
<td>Aquincum cpp code</td>
<td align="center"><strong class="green">99%</strong></td>
</tr>
<tr>
<td>Fix buggy css styles</td>
<td align="center"><strong class="red">16%</strong></td>
</tr>
</table>
jQuery:
$("#search").keyup(function() {
var value = this.value.toLowerCase().trim();
$("#history tr").each(function (index) {
if (!index) return;
$(this).find("td").each(function () {
var id = $(this).text().toLowerCase().trim();
var not_found = (id.indexOf(value) == -1);
$(this).closest('tr').toggle(!not_found);
return not_found;
});
});
});
I have two problems:
For some reason the first tr is always visible even through it does not match the search. Try to search for buggy css. You'll see that the first tr is still there.
When i search for something, and then clear the search field. The second tr which is by default set to display:none; is visible. It has to somehow go back to a display:none state
jsfiddle:
http://jsfiddle.net/2T5yJ/
For first row index is zero. So its not reaching
$(this).find("td").each(function () {
Remove
if (!index) return;
And search filter would work correct
Update you can check if value="" and write logic to get back display of rows to original
Please check updated fiddle
FIDDLE

Categories