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");
Related
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'));
How do I disable click on all grid cells except one cell in a row? I am trying to disable clicks on any cell in the grid, when a cell enters the edit mode. So I tried:
$('#QCStatus tr td').bind('click',function() {
return false;
});
//QCStatus is the id of the grid
To enable click on a cell, in the same row that is being edited, I tried:
$('#QCStatus tr.selected-row td[aria-describedby="QCStatus_ActionIcons"]').bind('click',function() {
return true;
});
But this doesn't have any effect as click is disabled by the first snippet. What is the correct way to achieve this?
You can exclude the selected row it with :not() here:
$('#QCStatus tr:not(.selected) td').on('click', function(e) {
$('pre').prepend('event :::: '+e.type+'\n');
return false;
});
.selected{background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='QCStatus'>
<tr><td>click</td></tr>
<tr class='selected'><td>click</td></tr>
<tr><td>click</td></tr>
<tr><td>click</td></tr>
</table>
<pre></pre>
This will bind the click on all the tds which are not the children of tr.selected.
As per your comment you can add more:
How could I just exclude the td in the selected row td[aria-describedby="QCStatus_ActionIcons"]?
$('#QCStatus tr:not(.selected) td:not([aria-describedby="QCStatus_ActionIcons"])').on('click', function(e) {
$('pre').prepend('event :::: '+e.type+'\n');
return false;
});
Use event.stoppropagation() for element to be eliminated for click event. It prevents further propagation of the current event.
$('tr').on('click', function() {
console.log('clicked!');
});
$('.disabled').on('click', function(e) {
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="1">
<tr>
<td>Hello</td>
<td class="disabled">Disabled</td>
</tr>
<tr>
<td>Hello</td>
<td class="disabled">Disabled</td>
</tr>
<tr>
<td>Hello</td>
<td class="disabled">Disabled</td>
</tr>
</table>
Fiddle here
add a "disabled" attribute to those buttons where you want to disable the click.
for a div disabled attribute doesn't work.
in those cases use "pointer-events:none;" in your css of that particular divs.
I can't get this one to work and I can't find any similar question that does the same what I want.
I have a table with rows like this:
<div class="gui-table">
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><p class="customfields">Size</p></td>
<td></td>
</tr>
//etc...
I want to check if all the second cells have the text "size" in it! If so then hide the third td.
So what I thought what would work is this:
$('.gui-table tr').each(function(){
if ($('td:nth-child(2) .customfields:contains("Size")').length > 0) {
$(this).css('visibillity', 'hidden');
}
});
This doesn't work! Does anybody see what is wrong with this?
Just do:
$('.gui-table .customfields:contains("Size")').css('visibility', 'hidden');
Fiddle: http://jsfiddle.net/cfmrngcc/2/
Assuming I understand your question correctly the following should do it:
$('.gui-table p.customfields:contains("Size")').parent().next().hide();
td { border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gui-table">
<table>
<tr>
<td></td>
<td></td>
<td>Shown</td>
</tr>
<tr>
<td></td>
<td><p class="customfields">Size</p></td>
<td>Hidden</td>
</tr>
</table>
</div>
This will hide the next table cell after any table cell containing a p tag with the text Size.
It works by finding the P tags containing size inside the gui-table - $('.gui-table p.customfields:contains("Size")')
Then using .parent() to select it's parent table cell.
And finally .next() and .hide() to select the next table cell and hide it.
I banged around on this and came up with this JSFiddle that should get you going again. The essential function is much like you started with but modified like this:
function doItNow(e)
{
$('.gui-table tr').each(function ()
{
$('td:nth-child(2) .customfields:contains("Size")').each(function ()
{
$(this).parents('tr').children('td:nth-child(3)').css('visibility', 'hidden');
});
});
}
Note that the inner each() is passing the paragraph element and not the cell element. So I traversed up the parents() chain until I find the row and hide the 3rd child. You might be able to code this without the inner each but I am too lazy to be that complicated!
If you only want to hide the third column, when there is the word 'size' in the second one you can do this in that way:
$('.gui-table td:nth-child(2):contains("Size")').next().css('visibility', 'hidden');
Here is a jsfiddle:
http://jsfiddle.net/0qczvak5/
The explanation:
Select all elements with the class name .gui-table, select all second tds with td:nth-child(2), filter them with :contains("Size"). Now you have all second tds with the word "Size" and with .next() you get the following cell (the third one) and you hide it with .css('visibility', 'hidden').
$(".gui-table tr td:nth-child(2)").each(
function (index,tag){
if ($(tag).find("p").text() == "Size")
$(tag).css('visibility', 'hidden');
}
)
This is will work .
Sample Html(This only contains one of many more row).
<table id="ctl00_ContentPlaceHolder1_categoryTable" class="categoryTable sortAsc editInputs" border="0">
<tbody>
<tr>
<td>8</td>
<td>
<input name="ctl00$ContentPlaceHolder1$ctl17" type="text" value="307349_335692806541952_16061425_n.jpg" readonly="readonly" />
</td>
<td><input name="ctl00$ContentPlaceHolder1$ctl18" type="text" value="key1 " readonly="readonly" /></td>
<td>3/28/2013</td>
<td>.jpg</td>
<td>28120</td>
<td>307349_335692806541952_16061425_n.jpg</td>
<td>
Edit DeleteUpdate Cancel
</td>
<tr>
</tbody>
My Javascript
$(document).ready(function () {
console.log("document ready")
$(".categoryTable tr td a").click (function (event) {
console.log($(this).text() + "click detected");
if ($(this).text() === "Edit ") {//compare with "Edit " not "Edit"
console.log("Edit");
console.log($(this).parent().parent().children('td input').text());
$(this).siblings(".deletetLinkClass").attr("style", "display:none");
$(this).siblings(".updateLinkClass").attr("style", "display:;");
$(this).siblings(".cancelLinkClass").attr("style", "display:;");
$(this).attr("style", "display:none")
}
else
console.log("no EDit");
});
});
What i am trying to do is select the input tags in the same row tr but different td on click of an anchor tag in the same row. I have tried a lot of combinations of the following jQuery statement with no success. Please Help.
$(this).parent().parent().children('td input').text() Here this represents the clicked anchor tag. To be more clear i don't want to select all the input tags in the table, just the ones in the same row.
using parents() and find().
and to get the value of input, use val() and not text() ..
$(this).parent().parent().children('td input').text();
//--^^^^^^---here
try this
var inputs=$(this).parents('tr').find('input');
$.each(inputs,function(){ //<---- loop since you have multiple input
console.log($(this).val()); //.val() since val() is used to get the input value..
})
or using closest()and find().
var inputs=$(this).closest('tr').find('input');
using context
var inputs = $('td input', $(this).closest('tr')).val();
working fiddle here
You can do it this way:
$('td input', $(this).closest('tr')).val();
Try below code to find input from given row
$(this).closest('tr').find('td input').text()
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()); });