Can't manage to target an element in jQuery - javascript

I'm trying to target a parent from a link with a jQuery function, at first to get its innerHtml but now, just to get its value.
However, I can't manage to track it and I've been putting way too much time on this simple problem.
Here's my html :
<table>
<tr>
<td title="td_title_1" value="td_value_1">Some textElement_1</td>
<td title="td_title_2" value="td_value_2">Some other textElement_2</td>
</tr>
</table>
And my jQuery:
$(function(){
$("*").on('click','a[title="Copy"]',function(){
var clipboard = $(this).parent('td').find('[title="td_title1"]').val();
alert(clipboard);
});
});
I tried parent(), parents(), closest()... I'm still getting "undefined" value. And yeah, the jQuery lib is added.
Also, how would you get the "Some text" part?
Thanks for your time.

value is not a valid property for td or anything else but input. You had to use data-value to be correct.
HTML:
<table>
<tr>
<td title="td_title_1" data-value="td_value_1">Some textElement_1</td>
<td title="td_title_2" data-value="td_value_2">Some other textElement_2</td>
</tr>
</table>
JS:
$(function(){
$(document).on('click','a[title="Copy"]', function(){
var clipboard = $(this).parent().data('value');
alert(clipboard);
});
});
* (star selector) is a tricky selector. Do not use it in every purpose.

