How do i select those tr's which all DONT have the example.png in one of their td's? Every image has an anchor, so i thought i may select by that...
i never worked with jquery before and its quite confusing^^
$(document).ready(function(){
$("td > a").parent().parent().css("background-color","lime");
});
Here one of my tr's but with only the first anchor/image (it is already too long):
<tr bgcolor='$color'>
<td><a href='request.php?id=$requestid'>#$requestid [show request]</a></td>
<td>$generation </td>
<td>$custname </td>
<td>$platform </td>
<td>$phase </td>
<td>$tmc </td>
<td>$pcstroke </td>
<td>$scstroke </td>
<td>
<a href='myurl.php?selection=" . $flowid."' title='new'>
<img align='center' src='images/new.png'
alt='' style='width:20px; height:20px;' />
</a>
</td>
$status
<td><b>$prelease</b></td>
</tr>;
Thanks in advance.
You can use not and has
var allTrs = $("tbody tr"),
nonExample = allTrs.not(':has(img[src*="example.jpg"])');
nonExample.css("background-color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td>foo</td><td><img src="foo.jpg" alt="foo"/></td></tr>
<tr><td>example</td><td><img src="example.jpg" alt="example"/></td></tr>
<tr><td>bar</td><td><img src="bar.jpg" alt="bar"/></td></tr>
<tr><td>example</td><td><img src="example.jpg" alt="example"/></td></tr>
</tbody>
</table>
Select table's existing img, and then parent 3 times, as they are expected to be located within anchors tr>td>a>img:
$(document).ready(function(){
$images = $('table tr>td>a>img'); // Choose the right table selector
$rows = $images.closest('tr');
console.log($rows);
});
Related
I have dynamically created checkboxes inside HTML table like given in the following code. And I am trying to hide the rows whose checkbox is not checked by using below lines of code on the another button click() function.
$(document).on("click", "#allotBtn", function() {
$('#studentListBody tr [type="checkbox"]').each(function(i, chk) {
if (!chk.checked) {
$("#studentList tr:nth-child(" + i + ")").css("display", "none");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody id="studentListBody">
<tr role="row" class="odd">
<td class="centeralign hideFirstTD sorting_1">
<div class="checkbox checkbox-success ">
<input class="commoncheckbox" type="checkbox" id="studentId_-5ab87edaff24ae1204000857" name="studentId_-5ab87edaff24ae1204000857" value="5ab87edaff24ae1204000857">
<label></label>
</div>
</td>
<td class=" align-middle ">
<img alt="image" class="img-circle listProfilePicture" src="../img/studentcap.png">
</td>
<td>Raja Mir</td>
<td>7th</td>
<td>Male</td>
<td>Active</td>
<td>2016</td>
</tr>
<tr role="row" class="even">
<td class="centeralign hideFirstTD sorting_1">
<div class="checkbox checkbox-success ">
<input class="commoncheckbox" type="checkbox" id="studentId_-5ab8d5f8ff24ae120400085f" name="studentId_-5ab8d5f8ff24ae120400085f" value="5ab8d5f8ff24ae120400085f">
<label></label>
</div>
</td>
<td class=" align-middle ">
<img alt="image" class="img-circle listProfilePicture" src="../img/studentcap.png">
</td>
<td>Omer Jan</td>
<td>4th</td>
<td>Male</td>
<td>Active</td>
<td>2018</td>
</tr>
</tbody>
If there are more than 3 rows in the table, the above code hides the rows haphazardly.
Please help!!!
Try this:
$("#allotBtn").click(function(){
$('#studentListBody tr [type="checkbox"]:checked').closest("tr").hide();
});
The issue with your code is that i in the .each() loop starts indexing the elements at 0, whereas when you call nth-child in CSS, the first element is numbered as 1. Therefore the row you hide is always off by 1.
The fix is simple - add 1 to i each time you use it to set nth-child:
$(document).on("click", "#allotBtn", function () {
$('#studentListBody tr [type="checkbox"]').each(function(i, chk) {
if (!chk.checked) {
$("#studentListBody tr:nth-child("+(i+1)+")").css("display", "none");
}
});
});
Working demo: http://jsfiddle.net/jqabpru2/9/
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
https://api.jquery.com/each/
Or of course you can simplify it much more like in Viam's answer (https://stackoverflow.com/a/51762843/5947043) by finding the row which is the parent of the checkbox instead.
Again, credit to Viam, this can be done by writing
$("#allotBtn").click(function(){
$('#studentListBody tr [type="checkbox"]:checked').closest("tr").hide();
});
instead. Demo of this approach: http://jsfiddle.net/jqabpru2/10/
All you have to do is write the following code instead of your current jQuery code in a click function:
var checkList = $("tr[role='row'] .commoncheckbox");
checkList.each(function(){
$($(this).closest("tr[role='row']").hide());
if($(this).is(":checked")){
$($(this).closest("tr[role='row']").show());
}
});
Here is jsfiddle link on this.
Here is how to check a checkbox is checked or not using jQuery.
This one-liner should do it. No need for loops.
$(function() {
$(document).on("click", "#allotBtn", function() {
$('#studentListBody input[type=checkbox]:not(:checked)').closest('tr').hide();
});
});
Also, attaching the click event like this seems super strange - what exactly are you delegating the event to the document itself for anyway? Is the whole thing loaded dynamically?
So I have a box widget and a foldable widget tab that has many fields. How can I get rid of the first fields as well as other n-fields, which could be field 4 or 9 or 7th field?
<div class = "widgetPanel containerWidgetPanel foldableBox">
<div class="boxBody">
<table class="widgetTable containerWidgetTable">
<tbody>
<tr>
<td class="boldColumn containerLabel">
<td class="fieldColumn containerField">
</tr>
<tr>
<td class="boldColumn containerLabel">
<td class="fieldColumn containerField">
</tr>
<tr>
<td class="boldColumn containerLabel">
<td class="fieldColumn containerField">
</tr>
.....
</tbody>
</table>
</div>
</div>
This is what I have so far... Only for the first field...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery( "tr td" ).first().remove();
});
</script>
Any help would be appreicated! Thanks!
Use .eq() - for example to remove 4th td:
jQuery(document).ready(function() {
jQuery( "tr td" ).eq(3).remove();
});
If you want to remove both tds in first row, use this:
jQuery("tr").eq(1).find("td").remove();
I have a table on which if I click any row it is supposed to return the row "id" number.I have used closest() function.But the issue is the closest() selects all the "tr" below it. Is there any way to limit the function to traverse only one row data.
For example my table
<tr id="0">
<td>data0</td>
</tr>
<tr id="1">
<td>data1</td>
</tr>
<tr id="2">
<td>data2</td>
</tr>
<tr id="3">
<td>data3</td>
</tr>
<tr id="4">
<td>data4</td>
</tr>
If I click the third row that is id=2, it should return only that individual id and td(data2).
This is the code that I am trying as for now.
$("#myTable tr").click(function(){
trid = $(this).closest('tr').attr('id');
alert(trid);
return trid;
});
I have tried using next() or find() but I end up getting the Undefined error.Thanks.
I think you have misunderstood the concept of .closest(). It traverses up to the parents upward, while .find() traverses downwards to the children/grandchildren.
So as per your code it seems that you want to have the id of the clicked element. then you can just do this:
trid = this.id;
as in your code this refers to the tr you are clicking on.
Note:
Just noticed that you are using a global var named trid because it does not have the var keyword. So if you have accidently used it then you can add var trid like this in the above code.
$(document).on('click', 'td', function() {
var result = $(this).closest('tr').attr('id');
alert(result);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr id="0">
<td>data0</td>
</tr>
<tr id="1">
<td>data1</td>
</tr>
<tr id="2">
<td>data2</td>
</tr>
<tr id="3">
<td>data3</td>
</tr>
<tr id="4">
<td>data4</td>
</tr>
</table>
Try this
$("#myTable tr").click(function(){
trid = $(this).attr('id');
alert(trid);
//if you want to get to the td of it
var tdVal = $(this).find('td').html();
});
by clicking on tr, you do not need to use .closest() to access its id, just get its id using the .attr('id')or .prop('id') or even simply .id as follows:
$("#myTable tr").click(function(){
trid = $(this).attr('id');
alert(trid);
});
new_Url:
<td class="posts column-posts">2</td>
old_url:
<span class="view">View</span>
I want to replace the old url by new_url..
var new_url = $("td.column-posts").find("a").attr('href');
$("span.view").find("a").attr('href',new_url)
I can't get the value of new_url.
PLease help. Thanks
Here's the complete structure for New_url:
<tbody id="the-list" data-wp-lists="list:tag">
<tr id="tag-7" class="alternate">
<td class="posts column-posts">1</td>
</tr>
</tbody>
You can do like this, just make the ids for links:
$('#2').attr('href', $('#1').attr('href'));
Here is fiddle. http://jsfiddle.net/Goodluck/PasNk/1/
Enclose tbody inside table tag
<table>
<tbody id="the-list" data-wp-lists="list:tag">
<tr id="tag-7" class="alternate">
<td class="posts column-posts">1
</td>
</tr>
</tbody>
</table>
Working Fiddle
If there is only one td with class column-posts
var new_url = $("td.column-posts a").attr('href');
$("span.view a").attr('href',new_url)
If there is multiple .column-posts td then you have to write in each like
$("td.column-posts a").each(function(){
$("span.view a").attr('href',new_url) //you have to map each span to each a
})
I have the following table structure in my code
<tr>
<td>Text 1 </td>
<td>Text 2 </td>
<td> <span class="edit" onclick="EditAccountInfo(id1)" /> </td>
</tr>
<tr>
<td>Text 1 </td>
<td>Text 2 </td>
<td> <span class="edit" onclick="EditAccountInfo(id2)" /> </td>
</tr>
On clicking the span in the <td>, I want to highlight the selected row (<tr>). I am using the following code in the javascript function
function EditAccountInfo(id)
{
$(this).closest('tr').css("background-color", "red");
}
I am not getting any errors and $(this).closest('tr') returns a valid object, but the background color style is not getting applied to the <tr>.
What am i doing wrong?
this is the window because you're using inline event handlers. I would recommend a more unobtrusive approach:
<span class="edit" data-account-id="id1" />
$(document).on('click', '.edit', function() {
var $tr = $(this).closest('tr');
var id = $(this).data('account-id');
//...
});
$('#my-table').on('click', '.edit', function () {
$(this).closest('tr').css('backgroundColor','red');
});
Try
$(document).ready(function () {
$('td').click(function(){
$(this).parent().css("background","red");
});
});