I have a table with some td elements with the same class. But i want to change claas only in specified area .selected.
I make this:
<tr>
<td>--</td>
<td class="mcost"></td>
</tr>
<tr class="selected">
<td><input type="radio" name="work" onclick="selone('.selected','#sel1','m');" checked="checked" /></td>
<td id="sel1" class="mcost"></td>
</tr>
<tr class="selected">
<td><input type="radio" name="work" onclick="selone('.selected','#sel2','m');" /></td>
<td id="sel2" class="mcost"></td>
</tr>
<tr>
<td>--</td>
<td class="mcost"></td>
</tr>
And try this:
function selone(g,f,n){
$(g).each(function(){
$('.'+n+'cost').removeClass().addClass(n+'cost_dis');
});
$(f).removeClass().addClass(n+'cost');
}
But it's change class to all mcost elements =( Not only in specified area. How to improve it?
in your .each, you requery the entire dom for .mcost cells. You need to do the following:
function selone(g,f,n){
$(g).each(function(){
$(this).find('.'+n+'cost').removeClass().addClass(n+'cost_dis');
});
$(f).removeClass().addClass(n+'cost');
}
This will only change the .mcost items inside of your $(g) element. This should work. Let me know.
$(".selected td").each( function() { $(this).addClass("whatever"); } );
You could use a better, and unobtrusive approach:
remove the onclick-events in the html.
Use the script to this:
$(function () {
$(".selected :radio").click(function () {
var selected = $(this).parents(".selected:first");
selected.removeClass().addClass('mcost_dis');
selected.find('.mcost').removeClass().addClass('mcost');
});
});
(However the last line doesn't add much)
The problem is in the part $('.'+n+'cost')
this does not consider the context it is called in. It will allways select all .mcost elements in the page.
if you change it to:
$(this).find('.'+n+'cost')
it will search only in the context of g. Do the same for f.
However, it all depends on what g and f are. Using .selected in this case it should give you what you want.
I don't think you need the each loop at all if you change your selector a bit. Wouldn't this work:
function selone(g,f,n) {
// find elements that already have the class, and change them
$(g + " ." + n + 'cost').removeClass().addClass(n+'cost_dis');
// add class to newly selected item
$(f).removeClass().addClass(n + 'cost');
}
Assuming you call it with
selone('.selected','#sel1','m');
Then within the function $(g + " ." + n + 'cost') evaluates as $(".selected .mcost") - which means "find elements of class 'mcost' that are descendents of elements with class 'selected'".
Related
I need to change all ID after cloning node below by javascript or jquery.
<table id="1">
<tr>
<td id="RM_1"><button type="button" onclick="duplicateFunction(1)"></td>
<td id="CL_1"><input id="[1][999]"/></td>
</tr>
</table>
when I clone node with ID = "1" I need to change 1 to 2 as in all ID tags below.
<table id="2">
<tr>
<td id="RM_2"><button type="button" onclick="duplicateFunction(2)"></td>
<td id="CL_2"><input id="[2][999]"/></td>
</tr>
</table>
Remark : The table id is unique id. I use simple number to explain the code.
update
When user click duplicate button. The duplicateFunction will be called.
now , I can change table id but I can't change inside.
function duplicateFunction(table_id){
var myTable = document.getElementById(table_id);
myClone = myTable.cloneNode(true);
var newTableID = Date.now();
myClone.id = newTableID;
document.getElementById("AddingSpace").appendChild(myClone);
}
because every tags have another features to do when user click.
that's the best way on this time.
Thank you in advance
This is an attempt along the lines suggested by Rory McCrossan. Instead of the individual ids of your elements inside the table I used shortened class names. The tables do not have actual ids but dataset attributes with id properties. This way it will not cause serious problems if ids should become double ...
My function calculates a newid on the basis of the number of already existing tables in the #addingspace div. This is not production ready either but probably less problematic than your original approach.
const $trg=$('#addingspace');
$(document).on('click','.RM button',function(){
let newid=$trg.find('table').length+2;
$trg.append(
$(this).closest('table').clone().data('id',newid) // set data-id
.find('.CL span').text(newid).end() // set span and return cloned element
)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data-id="1">
<tr>
<td class="RM"><button type="button">duplicate</button></td>
<td class="CL"><input /> id: <span>1</span></td>
</tr>
</table>
<div id="addingspace"></div>
I am trying to get the element inside of the dynamically created ID, to alert. So far i've this.
<tr>
<td class="td-input">
<input id="WILL GENERATE DYNAMICALLY IP" type="checkbox"
onchange="toggleSelect(this,event)" class="update-select-widget">
</td>
<td>127.0.0.1</td>
<td></td>
<td>
<div onclick="singleLaunch(this)"><i class="fa fa-gear"></i></div>
</td>
</tr>
function:
var nestedId = $(this).parent().parent().children(".td-input").attr("id");
alert(nestedId);
there is plenty of tables with different values, ill have to showcase, i tried using .each and .map in the past but still not luck. Best Regards
this cannot be used if you are calling this using onclick attribute.
function singleLaunch(div){
alert($(div).closest('tr').find(".td-input input").attr("id"));
}
function singleLaunch(x){
var nestedId = $(x).closest("tr").find(".td-input input").attr("id");
alert(nestedId);
}
Try this
$(document).on('click', '.td-input input', function(){
alert($(this).attr('id'));
});
I have a couple of td elements I would like to make editable and then when a button is clicked have them revert to static. The problem is getting these elements to toggle back and forth. How do I accomplish this in the easiest way possible?
It seems recursive where I would click edit -> replace the elements with input elements -> give button static function handler -> click button -> replace the input with static content -> add event handler. The only issue I have is attaching the handler to the newly created elements.
Javascript:
// how do I encapsulate this into its own function? Seems recursive.
$('.edit-me').click(function(){
// remove the other editable fields.
// For some reason the second toggle errors out. - Why?
makeEditable(this);
$(this).toggleClass('edit-me');
$(this).toggleClass('static-me');
});
// attach a handler to the newly created elements
$('.static-me').click(function(){
// this is not working because newly created items do not have the event associated to them.
console.log("HERE");
makeStatic(this);
$(this).toggleClass('edit-me');
$(this).toggleClass('static-me');
});
}
$('.delete-me').click(function(){
pair_delete(this);
});
function makeEditable(obj){
// replace the elements with an editable element.
$(obj).parent().children('td.editable').each(function(index, item){
$(item).html('<input class="form-control edit-mode editing" data-field="' + $(this).attr('data-field') + '" value="' + $(this).html() + '" >');
// toggle for event handling.
$(item).removeClass('editable');
$(item).addClass('edit-mode');
});
$('.editing').change(function(){
// create the update
pair_update(this);
});
}
function makeStatic(obj){
// makes the row static.
$(obj).parent().children('td.edit-mode').each(function(index, item){
// replace with input field.
$(item).html('<td class="editable" data-field="'+ $(item).attr('data-field') +'">' + $(item).find('.editing').val() + '</td>');
$(item).addClass('editable');
$(item).removeClass('edit-mode');
});
}
HTML:
<td class="editable" data-field="pair_name"><?=$pair['pair_name']?></td>
<td class="editable" data-field="email_name"><?=$pair['email_id']?></td>
<td class="editable" data-field="sent_event_id"><?=$pair['sent_event_id']?></td>
<td class="editable" data-field="minutes"><?=$pair['minutes']?></td>
<td class="edit-me">
<button type="submit" class="btn btn-primary">
<i class="glyphicon glyphicon-pencil icon-white"></i>
</button>
</td>
if you'd rather keep to toggling, use .on('click', '.classname', function() { // do stuff here; }); instead of .click() (it should solve the bindings to the new elements on the dom)
another solution is to try something without toggle, since toggle gets messy with switching out elements and such. something more straight forward like this could work : http://jsfiddle.net/swm53ran/177/
$(document).ready(function() {
$('table').on('click', '.edit', function() {
var name = $(this).closest('tr').find('.name').html();
var email = $(this).closest('tr').find('.email').html();
$(this).closest('tr').find('.name').html('<input type="text" value="'+ name +'"/>');
$(this).closest('tr').find('.email').html('<input type="text" value="'+ email +'"/>');
$(this).closest('tr').find('.edit').closest('td').html('Save');
});
$('table').on('click', '.save', function() {
var name = $(this).closest('tr').find('.name').find('input').val();
var email = $(this).closest('tr').find('.email').find('input').val();
$(this).closest('tr').find('.name').html(name);
$(this).closest('tr').find('.email').html(email);
$(this).closest('tr').find('.save').closest('td').html('Edit');
});
});
<table>
<tr>
<td class="name">Name1</td>
<td class="email">Email1</td>
<td class="action">Edit</td>
</tr>
<tr>
<td class="name">Name2</td>
<td class="email">Email2</td>
<td class="action">Edit</td>
</tr>
<tr>
<td class="name">Name3</td>
<td class="email">Emaiil3</td>
<td class="action">Edit</td>
</tr>
</table>
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();
});
In my code, I can get the object but not the value. How can I get the value of the .cups textbox? Thanks.
HTML:
<tr id="20">
<td class="description">CHEESE,FONTINA</td>
<td><input type="text" class="cups" value=""></td>
<td><input type="checkbox" class="breakfast"></td>
<td><input type="checkbox" class="lunch"></td>
<td><input type="checkbox" class="dinner"></td>
<td><input type="checkbox" class="snack"></td>
<td><input type="checkbox" class="favorites"></td>
<td><label class="addFood"><input type="button" class="input_text_custom input_button" value="Add"></label></td>
</tr>
JS:
$(document).ready(function () {
$('.addFood').click(function () {
var tr = $(this).parents('tr');
var foodId = tr.attr('id'); // works
var servings = tr.children('.cups'); // returns [object Object]
var servings = tr.children('.cups').val(); // returns undefined
alert(servings);
});
});
The <input> is a grandchild of <tr>, not a child, so it won't be selected by .children and you get a jQuery object which has no members when you try it (this is akin to an empty array).
Use .find instead, that operates on descendants.
I always find that it is best to be as verbose as you can with jQuery selectors. Especially when it comes to classes as there can be more than one element or types of elements that could be matched. Id's are unique so tr#20 is overkill (IMO).
I would use something like this -
var cupsValue = $("#20 input.cups").val();
If you still want to use a derivative of your code, I would also suggest that you use closest() and not parents() (unless there is something I'm missing from your markup). You are only looking for one parent object, the closest tr that is a parent of the current element.