I have a table with two links in each row, like this:
<table class="list">
...
<td>
756
</td>
<td>
some link
</td>
<td>some text</td>
<td>some more text</td>
...
</table>
The first link always has an ID, which starts with the same characters, followed by a random number. The second link does not have an ID. I would like to get the inner html of the first link when either link is clicked.
Demo here: http://codepen.io/sol_b/pen/XNqOgN
I have tried a few things using Jquery. This is what I have so far:
$('.list').find("a").click(function(){
$(this).each(function(){
if ($(this).attr('id') !=undefined) {
var number = $(this).html();
alert (number);
} else if ($(this).attr('id') == undefined) {
var number = $(this).prev('a').html();
alert (number);
}
})
});
This works for the first link, however it returns undefined for the second. I'm not sure why using .prev isn't working.
Any help much appreciated!
(note that I'm unable to change the HTML structure)
Do a single click event, go to the parent tr find the link with the id starting with "abcdefg", get the text
$('.list tr a').click(function(){
var text = $(this).closest('tr').find('a[id^="abcdefg"]').text();
console.log(text)
});
the demo: http://codepen.io/anon/pen/qqKrjE?editors=1111
Just use $('.list tr td a').first().html() to get the first link of the table.
So, that's all you need:
$(function(){
$('.list').find("a").click(function(){
if ($(this).attr('id') !=undefined) {//Links with id (1st column)
var number = $(this).html();//Get clicked link
alert (number);
} else if ($(this).attr('id') == undefined) {//Links with no id (2nd column)
var number = $('.list tr td a').first().html();//Get first link
alert (number);
}
});
})
.prev() returns previous adjacent sibling. If no previous sibling exists, or if the previous sibling element does not match a supplied selector, an empty jQuery object is returned.
In ur case changing .prev() to .parent().prev().children() will help.
http://codepen.io/anon/pen/XNYMNG?editors=1010
Your code will work with follow code,
$(function(){
$('.list').find("a").click(function(){
$(this).each(function(){
if ($(this).attr('id') !=undefined) {
var number = $(this).html();
alert (number);
} else if ($(this).attr('id') == undefined) {
//Little bit change here
var number = $(this).parent().prev().find('a').html();
alert (number);
}
})
});
})
When a link is clicked, you should go to the parent "tr", then select the first link in it, like this :
$(this).closest('tr').find('a').eq(0);
That way you'll always have the first link in the row you clicked.
try something like this -
$(document).ready(function () {
$('.list').find("a").click(function () {
if (this.id == "") {
alert(($($($($(this).parent()[0]).parent()[0]).children()[0]).children()[0]).innerHTML)
}
});
});
Related
I have the following code below... It takes a search field, and quickly searches the table for matching items, and hides all the other results. Right now this code works for a single search field (with class .search), and a single table (with id #SearchableTbl).
$(document).ready(function(){
$('.search').on('keyup',function(){
var searchTerm = $(this).val().toLowerCase();
$('#SearchableTbl tbody tr').each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) === -1){
$(this).hide();
}else{
$(this).show();
}
});
});
});
I don't know javascript, so I'm not sure how to make this function work for multiple tables. So, if the first search field was .search1 (and not just .search), and the second was .search2. And, the tables being searched were #SearchableTbl1 and #SearchableTbl2 (respectively).
Can someone help me modify the code so this works with many (not just 2) tables? As I said, I don't know javascript (but I do know a little PHP), so I'm trying to do something like this (below is a mish-mash of PHP and Javascript, which definitely wont work, but should get my point across) ....
$(document).ready(function(){
for($var=1; $var<10; $var++;) {
$('.search($var)').on('keyup',function(){
var searchTerm = $(this).val().toLowerCase();
$('#SearchableTbl($var) tbody tr').each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) === -1){
$(this).hide();
}else{
$(this).show();
}
});
});
}
});
Thanks!
With jQuery it depends on your dom structure, so wrap the table and search input (or anything else for that "data table" component) in a div, then the simple fact you're inputting into a specific input you can use that to find the parent element then find() the table.
$(document).ready(function(){
$('.data-table input').on('keyup',function(){
// find the parent
var parent = $(this).closest('.data-table')
var searchTerm = $(this).val().toLowerCase();
$(parent).find('table tbody tr').each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) === -1){
$(this).hide();
}else{
$(this).show();
}
});
});
});
<div class="data-table">
<input type="text"/>
<table>
...
<table>
</div>
I have the following html code like
<td>
<input type='text' class='input_text' name='subject_text_".$i."[]' style ='height: 25px;'/>
</td>
<td>
<input type='file' id='file' class='input_file' name='subject_".$i."[]'/>
</td>
When I change the file I need to add the required property to the input text. I tried but I've not achieved it. I used the below code:
function input_file(){
var file_name = $(this).val();
if (file_name !='') {
alert('file is selected');
var class_name = $(this).attr('class');
var value = $('.' + class_name).prev('td input.class');
$('.value').prop('required',true);
} else {
alert('file not selected');
}
}
$(document).on('change', '.input_file', $(this), input_file);
The first issue is that the syntax of your delegate event handler is incorrect; there should be no $(this) in that call. Secondly the DOM traversal you're using isn't quite right. The td is a sibling of a parent to the file input, so prev() alone won't work. Finally the logic you use can be shortened just by setting the property to whether or not a file is selected. Try this:
function input_file() {
$(this).closest('td').prev('td').find('input').prop('required', $(this).val() != '');
}
$(document).on('change', '.input_file', input_file);
Working example
find selector will not work inside prev selector argument. Here is what you need to do:
1) You need to first traverse to parent td. by using .closest('td') or .parent()
2) then to its previous sibling td . using .prev()
3) and then find required input element in it. using .find('input.class'):
function input_file(){
var file_name =$(this).val();
var inputclass =$(this)closest('td').prev('td').find(' input.class');
if(file_name !=''){
alert('file is selected');
// code for file selected condition
inputclass.prop('required',true);
}else{
alert('file not selected');
// code for file not selected condition
inputclass.prop('required',false);
}
}
I have the following jquery function. It will only update the first row and then stops. Strangely though if i take out the line:
$("#prev_loan_approval_date").html("Not Yet Approved");
and replace it with an alert it fires off for each row. Is there any reason why this would be the case. Was thinking it mightnt return true on the next iteration because i changed the text value but this was for the previous row so the next row should still return true and change the value.
$(document).ready(function() {
$('.loan_history_application > tbody > tr').each(function()
{
if ($("#prev_loan_approval_date").text() == "01/01/1900")
{
$("#prev_loan_approval_date").html("Not Yet Approved");
};
});
tr has a child "#prev_loan_approval_date"?
If yes, you must write
$(document).ready(function() {
$('.loan_history_application > tbody > tr').each(function()
{
if ($(this).find("#prev_loan_approval_date").text() == "01/01/1900")
{
$(this).find("#prev_loan_approval_date").html("Not Yet Approved");
};
});
The problem is likely to be that you use an ID instead of class for $("#prev_loan_approval_date").html("Not Yet Approved"); so it will only update the first row.
Change this to:
$(".prev_loan_approval_date").html("Not Yet Approved");
And make sure you also change ID to class in your HTML.
Was thinking it mightnt return true on the next iteration because i changed the text value but this was for the previous row
No, this isn't for the previous row. There's several things wrong here. Firstly the fact that you're using an ID for something that seems to occur more than once (ID's must be unique). You should use a class.
Secondly, where you're changing the text - you're not doing it just for that row. You're always doing it on every row.
$(document).ready(function() {
$('.loan_history_application > tbody > tr').each(function() {
if ($(".prev_loan_approval_date", this).text() == "01/01/1900")
{
$(".prev_loan_approval_date",this).html("Not Yet Approved");
};
});
And in your HTML change id='prev_load_approval_date' to class='prev_loan_approval_date'
If you have multiple items with the same ID, it doesn't work. IDs should be unique. Change them to class and change in your code:
$(".prev_loan_approval_date").html("Not Yet Approved");
Full Code:
$(document).ready(function() {
$('.loan_history_application > tbody > tr').each(function() {
if ($(this).find(".prev_loan_approval_date").text() == "01/01/1900")
$(this).find(".prev_loan_approval_date").html("Not Yet Approved");
});
});
I want to get the id of the parrent tr of the td:
In this Jsfiddle I'm getting the id the td which has been chacked; I just return this value only if one row has been checked!
but
$(this).parent().attr("id")
gives me an undefined error! What is the correct way to get the id of parrent?
Thanks
When you use $(this).parent().attr("id") what you actualy get is TBODY element, try using closest('table') or parents('table') instead to find the parent TABLE of your TR.
From your example:
$("#my_tbl").find("tr").each(function() {
if ($(this).find("td:first").hasClass('checked'))
{
count = count + 1;
id = ($(this).closest('table').attr('id'));
// id = ($(this).parents('table').attr('id'));
}
});
Fiddle Demo
You can use:
id = $(this).attr("id");
It's because you're looping through the tr of your table using $("#my_tbl").find("tr").each( so you're already at the tr level.
So there's no need to use parent() to traverse up to the parent anymore, you just need to use $(this) to target current row tr of checked td instead.
Fiddle Demo
try with
just this works check demo
$(this).attr("id");
$(this) here is referring to tr only
Fiddle Demo
You just need to set this:
id = $(this).attr("id");
This is because you are working with currently with that tr.
First, you need to check if parent tag/node has id attribute or not. Also, you would get a better answer if you could share what's your objective and relevant HTML
use toggleClass() to switch the class
use .map() to get the ids of checked tr elemets
Try
function myFunction(element) {
$(element).find("td:first").toggleClass('checked');
}
function check() {
var ids = $("#my_tbl tr td.checked").parent().map(function () {
return this.id;
}).get();
if (ids.length > 0) {
alert(ids.join());
}
}
Demo: Fiddle
A more jQueryish solution will be is to use jQuery event handlers like
jQuery(function ($) {
$('#my_tbl tr').click(function () {
$(this).find("td:first").toggleClass('checked');
})
$('#check').click(function () {
var ids = $("#my_tbl tr td.checked").parent().map(function () {
return this.id;
}).get();
if (ids.length > 0) {
alert(ids.join());
}
})
})
Demo: Fiddle
If you want to support IE7+ only then try this
I have a list view in html which has headers and child elements. I have implemented jquery script to filter the header and child elements, but the problem is when I search the child elements, I get that specific child element with other elements in it also. The actual result should be (suppose I search "xxx" in the searchbox, the output should be the header element and the child-xxx element only which is not happening). I get the xxx result with other child element-aaa also. Please help. I have attached the jsfiddle link "My Test Fiddle"
$("#search").keyup(function(){
var SEARCHWORD = this.value;
$("#list li").each(function(){
if($(this).
text().toUpperCase().
indexOf(SEARCHWORD.toUpperCase()) >=0)
$(this).show();
else
$(this).hide();
});
});
I've modified your fiddle to include a combination of CSS and JS to accomplish what you want. One of your complications is that you want the header to show if any of the siblings match. So you cannot hide the header based on a non-match because there may be a different sibling match.
Second is that multiple siblings could potentially match. This means you can't just show/hide siblings based on a match. If both siblings match you need to show both, and any code that hides siblings could potentially hide a previous match.
I've added CSS code to do the showing/hiding based on matches and the event that the user is searching something (so clearing the box will reshow everything). Then the JS just sets or removes the 'hit' class.
#list.searching h3, #list.searching li > p { display: none }
#list.searching li > p.hit, #list.searching li.hit h3 { display: block }
The JS
var theList = $('#list');
$("#search").keyup(function(){
var SEARCHWORD = this.value;
// remove all hits each time
theList.find('.hit').removeClass('hit');
if (SEARCHWORD) {
// if a search term make sure the list is marked
theList.addClass('searching');
} else {
// remove searching mark
theList.removeClass('searching');
}
$("#list li p").each(function() {
// case-insensitive matching
if (this.innerText.toLowerCase().indexOf(SEARCHWORD.toLowerCase()) > -1) {
$(this).addClass('hit').parent().addClass('hit');
} else {
$(this).removeClass('hit');
}
})
});
Here is the updated fiddle http://jsfiddle.net/gS4AS/4/
Try this:
$("#search").keyup(function () {
var SEARCHWORD = this.value;
$("#list li").each(function () {
$(this).hide();
$('p:contains(' + SEARCHWORD + ')').closest('li').show();
$('p:contains(' + SEARCHWORD + ')').show().siblings('p').hide();
if (SEARCHWORD == "") {
$('#list').find('p:hidden').show();
}
});
});
Fiddle
You have to add this condition to show back the hidden elems:
if (SEARCHWORD == "") {
$('#list').find('p:hidden').show();
}
Updated Fiddle
As per your latest dom structure with tables and tds update to this code:
$("#search").keyup(function () {
var SEARCHWORD = this.value;
$("#list tr").each(function () {
$(this).hide();
$('td:contains(' + SEARCHWORD + ')').closest('tr').show();
if (SEARCHWORD == "") {
$('#list').find('tr:hidden').show();
}
});
});
Updated Fiddle with table structure.