i have a table with add/remove buttons, those buttons add and remove rows from the table, the buttons are also added with each new row
here what i have as html
<table>
<tr>
<th>catalogue</th>
<th>date</th>
<th>add</th>
<th>remove</th>
</tr>
<- target row ->
<tr id="cat_row">
<td>something</td>
<td>something</td>
<td><input id="Add" type="button" value="Add" /></td>
<td><input id="Remove" type="button" value="Remove" /></td>
</tr>
</- target row ->
</table>
JavaScript:
$("#Add").click(function() {
$('#cat_row').after('<- target row with ->'); // this is only a notation to prevent repeatation
id++;
});
$("#Remove").click(function() {
$('#cat_'+id+'_row').remove();
id--;
});
Please note that after each addation of a new row the id is also changed for example here after clicking the button "Add" 1 time
<table>
<tr>
<th>catalogue</th>
<th>date</th>
<th>add</th>
<th>remove</th>
</tr>
<tr id="cat_row">
<td>something</td>
<td>something</td>
<td><input id="Add" type="button" value="Add" /></td>
<td><input id="Remove" type="button" value="Remove" /></td>
</tr>
<tr id="cat_1_row">
<td>something</td>
<td>something</td>
<td><input id="Add" type="button" value="Add" /></td>
<td><input id="Remove" type="button" value="Remove" /></td>
</tr>
</table>
now the new added Buttons has no actions i must always click on the original buttons - add/remove
after this i want to make the Remove Button removes ONLY the row where it is clicked on
for example if i click the button in row 2, row 2 will be deleted
Info:
I use web2py 2.2.1 with python 2.7 with the last version of jQuery
I think it would be better instead of:
$('#cat_'+id+_row').remove();
Do this in your onclick event:
$(this).parent().parent().remove();
You can't have two buttons with the same id (you're using duplicates for both "Add" and "Remove"). id values must be unique on the page.
You might look at using a class instead, and also look at event delegation. For instance, assuming this is the only table on your page (if not, just make the selector more specific), if you change your buttons to have classes "add-btn" and "remove-btn" instead of id values, then you can use delegate:
$("table").delegate(".add-btn", "click", function() {
// An add button was pressed, you can find out which
// row like this:
var row = $(this).closest('tr');
});
...and similarly for the .remove-btn button.
Alternately, some prefer to use on (note the order of arguments is slightly different):
$("table").on("click", ".add-btn", function() {
// An add button was pressed, you can find out which
// row like this:
var row = $(this).closest('tr');
});
Which you use is currently a matter of style. I prefer delegate for clarity, but the jQuery team love to hyper-overload their functions. So far they haven't deprecated delegate, though they do call it "superceded."
Related
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().
I have a show/hide function on a web page where I want to improve the layout, but when I added a new table to put in headers for the data, the show/hide stopped working.
A snippet of the original code is:
<table id="cart-list">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
<tr class="cl-group">
<td class="cl-sh" title="Show [+] or Hide [-] this lists' products"> </td>
<td colspan="2">Cart List One:
<table id="cl-chg-1" class="cl-other cl-chg">
<tr>
<td>List Name:</td>
<td><input type="text" name="group_name[1]" value="Cart List One" maxlength="255" /></td>
</tr>
<tr>
<td>List Comments:</td>
<td><input type="text" name="group_comments[1]" maxlength="255" /></td>
</tr>
<tr>
<td><button type="button" onclick="cancelGroupEdit();">Cancel</button></td>
<td><button type="submit" name="change" value="1">Go</button></td>
</tr>
</table>
</td>
</tr>
</div>
<tr>
<td>Stuff Here</td>
</tr>
<tr>
<td>Stuff Here</td>
</tr>
</table>
And the js used is
var groups = document.getElementsByClassName("cl-sh");
if (groups) {
for (var i = 0; i < groups.length; i++) {
groups[i].onclick = function() {
this.classList.toggle('cl-a');
var productsDisplay = '';
if (this.classList.contains('cl-a')) {
productsDisplay = 'none';
}
var nextRow = this.parentNode.nextElementSibling;
while (nextRow) {
if (nextRow.classList.contains('cl-group')) {
break;
}
nextRow.style.display = productsDisplay;
nextRow = nextRow.nextElementSibling;
}
}
}
}
A fiddle can be seen here: https://jsfiddle.net/65j1nvpq/1/
The broken function with the additional table code added can be seen here: https://jsfiddle.net/cmgqeLf7/
I don't really understand why having an additional table is breaking the function.
Any suggestions on a fix for this?
What does your JS function do when you click on the +/- cell?
Firstly, it toggles whether the clicked cell contains the cl-a class. Then, it runs through all remaining rows in the same table, showing or hiding them as appropriate, until it finds a row with the class cl-group, or hits the end of the rows in that table.
Note the word same in the last paragraph.
In your first fiddle, you have one table. In your second fiddle, you have two, and the rows you wish to toggle the display of are not in the same table as the toggle button. This is why they are not showing/hiding when you click the toggle button.
I'm not sure exactly what your requirements for showing/hiding rows are, so I'm not going to propose a fix. However, understanding what the problem is may help you to find a fix for yourself.
I am using a button in a table and my button is a single element but on top, I am changing the row of the table based on some condition, so when my final table created is I see button in all rows, which is fine and as per the requirement.
Now I need to use a function on button click which I want to perform the same action in each row to remove the row where the button is placed. when I am using a single function it's working only for first time and not after that, how can I use the same function for all buttons?
here is my code:
function AddValueinrow() {
if(anotherTeamname=='DEV'){
if(selectedValue=="dummy value1"){
row = document.getElementById("DEVFirstrow");
}
if(selectedValue=="dummy value2"){
row = document.getElementById("DEVSecondrow");
}
var w = row.insertCell(6);
w.innerHTML = '<button onclick="Releaseentry()" type="button" id="show" class="btn btn-primary">Release</button>';
}
function Releaseentry() {
if(anotherTeamname=='DEV'){
if(selectedValue=="dummy value1"){
$('#DEVmyTable > tr').eq(0).children('td').remove();
}
if(selectedValue=="dummy value 2"){
$('#DEVmyTable > tr').eq(1).children('td').remove();
}
}
}
Find the parent row by using .closest(), and remove it.
Note: Instead of using inline onclick calls, use event delegation to attach a single event handler to the container, and react to button clicks.
$('#table').on('click', 'button', function() {
$(this)
.closest('tr')
.children('td:not(:last-child)')
.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tbody>
<tr>
<td>td11</td><td>td12</td>
<td>
<button type="button" class="btn btn-primary">Release</button>
</td>
</tr>
<tr>
<td>td21</td><td>td22</td>
<td>
<button type="button" class="btn btn-primary">Release</button>
</td>
</tr>
<tr>
<td>td31</td><td>td32</td>
<td class="button">
<button type="button" class="btn btn-primary">Release</button>
</td>
</tr>
</tbody>
</table>
I have a table (generated at run time) and a dropdown. Before the page is up, the table does not exist. Once the page is up, the table and the dropdown look similar to this fiddle:
$("#aDropDown").val($("WhatToPutHere?").text());
I am trying to do the following: when the user select the Select button, I need the dropdown selected item to match the Type for the row.
Any example would be appreciated.
Thanks
Mike
first, you have multiple button with the same id. They should share a class.
<button class="aButton">Select</button>
next, what you want is the .text() of the prev <td>
$('.aButton').on('click', function() {
var type = $(this).closest('td').prev('td').text();
$("#aDropDown").val(type);
});
JSFIDDLE
as #Mackan pointed out, you might encounter a problem if you're not using a
delegated event, as you're creating the table dynamically. in that case the following code would work better :
$(body).on( 'click', '.aButton' , function() {
var type = $(this).closest('td').prev('td').text();
$("#aDropDown").val(type);
});
$('.aButton').click(function(e) {
var btn = $(e.target);
$("#aDropDown").val(btn.data('category'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<td>item</td>
<td>Type</td>
<td>Action</td>
</thead>
<tr>
<td class="anItem">Apple</td>
<td class="aType">Fruit</td>
<td>
<button class="aButton" data-category="Fruit">Select</button>
</td>
</tr>
<tr>
<td class="anItem">Orange</td>
<td class="aType">Fruit</td>
<td>
<button class="aButton" data-category="Fruit">Select</button>
</td>
</tr>
<tr>
<td class="anItem">collard</td>
<td class="aType">Veggie</td>
<td>
<button class="aButton" data-category="Veggie">Select</button>
</td>
</tr>
</table>
<br/>
<br/>aDropDown:
<select id="aDropDown">
<option value="Fruit">Fruit</option>
<option value="Veggie">Veggie</option>
</select>
Removed id attribute from each button (id should be use for unique elements).
Added aButton class to each button.
As I said above, your code must run on some event. Here's how I'd do it with minimal markup changes (just a class on the buttons):
$('.selectBtn').click(function() {
var myVal = $(this).closest('tr').find('.aType').text();
console.log(myVal);
$("#aDropDown").val(myVal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<td>item</td>
<td>Type</td>
<td>Action</td>
</thead>
<tr>
<td class="anItem">Apple</td>
<td class="aType">Fruit</td>
<td>
<button id="aButton" class="selectBtn">Select</button>
</td>
</tr>
<tr>
<td class="anItem">Orange</td>
<td class="aType">Fruit</td>
<td>
<button id="aButton" class="selectBtn">Select</button>
</td>
</tr>
<tr>
<td class="anItem">collard</td>
<td class="aType">Veggie</td>
<td>
<button id="aButton" class="selectBtn">Select</button>
</td>
</tr>
</table>
<br/>
<br/>aDropDown:
<select id="aDropDown">
<option value="Fruit">Fruit</option>
<option value="Veggie">Veggie</option>
</select>
Since you said your table is created dynamically, you should use a bind to a persistent element, using a delegated event (like document or body):
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers
All of the other answers (time of writing) uses binds that will add the event handlers to the actual buttons. This means that if the button doesn't exist, or gets temporarily removed, the bind will be lost or can't be created to start with.
Using a delegated event:
$(document).on('click', '.aButton', function() {
or..
$('body').on('click', '.aButton', function() {
Also notice that the above binds use a class selector, .aButton, because id's must be unique (and yours were not).
<button class="aButton">Select</button>
Full example at jsFiddle:
$(document).on('click', '.aButton', function() {
$("#aDropDown").val($(this).parent().prev('td').text());
});
Edit:
If the table structure is in danger of changing (adding more td's or tr's), the below script will be better at finding the correct td (by class .aType):
$(document).on('click', '.aButton', function() {
$("#aDropDown").val($(this).closest('tr').find('.aType').text());
});
I have a table like this:
<table>
<tr>
<td>foo</td>
<td><button>delete</delete></td>
</tr>
<tr>
<td>foo</td>
<td><button>delete</delete></td>
</tr>
</table>
I want to use JQuery to install a click handler on the delete buttons such that it deletes the current row when clicked
Give a class of, for example, "delete" to the delete buttons, then use this:
$("button.delete").click(function() {
$(this).closest("tr").remove();
});
Alternatively, if you can't add the class, you can use the :contains selector:
$("button:contains('delete')").click(function() {
$(this).closest("tr").remove();
});
Update (now that the code in the question has completely changed)
Now that you have changed the code in the question to contain only one button instead of two, you don't need to bother adding the class, or using the :contains selector, you can just use the plain old button selector:
$("button").click(function() {
$(this).closest("tr").remove();
});
Try this. As a side not you should not have same id to any dom element on the page.
$("button").click(function() {
$(this).closest("tr").remove();
});
In your markup the tags are not closed properly. E.g the button tag is not closed properly so the selector will not work. Give a unique id or a class name to select the required buttons.
Something like this
<tr>
<td>foo</td>
<td>Some content</td>
<td><input type="button" class="delete" value="Delete" /></td>
</tr>
Using delegate to attach event handler only to table for better performance. This way the click event will be attached only to the table element no matter how many rows it has.
$("table").delegate("input.delete", "click", function() {
$(this).closest("tr").remove();
});
You can try soemthing like this:
<table>
<tr>
<td>row 1, cell 1</td>
<td><img class="delete" src="del.gif" /></td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td><img class="delete" src="del.gif" /></td>
</tr>
</table>
And your jQuery:
$('table td img.delete').click(function(){
$(this).parent().parent().remove();
});
First off, there's a syntax error in your HTML, and you should a class identifier for easier access to those buttons:
<table>
<tr>
<td>foo</td>
<td><button class="delete">delete</button></td>
</tr>
<tr>
<td>foo</td>
<td><button class="delete">delete</button></td>
</tr>
</table>
Next, here's the jQuery code you need:
$(function() {
$('button.delete').click(function(event) {
event.preventDefault();
$(this).closest('tr').remove();
});
});