Get dynamic class of element in javascript - javascript

I have a table with a bunch of tr elements with random, dynamically created ids, and corresponding divs with matching ids. I want to use the on('click') function so that when one tr element with a given id is clicked, the corresponding div id is also clicked via javascript.
The table:
<tbody>
<tr id="a94k5h3"></tr>
<tr id="0f3l6k2"></tr>
<tr id="44jg96a"></tr>
</tbody>
The divs:
<div id="a94k5h3"></div>
<div id="0f3l6k2"></div>
<div id="44jg96a"></div>
The code I have so far:
$(document).on('click', '#view_347 #a94k5h3', function(event) {
event.preventDefault();
$("#view_349 .kn-view.kn-map-results.view_349 #a94k5h3").click();
});
The above code works for the first one, but in practice I won't know what the id #a94k5h3 is, or how many tr/divs there will be. Any help would be much appreciated!
-Edit
I am using knack, which creates all of the html elements dynamically, it is not my code. I have attached an image of the output for possible clarification.
[![enter image description here][1]][1]
Essentially I have the same html element on a page twice. When one is clicked, I want the other one to be clicked too.

Since you cannot have duplicate ID on a single page what I suggest you is to use the data-* attribute like this:
<tr data-id="#a94k5h3">
and use .trigger("click") to trigger the designated click event on the DIV
Elements
Example:
$(document).on('click', '[data-id]', function(event) {
event.preventDefault(); // not sure you need this...
// ID is unique! remember? you don't need the classes extra selectors
// Use trigger "click"
$($(this).data("id")).trigger("click");
});
// Just to test!:
$("#view_349").find("div").on("click", function() {
console.log( this.id );
});
<table>
<tbody>
<tr data-id="#a94k5h3"><td>a94k5h3 CLICK ME</td></tr>
<tr data-id="#0f3l6k2"><td>0f3l6k2 CLICK ME</td></tr>
<tr data-id="#44jg96a"><td>44jg96a CLICK ME</td></tr>
</tbody>
</table>
<div id="view_349">
<div id="a94k5h3">DIV a94k5h3</div>
<div id="0f3l6k2">DIV 0f3l6k2</div>
<div id="44jg96a">DIV 44jg96a</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You shouldn't have duplicate id's in your dom, instead you should have data-* attributes. I chose data-id, but what you can do is grab the id of the clicked row, then do a selection based on that, it would look something like this:
$(document).on('click', 'tr', (event) => {
event.preventDefault()
let id = $(event.currentTarget).attr('id')
$(`[data-id=${id}]`).addClass('selected').click()
})
tr {background-color: red}
div.selected {background-color: yellow}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="a94k5h3"><td>Click Me</td></tr>
<tr id="0f3l6k2"><td>Click Me</td></tr>
<tr id="44jg96a"><td>Click Me</td></tr>
</table>
<div data-id="a94k5h3">1</div>
<div data-id="0f3l6k2">2</div>
<div data-id="44jg96a">3</div>

Adding TR element click handlers, to click a corresponding DIV element, needs a query selector that does not involve unknown random id values. E.G.based on the console log image:
"#view_349 table.kn-table TBODY TR"
I assume the selector for the DIV element works as provided
"#view_349 .kn-view.kn-map-results.view_349 #" + divId
Then the TR element click listener function can use the id of the TR element clicked,
event.target.id
to find the corresponding DIV element using JQuery:
$(document).on('click', "#view_347 TR" function(event) {
event.preventDefault();
var targetId = event.target.id;
$("#view_349 .kn-view.kn-map-results.view_349 #" + targetId).click();
});
This will probably work in JQuery but ignores the fact that having two elements with the same id is not valid HTML, as discussed in this question and previously mentioned in comments and other answers. I recommend looking into the possibility of generating the HTML without repeating exactly the same element id value.

Related

