Opposite of jQuery .parents() selector [duplicate] - javascript

This question already has answers here:
How to select elements which do not have a specific child element with JQuery
(5 answers)
Closed 8 years ago.
I'm making an userscript for a page. The page is old-school tables-everywhere design. I'm trying to access long table of fields so that they can be filled by script.
The structure can be simplified to be like this:
<form>
<blockquote>
<table>
<tr>
<td>
<table>
<!-- THE DESIRED <input> FIELDS ARE HERE!! -->
</table>
</td>
<td>
<table>
<!-- Contains <select> <input> -->
</table>
</td>
</tr>
</table>
<!-- the table repeats and I need all inner tables -->
</blockquote>
</form>
So I was thinking I could get aAll tables that are in form table but do NOT contain <select>.
I think oposite of the parents selector in jQuery would be ideal. Does something like this exist?

You can try
$('form table table').not(':has(select)');
form table table selects all tables that are in form table, then we excludes items that has a select element

$('form table table').each(function(){
if($(this).find('select').size()==0){
//do something
}
});
another way to do it.

Related

jQuery selector does not work in dynamically inserted data

I have a problem selecting an element from the html throght jQuery. It could be maybe the fact that the element i am trying to access is dynamically insterted throught getJson, but of course before executing the following js.
What can be the problem and how can be solved?
<table id="myTable">
<tbody>
<!-- inserted with getJson -->
<tr>
<td> <input type='checkbox' id="myInput0"> </td>
<td class="myClass">some text</td>
</tr>
<!-- other rows -->
</tbody>
</table>
var id = "myInput" + 0;
var text = $("#"+id).closest('tr').find('td.myClass').text();
alert(text)
I tried to recreate the scenario using getJSON and inserting an element dynamically, then you can do something like this:
$( document ).ready(function() {
const url = 'https://jsonplaceholder.typicode.com/todos/1';
$.getJSON( url, function( data ) {
$('#main').append(data.title);
});
});
codepen
hope it helps :)
Take a look at this Stack Overflow Q&A - How do I attach events to dynamic HTML elements with jQuery? - there are a few approaches you can take, but the jest of it is that you need to bind to the body or container of your element rather than the element itself.
Welcome to the community user21! Hopefully that info is helpful.

jquery direct id selection doesnt work, tag[id] selection does work [duplicate]

This question already has answers here:
Handling colon in element ID with jQuery
(9 answers)
Closed 4 years ago.
I am very confused by how the jQuery id-selector works with my html.
Using the $('#id') selector, the jQuery Object doesn't contain the DOM Element I want, using the $('tag[id="id"]') selector somehow works though.
Can somebody explain why the former doesn't work but the latter does?
console.log($('#1_9:15')[0]);
console.log($('div[id="1_9:15"]')[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Monday</th>
<td>
<div id="1_9:15">FREE</div>
</td>
</tr>
</tbody>
</table>
: has a special meaning in jQuery selectors. For example, to select all the animated elements, you can do a $(":animated"). That's why you need to escape it:
console.log($('#1_9\\:15')[0]);
console.log($('div[id="1_9:15"]')[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Monday</th>
<td>
<div id="1_9:15">FREE</div>
</td>
</tr>
</tbody>
</table>
You're using an id that contains a colon :, which is how pseudo-classes and jQuery extensions are identified. In order for the selector engine to treat it as an id, you must escape it using \\.
When using [id="1_9:15"] you don't have the same problem because the id is enclosed in brackets and it's easy to identify.
Example:
/* Select the div by id escaping the colon. */
console.log($('#1_9\\:15')[0]);
/* Select the div using by id 'the attribute way'. */
console.log($('div[id="1_9:15"]')[0]);
/* Select the div using a pseudo-class. */
console.log($('div:first-child')[0]);
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Monday</th>
<td>
<div id="1_9:15">FREE</div>
</td>
</tr>
</tbody>
</table>

How do I find the ID of an element that was clicked? [duplicate]

This question already has answers here:
Getting the ID of the element that fired an event
(24 answers)
Closed 5 years ago.
Say I have an many html elements, a row in a table composed of table data (<td>) tags.
<td id="data1">foo</td>
<td id="data2">bar</td>
<td id="data3">baz</td>
How would I return the id of the td that was clicked. I know that I should make them links so that I can click on them properly, but just for this case I don't want to put links.
$("td").click(function () {
id = //The ID finder goes here
clickFunction(id)
}
I was thinking this is how it would be formatted. JQuery would attach an onclick event listener to any table data tags and when it fired, a function would run with the id of the table data element that was clicked.
Use this code: $(this).attr('id').
Simply, this.id:
$("td").click(function() {
console.log(this.id)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="data1">foo</td>
<td id="data2">bar</td>
<td id="data3">baz</td>
</tr>
</table>

Jquery effects from c#

I am wondering if there is any code, dll that allows developer to give effects to server control from code behind. I have a empty div and two TextBoxes to select dates in kinda leave application form. When user select two values say 11-Oct-2014 and 14-Oct-2014 in those TextBoxes then I want to append html table markup to that empty div and it will consist number of tr equal to days of leave. I am doing it in AJAX UpdatePanel and and showing that on form. It's working fine but I want to know what if I want to use Jquery like FadeIn and FadeOut effect after appending table markup to div, is it possible?
This is very generic, but you can adapt it to suit...
http://jsfiddle.net/dv9a0ubw/1/
html
<button id="add-row">add a row</button>
<br />
<br />
<table id="my-table">
<tr>
<td>something 1</td>
<td>something 2</td>
<td>something 3</td>
</tr>
</table>
javascript
$("#my-table").on("DOMSubtreeModified", function() {
$(this).find("tr:last").hide().fadeIn(2000);
});
$("#add-row").on("click", function() {
var $row = $("<tr><td>new 1</td><td>new 2</td><td>new 3</td></tr>");
$("#my-table").append($row);
});
As you can see, the button simply adds a row and that's it. The animation is applied by the event handler detecting a change in the table. You can retro-fit this to any table by modifying the table selector, using a class if you mean to use it in multiple instances.

Deleting Row of Table based on div id using JavaScript

Really need your help.
I have a table that can dynamically add and delete row. But the problem is I want to delete the row of the table based on div id. I mean, on one column for every row of table i have div id which are auto increment. Then, I want to delete the row based on the div id. Is that possible?
Thanks a lot.
You can do this really easy with jQuery.
http://jsfiddle.net/KWPWr/1/
$('#d2').closest('tr').remove();
Yes.
$('#row-id').closest('tr').fadeOut(200, function() { $(this).remove(); });
The above will first select the div, then find the table row it exists in, fades it out and the removes it.
If your table looks like this:
<table>
<tbody>
<tr>
<td>
<div id="01"></div>
</td>
</tr>
<tr>
<td>
<div id="02"></div>
</td>
</tr>
</tbody>
</table>
You can use document.getElementById(DIVID).parentNode.parentNode to access the <tr> Element.

Categories