I want to add a column to my table. My js code is as follows:
jQuery(document).ready(function () {
jQuery('#addCol').click(function () {
var countRows = $('#blacklistgrid tr').length;
$('.class').each(function() {
$( this ).append("<td><input type=\"text\"/></td>");
});
});
This code can be found in the fiddle. What am I doing wrong ?
You're targeting the wrong element.
You should do this:
jQuery('.Row').each(function() {
jQuery( this ).append("<td><input type=\"text\"/></td>");
});
Notice jQuery('.Row') instead of jQuery('.class')
See the docs, the class selector is used like jQuery('.<classname>'), and in this case you want to get each rows, which are identified by Row class
Related
I would like to add an element to another list and remove it from the current when clicked. I tried it with the property appendTo of Selectable, but nothing happens when I click on it.
I built this https://jsfiddle.net/wgaga8uc/ to ilustrate it.
$("#paramselectable").selectable({appendTo: "#paramselected"});
$("#paramselected").selectable({appendTo: "#paramselectable"});
I would appreciate any help,
Thanks.
$("#paramselected li").click(function(){
$("#paramselectable").append(document.createTextNode( "Hello" ));
});
Finally I achieved it adding and removing classes. https://jsfiddle.net/22d7sxvd/
$(function() {
$( ".paramsnav" ).selectable();
});
$('li').click(function () {
var selected = $('#params').find('.ui-selected');
if(selected.hasClass('selectable')) {
selected.removeClass('ui-selected');
selected.removeClass('selectable');
selected.addClass('selected');
selected.appendTo('#paramselected');
} else {
selected.removeClass('ui-selected');
selected.removeClass('selected');
selected.addClass('selectable');
selected.appendTo('#paramselectable');
}
});
My regex & jquery skills are failing me.
I need to hide ALL of the following html where it appears on a page (the following is spat out by a database):
<p><strong>External Links for:</strong></p>
<p></p>
I'd be very grateful for a jsfiddle (or similar) that uses jquery to hide only exactly ALL of the above. (Note: Sometimes there will be data inside the second paragraph. If so, this should remain untouched).
Thanks in advance!
For the record, I have tried to do this myself but my jquery skills are rubbish so best to start with a blank slate as I expect it will only take a few lines of code to implement.
You can iterate over and check if text is External Links for: then hide it or remove it
$(document).ready(function () {
$("p > strong").each(function () {
if ($(this).text() == "External Links for:") {
//$(this).hide();
$(this).closest('p').remove();
}
});
});
DEMO
OR
$(document).ready(function () {
$("p > strong").each(function () {
return $(this).text() === "External Links for:";
}).closest('p').remove();
});
Alternate Way DEMO
Note: Wrap your code in document-ready handler
If you want to return ONLY instances of BOTH paragraphs in a row, you can create a complex filter like so:
$('p').filter(function(i,el) {
var test1 = $(el).html() == "<strong>External Links for:</strong>";
var test2 = $(el).next('p').html() == "";
return test1 && test2;
}).next().addBack().hide(); // or .remove()
http://jsfiddle.net/mblase75/d7fz4/5/
For example like this:
$( function() {
$( 'p>strong' ).each( function() {
$( this ).next( 'p' ).remove();
$( this ).remove();
});
});
demo
I want to append the text in last column of the table (grid like structure). Like below
When Click on Add button i want to append some text in last column adjacent to Add button. I am getting repated text on click of Add as in picture above.
This is what i have tried so far (one step away):
$(document).ready(function(){
$('.new').on('click', function(){
var recId= $(this).parents("#myTable td:last-child");
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
});
});
Can someone help me rectify this, Sample JSFiddle
Edit for Clarity in question
Sometext added in last column is dynamic and click event on Add button should fire multiple times.
Try .one()
Attach a handler to an event for the elements. The handler is executed
at most once per element per event type.
$('.new').one('click', function () {
fiddle Demo
Updated after OP's comment.
fiddle Demo
$(document).ready(function () {
$('.new').on('click', function () {
var recId = $(this).parents("#myTable td:last-child");
if (recId.text().indexOf("Sometext") === -1) { //if it contains Sometext it will not append it again but if it's a new value it will append it
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
}
});
});
Better code
fiddle Demo
$(document).ready(function () {
$('.new').on('click', function () {
var recId = $(this).parent();
recId.find('b').remove();
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
});
});
Try:
$(document).ready(function(){
$('.new').on('click', function(){
var recId= $(this).parents("#myTable td:last-child");
recId.find('b').remove(); //remove text
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
});
});
DEMO here.
i did this to your JS.
$(document).ready(function(){
$('.new').on('click', function(){
var recId= $(this).parents("#myTable td:last-child");
if (!recId.hasClass("changed")) {
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
recId.addClass("changed");
}
});
});
checking if the td has the class "changed", if not: add text, change bgcolor and the add the class "changed" so the event can fire but won't do anything to the same td twice.
I'm trying to alert message on click each column. I have a table in which three row and four column, now I want alert message with next column value on third column click of each table. I have tried this but all column get value not a particular column. my problem is this is invoke in every column click but I want alert message only when third column click of each row.
HTML
<table id='myTable'>
<tr><td>R1C1</td><td>R1C2</td><td>R1C3</td><td>R1C4</td></tr>
<tr><td>R2C1</td><td>R2C2</td><td>R2C3</td><td>R2C4</td></tr>
<tr><td>R3C1</td><td>R3C2</td><td>R3C3</td><td>R3C4</td></tr>
</table>
JS
$("#myTable tr").bind("click", function () {
alert($(this).children("td").eq(3).html());
});
Demo Here
please try this code
$(document).ready(function () {
$('#myTable tr').each(function (Mindex, Mval) {
$(Mval).find('td:eq(2)').click(function () {
alert($(Mval).find('td:eq(3)').html());
});
});
Try this
$('table#myTable tr td:nth-child(3)').on('click', function() {
alert($(this).next().html());
});
Check Here
$("#myTable tr td:nth-child(3)").click(function () {
alert($(this).next().html());
});
Try this:
$('#myTable').children('tr').children('td').eq(3).on('click', function() {
alert($(this).next().html());
});
The above function makes sure that you are calling the direct children elements but not any nested other same elements. Solves future regressions.
If your table is going to stay the same size there are answers that already work. If your table is going to grow I would recommend doing some event delegation. It will dramatically speed up the page if there are going to be a large number of event listeners.
$('#myTable').on('click', 'td:nth-child(3)', function(){
alert($(this).text());
});
See this jsfiddle, and this jquery documentation.
below code will find and set the desired column value
$('#myTable tr:gt(0)').each(function(){
// console.log($('td:eq(3)', $(this)).html());
alert($('td:eq(3)', $(this)).html());
$('#myTable').find('tr:gt(0)').find('td:eq(3)').html("hello");
});
Try this:
var thirdEle = $("#myTable tr td:nth-child(3)");
thirdEle.bind("click", function () {
alert($(this).html());
});
My goal is to have one element on initial load, this element should have id="something_O", when a add link is clicked, underneath already existing element, new, the same html element should be added,not with id="something_o", but with id="something_1", or last element + 1, to be specific. The user should be able to add these elements infinitely. When the user clicks deleted, element should disappear.
Any ideas?
Here is prepared fiddle for easier help...
var counter = 1;
$('.AddEl').live('click', function () {
var el = $('#element_1').clone().attr('id', 'element_' + ++counter).appendTo('body');
});
$('.RemoveEl').live('click', function () {
var el = $(this).parents('.elem')
if (el.get(0).id !== 'element_1') el.remove();
});
Check this here
One means to do this is:
$(document).ready(function() {
$('body').on('click', '.AddEl', function() {
$('.actions:first')
.parent()
.clone()
.attr('id', 'element_' + $('.actions').length)
.insertAfter($('.actions:last').parent());
});
$('body').on('click', '.RemoveEl', function() {
$(this).closest('.actions').parent().remove();
});
});
JS Fiddle demo.
Please note that I've amended your html so that the first element to be cloned is now id="element_0", and targeted that, and all subsequently-created elements, with the CSS selector:
div[id^=element] {
/* css */
}
This could be simplified, but these are simply my first thoughts.
Edited to offer a slightly improved version, in that the initial addition is slightly, or seems a little, more concise, and also features a means to prevent duplicate ids being generated if elements are added/removed:
$(document).ready(function() {
$('body').on('click', '.AddEl', function() {
var $elems = $('.actions').parent();
$elems
.first()
.clone()
.insertAfter($elems.last());
$('div[id^="element_"]').each(
function(i){
$(this).attr('id','element_' + i);
});
});
$('body').on('click', '.RemoveEl', function() {
$(this).closest('.actions').parent().remove();
});
});
JS Fiddle demo.
I just overwrite to your code.
You can try this, may something you want.
http://jsfiddle.net/kongkannika/QeSPP/34/