Dynamically insert/remove table rows (including how to give ID's to added rows)

I'm trying to implement a dynamically growing/shrinking table as in the picture. I know I need to use the insertRow() function, but I'm confused about how to dynamically give ID's to the rows. I need to be able to disable the end date input field if the checkbox is checked (that's why the need to give ID's). I need to be able to insert rows and delete rows. I'm fairly experienced in programming concepts but new to JavaScript and web development in general. If anyone could point me to sample code or explain if there is another efficient way of doing it, I'd greatly appreciate it.
http://imgur.com/68t3dH2
An example whitout id, working for each line control,
like you screenshot (id's are just a way among others...)
You can't have multiple identical id's, then
Assuming your action button's are called by their respective classname,
".add" and ".del"
For Removing
$(".del").on("click", function()
{
// removing the line of element clicked
$(this).parents("tr").remove();
});
For a New line
$(".add").on("click", function()
{
var line = $(this).parents("tr"); // get the line of element clicked
var lineOffset = line.index(); // get the offset position of this line
// and using css selector, you can simply add line after another
$("table tr:eq("+lineOffset+")").after(line.clone(true));
// line.clone(true) is an example, but you can put directly your html like "<tr>.... what you want</tr>"
});
Table test
<table>
<tr id="a_0"><td>test0</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
<tr id="a_1"><td>test1</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
<tr id="a_2"><td>test2</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
</table>
(function() {
$(".del").on("click", function() {
// removing the line of element clicked
$(this).parents("tr").remove();
});
$(".add").on("click", function() {
var line = $(this).parents("tr"); // get the line of element clicked
var lineOffset = line.index(); // get the offset position of this line
// and using css selector, you can simply add line after another
$("table tr:eq(" + lineOffset + ")").after(line.clone(true));
// line.clone(true) is an example, but you can put directly your html like "<tr>.... what you want</tr>"
});
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr id="a_0">
<td>test0</td>
<td><span class="del">[X]</span><span class="add">[o]</span>
</td>
</tr>
<tr id="a_1">
<td>test1</td>
<td><span class="del">[X]</span><span class="add">[o]</span>
</td>
</tr>
<tr id="a_2">
<td>test2</td>
<td><span class="del">[X]</span><span class="add">[o]</span>
</td>
</tr>
</table>
However, you can see in my example, the ID's beginning by a_*
are not used (yes, it's not necessary and relative as your case)
And another way to make that is to use the jquery method .index()
to get the line offset clicked and.. remove or copy it!
Note :
If you realy need to use a line ID,
well, you can proceed by using css selectors like that:
$("tr[id^='a_']")
IF EMPTIED TABLE
$(".del").on("click", function()
{
// removing the line of element clicked
$(this).parents("tr").remove();
if($("table tr").length == 1) // the only one remaining is the hidden_control (if you doesn't use a external button but a row)
$("#hidden_control").show(); // or .css("display", "block");
});
$("#hidden_control").on("click", function()
{
$("table").append("<tr><td>...</tr>"); // add a new first line
$(this).hide(); // and hide it directly until next reinit
});
// hidden button at top (or bottom) of table (not in the table)
<input type="button" id="hidden_control" value="Refill new data">
// or, hidden row solution (where colspan=6 depend the number of cell you have:
<tr id='hidden_control'><td colspan='6'><button>Refill new data</button></td></tr>
// CSS class for hidden_control
#hidden_control
{ display: none; }
Documentation :
Go on https://api.jquery.com/, and search for "parents", "after", "remove", "append", "html", "index"
Wrap each row with a class or row.
if you want to add:
var form="<div> <input type='text'></div>";
$(document).on('click', ".add", function(){
$(form).insertAfter($(this).closest("#fields"));
});
delete:
$(document).on('click', ".remove", function(){
$(this).closest('div').remove();
});
jsFiddle demo
You don't need ID's for that. The JavaScript handler for the checkbox can locate the End Date field by navigating the DOM tree. Starting at the checkbox, walk up the DOM tree (e.g. parent()) to find the cell (<TD>), then walking the siblings (next() twice), and down to the input field (e.g. find('input')).
As for adding a new row, you can follow the advice of this answer:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
And you remove a row by calling remove() on the <TR>.

How exactly does this JQuery script work? and how can I modify it to select a specific object?

I am absolutly new in JavaScript and jQuery and I have the following problem.
I have the following jQuery script:
$(document).ready(function () {
$("thead.opening").click(function () {
$(this).next().slideToggle('slow', function () {
$(this).prev("thead.opening").toggleClass("active");
$("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
$("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");
});
return false;
});
});
and in my HTML I have something like this:
<table class="standard-table-cls table-header-cls">
<thead class="opening active">
<tr>
<th>
<img class="imgAccordion" src="img/arrow_down.gif"/>
Ricerca Flussi (la funzione e' consentita per flussi inferiori alle 300 fatture)
</th>
</tr>
</thead>
<tbody class="expanded">
<tr>
<td style="width: 100em;">
SHOW SOMETHING
</td>
</tr>
</tbody>
</table>
...........................................................
...........................................................
...........................................................
<table class="standard-table-cls table-header-cls">
<thead class="opening">
<tr>
<th>
<img class="imgAccordion" src="img/arrow.gif"/>
Ricerca Fatture
</th>
</tr>
</thead>
<tbody class="expanded" style="display: none;">
<tr>
<td style="width: 100em;">
SHOW SOMETHING ELSE
</td>
</tr>
</tbody>
<table>
As you can see in my code there is 2 different tables both having the same classes (standard-table-cls table-header-cls).
When I click on the thead of one of these table it seems to me that the previous script is perfromed (it is right or am I saying wrong assertion?).
I think so because this statment:
$("thead.opening").click(function () {.......
means something like: perform the body of the defined function() when the user click on any thead element having class=opening.
Is it my reasoning correct?
No my doubt (and also the related problem) is: how jQuery know what is the specific thead.opening clicked by the user (the one related to the first table or the one related to the second table)?
What exactly represent the $(this) element in the previous script? (it is the selected object or what?)
And finally, how can I modify the previous script to obtain the reference of the inner tbody of the same table of the thead.opening clicked?
Tnx
I'll keep this as short as possible but this is the scope in the current function. In elements, its an element. So for you?
$("thead.opening").click
runs a function. So the $(this) is the thread.opening that was actually clicked.
Post
this statment ... perform the body of the defined function() when the user click on any thead element having class=opening.
yes that is correct.
how JQuery know what is the specific thead.opening clicked by the user
the answer lies in: $(this).next().slideToggle('slow', function ()....
What exactly represent the $(this) element in the previous script?
the object which is clicked.
obtain the reference of the inner tbody of the same table of the thead.opening clicked
use something similar to the following in the click handler:
$(this).closest('.standard-table-cls').children('tbody')
reference: here and here
hope this helps.
When I click on the thead of one of these table it seems to me that
the previous script is perfromed (it is right or am I saying wrong
assertion?).
You are right
Is it my reasoning correct?
This is correct
What exactly represent the $(this) element in the previous script? (it
it the selected object or what?)
$(this) referes to the element invoking the function $("thead.opening").click(function () {});, so $(this) is equal to $("thead.opening"), where thead.opening is the exact element clicked (not the other thead.opening in your document).
And finnally, how can modify the previous script to obtain the
reference of the inner tbody of the same table of the thead.opening
clicked?
$(this).next() (which is used in your exemple) is the selector to target the tbody. $(this).next()means this (clicked thead), find next sibling element (tbody).
$("thead.opening") returns a array of elements that match the selector, in your case the two separate table headers that have the class opening added to them.
the .click() assigns a click event handler to each of the elements returned by the selector. In your case to both the table headers.
$(this) refers to element which invoked the event in the event handler.
The code $(this).next().slideToggle( is already referencing the next sibling of the thead - in your HTMLs case, the tbody.
You will have to change your script and change selectors. Current $("thead.opening") will for example select all <thead class="opening"> tags, so it would have to be similar to this:
$(document).ready(function () {
$("thead.opening").click(function () {
var thisThead = $(this);
var thisTbody = thisThead.next();
thisTbody.slideToggle('slow', function () {
thisThead.toggleClass("active");
thisThead.find(".imgAccordion").attr("src", thisThead.is('.active') ? "http://placehold.it/30/ffffff/000000" : "http://placehold.it/30/000000/ffffff");
});
});
});
Check this Fiddle with 2 tables.

Display/Hide DIVs on tablecell hover (javascript)

I built a table with about 20 cells. Next to the table I want to display a <div> with a description, which should be displayed on hover or on click. There are heaps of solutions available on the web, but none really fits.
I already know I do need JavaScript, so i have my table cell
<td class="des1">Content</td>
and
<div id="des1">my Description1</div>
I add a class to the cells because some descriptions are called by more than one cell.
So, I need a JavaScript function to show the div "des1" on hover/click of all cells of class "des1", and also hide all other descriptions shown before. And that is my problem.
All my descriptions are wrapped in on other div so can I hide all divs in the wrapper and then display the right description. What is the best way to do this (event handling? inline?) Should I use CSS in Addition?
I do not have much experience in Javascript so I would appreciate any help or tips.
There are two basic parts to what you are trying to achieve:
event handling (to do things in response to the user hovering/clicking)
DOM manipulation (to change the description).
I would strongly advise using the jQuery library to help facilitate both of these.
Using jQuery you can easily "bind" an event handler which will do something in response to a cell being clicked or hovered over. For instance:
$('.des1').click(function() {
// Whatever you put here will be triggered when the user clicks on an element
// with class "des1"
});
The hover handler is similar, although slightly more complicated because it lets you specify both what happens when the user starts hovering and when they stop:
$('.des1').hover(function() {
// Whatever you put here will be triggered when the user hovers over an element
// with class "des1"
}, function() {
// Whatever you put here will be triggered when the user stops hovering over an
// element with class "des1"
});
Inside the handlers you'll want to add logic to modify the text of the element with the appropriate ID, which you can do using jQuery's text method:
$('#des1').text('My Description #1');
Combining the two, and sharing a function between them, you get something like:
var showDescription1 = function() {
// Whatever you put here will be triggered when the user clicks on an element
// with class "des1"
};
$('.des1').click(showDescription1)
$('.des1').hover(showDescription1, function() {
// if you want to change the description back when the user stops hovering, you'd
// add that logic here
});
<style>
div.des {
display: none;
}
</style>
<table>
<tr>
<td class="des1">Content 1</td>
</tr>
<tr>
<td class="des2">Content 2</td>
</tr>
<tr>
<td class="des3">Content 3</td>
</tr>
</table>
<div id="des1" class="des">Description 1</div>
<div id="des2" class="des">Description 2</div>
<div id="des3" class="des">Description 3</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('table td').on('click', function() {
var $des = $('#' + $(this).attr('class')),
visible = $des.hasClass('active');
$('div').hide();
if(visible) {
return;
}
$des
.addClass('active')
.show();
});
</script>

How do I delete a particular row of a table using jQuery?

I have a table like the following:
HTML:
<table id="data-filter">
<tr>
<td>1</td>
<td>Harry Potter</td>
<td><span class="delete"></span></td>
</tr>
<tr>
<td>2</td>
<td>Frodo Baggins</td>
<td><span class="delete"></span></td>
</tr>
</table>
If the user clicks "x" in any row, that particular row will be deleted. I am able to find which row is clicked, but I am unable to find exactly which rows "x" is clicked. My jQuery and CSS code are below:
jQuery:
$(document).on('click', '#data-filter tr', function() {
rn = this.rowIndex;
alert('You clicked row: '+rn); // do something to remove this row
});
CSS:
.delete:after { content:"x";}
I want to trigger the delete event, only when the user clicks a particular row's "x", not the whole row or just any part of the row. I think I may be just missing the correct selector for this, but I am not sure.
You can use this to refer to the element targeted by the handler so
$(document).on('click', '#data-filter tr .delete', function() {
$(this).closest('tr').remove()
});
Also from what I can see, you need to delete the row when you click the delete button so you need to add the handler to the delete element and then use .closest() to find the tr element where the delete button is present then call .remove() to delete that row
I was looking at your problem and I have a solution:
$(document).on('click', '#data-filter tr .delete', function() {
this.parentElement.parentElement.remove();
});
And you need to remove the hashtag on your table id (should be just "data-filter") thats how you call it from jQuery not how it's declared on HTML
What I'm doing with the function its set the listener in the span not on the row and calling the parent nodes until the TR
Hope that works for you.

Jquery Finding the closest link?

I want to be able to get the href from this type of code:
<tbody>
<tr class="odd">
<td class=" sorting_1">
The Link Text
</td>
</tr>
</tbody>
but I want to be able to click on the link itself, or the td.
Here is my CoffeeScript:
$("#myID tr td").click (event)->
event.preventDefault()
link = $(event.target).find("a").attr("href")
$("#anAjaxPod").load(link)
This works if one clicks on the td, but not if if one clicks on the link.
Edit: Updated question, I used find at first. This is just the last code I played with
Use .find() ; .closest() is to climb up the DOM tree testing self and ancestors. Here anchor tag is the child of td so you need to descend down. So find or a children selector is what you need.
$(this).find("a").attr("href")
Closest get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
$("#myID tr td").click(function(event){
event.preventDefault()
link = $(this).find("a").attr("href");
$("#anAjaxPod").load(link);
});
Fiddle
.closest() looks and self or ancestors where as you want to descendent, to find the descendent use find()
link = $(event.target).find("a").attr("href")
try this:
$(function(){
$("#myID tr td").click(function(){
Link = $(this).find("a").eq(0).attr("href");
$("#anAjaxPod").load(Link);
return false;
})
})

Categories