The first thing is you need to use stopPropagation() so that it works only for the element you desire and the next thing is you can use the simple way to clone the element so that you get only the text part of <td> element that is the immediate parent of the clicked element.
$(function() {
$("*").on('click', 'a[title="Copy"]', function(e) {
var clipboard = $(this).parent('td')
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
alert(clipboard);
e.stopPropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td title="td_title_1" value="td_value_1">Some textElement_1</td>
<td title="td_title_2" value="td_value_2">Some other textElement_2</td>
</tr>
</table>

Simply use $(this).parent().attr('value');
$(function(){
$(document).on('click','a[title="Copy"]',function(e){
var clipboard = $(this).parent().attr('value');
alert(clipboard);
e.stopPropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td title="td_title_1" value="td_value_1">Some textElement_1</td>
<td title="td_title_2" value="td_value_2">Some other textElement_2</td>
</tr>
</table>

$(function(){
$("*").on('click','a[title="Copy"]',function(){
var clipboard = $(this).parent('td').filter('[title="td_title1"]').attr('value');
alert(clipboard);
});
});
You should try with filter. Find function is for finding children, your intent is to filter the tds based on the criteria, and also change the val to .attr('value'), since .val is only for inputs only, but to read any attribute use attr

try
alert($(this).parent('td').attr('value'));

Related

I see a attribute in dom <td> element, but unable to retrieve that in jQuery

I am trying to get the value width="25%" from <td valign="top" width="25%">, I am starting from a descendant location way below the <td>. Possibly there might be more <td> elements between my target <td valign="top" width="25%">. But I simply cannot get 25%from the below.
I have tried:
var prts = jQuery('.someClassWayBelow').parents('td');
jQuery.each (prts, function () { var css = prts.width(); console.log(css)});
jQuery.each (prts, function () { var css = prts.attr("width"); console.log(css)})
I get 664px or 664 or undefined, how do I get a return of 25%?
Appreciate in advance.
$(document).ready(function(){console.log($("div").attr('width')); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div width="25%"> </div>
Once I made the element under consideration to jQuery object using $ (this), I was able to access methods like attr()

How to get an ID from TD's inside TR? jQuery

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'));
});

onclick is set for <tr> How to disable for one <td>

Suppose onclick handler is set for a <tr> is it possible to disable/overwrite it for one particular <td>?
<tr onclick='somefunction()'>
<td> </td> <!--onclick should work here-->
...
<td> </td> <!--onclick should not work here-->
...
<td> </td> <!--onclick should work here-->
</tr>
Of course I can set it for each <td> separately or pass the name of a td to the function and decide what to do based on this name, but it seems like there should be a simpler solution.
I found the easiest was to stop the event being passed to the parent html using onclick=event.stopPropagation() in the <td> tag.
So <td class=whatever onclick=event.stopPropagation()>cell data<td>
In somefunction you could check the cellIndex of the td, and return early, if a non-clickable cell has been clicked. Something like this:
function somefunction (e) {
if (e.target.cellIndex === 1) {return;}
/* Do something, the td is clickable */
}
To get this work with an inline handler, you've to pass the event object:
<tr onclick='somefunction(event)'>
A live demo at jsFiddle.
Things will get a bit more complex, if you've elements within cells. In that case you have to find a td parent element, like so:
function somefunction (e) {
var target = e.target; // Cache the target element
while (target) { // Iterate through elements
if (target.tagName === 'TD') { // TD found, stop iteration
break;
}
target = target.parentElement; // Set target as a parent element of the current element
}
if (target === null) {return;} // Check that we really have a TD
if (target.cellIndex === 1) {return;} // A non-clickable cell clicked
:
}
A live demo at jsFiddle.
Edit 2018
In 2018 elements have closest() method, hence the loop above is not needed, target = e.target.closest('td') will make sure a td is used.
A very simple way would be to use CSS pointer-events: none, but unfortunately this doesn't work in FF in this particular case in IE<11 at all, though works well in Chrome and IE11. Also preventing pointer events would be bad, if the cell happens to contain interactive elements.
A live demo at jsFiddle.
EDIT:-
Try something like this.
HTML:
<tr id="row">
<td> </td> <!--onclick should work here-->
...
<td class="noChange"> </td> <!--onclick should not work here-->
...
<td> </td> <!--onclick should work here-->
</tr>
JavaScript:
window.onload = function() {
var row = document.getElementById("row");
for (i=0; i<row.childNodes.length; i++) {
if (row.childNodes[i].class != "noChange") {
row.childNodes[i].onclick="doStuff()";
}
}
}
<html>
<body>
<table border="1">
<tr onclick='somefunction(this)'>
<td><input type="text"></td> <!--onclick should work here--> ...
<td><input type="text"></td> <!--onclick should not work here--> ...
<td><input type="text"></td> <!--onclick should work here-->
</tr>
</table>
<script>
function somefunction(element) {
var td = element.children;
console.log(td);
var inputObj = td[1].children;
console.log(inputObj[0]);
inputObj[0].disabled = true;
}
</script>
</body>
</html>
The children property 'element.children' returns a list of an element's child elements, as an HTMLCollection object.
enjoy :)

change the tr field in a jquery

I'm trying to change a yes to a select dropdown that allow user to select yes or no.
the html is like that:
<tr>
<td> text </td>
<td>no(must be changed by js)</td>
<td>My button</td>
</tr>
<tr>
<td> text </td>
<td>yes(must be changed by js)</td>
<td>My button</td>
</tr>
...
$('a[href="#"]').click(function() {...} });
I want to change the content of the "yes" just before the button to a dropdown list AND the value of the href of the button clicked to do some treatment in back.
I tried this but it doesn't work after the alert... :
<script type="text/javascript">
//to make the authority editable
$('a[href="#"]').click(function() {
var select = this.parentElement.parentElement;
alert(select);
select: nth - child(2).apped("hello");
});
</script>
Thanks to help me :-)
You can use .parent() and .prev() traversal methods
$('a[href="#"]').click(function() {
$(this).parent().prev().html('xxx')
});
Demo: Fiddle
If you want to use :nth-child, you need to find the tr of the clicked button then use .find()
jQuery(function () {
$('a[href="#"]').click(function () {
$(this).closest('tr').find(':nth-child(2)').html('xxx')
});
})
Demo: Fiddle
If you only have two tr in your table like above HTML markup, You can use .eq() like this:
$('a[href="#"]').click(function() {
var select = this.parentElement.parentElement;
alert(select);
$('tr:eq(1) td:eq(1)').append("hello");
});
Also, you're probably looking for .text() instead of .append() to change the text inside your td:
$('tr:eq(1) td:eq(1)').text("hello");

Jquery select td value from inside another td

i've looked in the manual to search for the next value in a table but the problem is that i'm in the first span cell 'cause of the event catch by :
jQuery code:
$('span[name="checkSeleccion"]').live('click',function(){
alert($(this).attr('id')+"::"+$(this).next('td').html());
});
HTML code:
<tbody>
<tr>
<td>
<span id="606" class="checkboxClear" rel="606-null-335" name="checkSeleccion"> </span>
</td>
<td style="padding-top:6px;">http://www.hithere.com</td>
<td align="center" style="padding-top:6px;">335</td>
</tr>
</tobdy>
is there a way to catch the second td value when the span is clicked?
Thanks.
Change this:
$(this).next('td')
to this:
$(this).parent('td').next('td')
You forgot to use .parent():
$('span[name="checkSeleccion"]').live('click', function() {
alert(this.id + "::" + $(this).parent().next('td').html());
});
Also note that $(this).attr('id') could be written as just this.id, which is much more efficient (and easier to type!).
add the .parent() selector:
alert($(this).attr('id')+"::"+$(this).parent().next('td').html()); });

Categories