how to get the id attribute of <td> from <tr> in jQuery? - javascript

please help me with this.
instead of looping for ..do we have anything like get the id of first td or second one ?
example :
"<tr class='test_point' id="+fileName+"><td><img src='"+ROOT_PATH+"/assets/diamond.png' /><td class='test_point_name' id="+test_point_id+">"+test_point
+"</td></tr>"
fetching the tr by ID here
$(#fileName).each(function( index ){
console.log( index + ": " + $(this).text() );
//console.log("id_value: "+$(this).attr('id'));
console.log("test_value: "+ $(this).find('td').attr('id'))
}

To get id of an item by its index, use this.
Demo
$('#fileName').find('td')[0].id;
Where [0] means first, [1] second...and so on.

Your selector for the each statement is a bit off. You're missing quotes:
$("#fileName").each(function( index ){
Or maybe you wanted to use the variable fileName
$("#" + fileName).each(function( index ){
In any case, ID's should be unique. Im guessing you want to use your trs class:
$(".test_point").each(function( index ){

$('#your-tr-id-here').each(function() {
$(this).children('td').each(function() {
console.log('td ID: ' + $(this).attr('id'));
});
});

Related

How to find the Div elements along with the input elements through jquery selector string

The queryString to find all the input elements with ID ends with '-0', '-1' etc ..
the below code works fine
var queryString = ':input:focusable[id$="-' + index + '"]';
I also want to find the div elements ending with the same scenario .. How i can change the query ??
You can use comma to add additional selectors:
var queryString = ':input:focusable[id$="-' + index + '"],div[id$="-' + index + '"]';
make it
var queryString = ':input:focusable[id$="-' + index + '"], div[id$="-' + index + '"]';
Using comma , you can add selectors to the same query string.
Edit
but the select element am having present inside the div element and
the div element has the ID
try this
var queryString = 'div[id$="-' + index + '"]:input:focusable';

Jquery find with multiple matches

I'm using Jquery to find the users email in my site, but I don't know how can I find a email for users with the same name.
Using this code, my variable return just one value for string.
var mail = $("#dat").contents().find("td:contains('" + name + "')" ).siblings("td").eq(1).text();
How can I get all strings that match in this find event?
Thanks!
EDIT: My code don't have any HTML markup for data, I'm using Google Spreadsheet to get the values.
Imagine there is one table with:
<tr><td>Name 1</td><td>mail1</td></tr>
<tr><td>Name 2</td><td>mail2</td></tr>
<tr><td>Name 1</td><td>mail3</td></tr>
If I use find containing "Name 1", my variable should return mail1, mail3.
To get the second column of all matching rows, use nth-child.
To get all values in an array, you can use map() and get()
var name = 'Name 1';
var mail = $("#dat").contents()
.find("td:contains('" + name + "')" )
.siblings("td:nth-child(2)")
.map(function() {
return $(this).text();
}).get()
document.body.innerHTML = '<pre>' + JSON.stringify(mail, 0, 4) + '</pre>';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dat">
<tr><td>Name 1</td><td>mail1</td></tr>
<tr><td>Name 2</td><td>mail2</td></tr>
<tr><td>Name 1</td><td>mail3</td></tr>
</table>
The query for find could be more specific as well, that way using siblings wouldn't be neccessary
var mail = $("#dat").contents()
.find("tr:has(td:contains('" + name + "')) td:nth-child(2)" )
.map(function() {
return $(this).text();
}).get()
You should change you code a little, to:
mail = $("#dat").contents().find("td:contains('" + name + "')" ).next().text();
Check demo - Fiddle

Append to end of a div through Jquery

I have this div which has a table and i want to add a row to that table dynamically based on a scenario. how this can be done with jquery ?
<div style="margin-bottom: 4px;" id="div_outgoing_call_dates_rows">
<table id="tbl_dynamic_call_dates">
<tbody><tr><td>Appointment date</td><td>Client time window</td></tr>
<tr id="client_app_0"><td>04/10/2013</td><td><select name="CSSAtapsClient[client_time_window_arr][0]" id="client_time_window_0">undefined<option value="5702">07am - 10am</option><option value="5703">10am - 1pm</option><option value="5704">12pm - 3pm</option><option value="5705">03pm - 06pm</option><option value="5706">06pm - 09pm</option><option value="5707">07pm - 10pm</option><option value="5708">09pm - 12am</option><option value="5709">12am - 7am</option></select></td>
</tr>
</tbody>
</table>
</div>
I tried this and it didint work at last row instead adds inside the div and old contents gets cleared.
$("#div_outgoing_call_dates_rows").append(dynamicRow);
Appreciate an early response.
Fiddle Here
EDIT 2
$.each(array,function(i){
if($("#client_app_tr_" + array[i]).length == 0) {
console.log("yes not exisit so adding a new one");
dynamicRow += "<tr id=\'client_app_tr_" + array[i] + "\'><td>" + array[i] + "</td><td>" + "<select id=\'client_time_window_" + i + "\' name=\'CSSAtapsClient[client_time_window_arr][" + i + "]\'>" + dynamicDD + "</select>" + "</td></tr>";
}
});
I have tr id's like this -> client_app_tr_07/10/2013, client_app_tr_08/10/2013, client_app_tr_09/10/2013 ... so if that id is not there i need to add a new row. it doesnt work because the way i am checking it always goes inside this loop. if($("#client_app_tr_" + array[i]).length == 0) {}
EDIT 3
This also doesnt seem to be working. i must be missing something or isnt there any way to check weather a element id exisit or not in jquery ?
if($("#client_app_tr_" + array[i])[0] !== true) {}
Try this, this will help you.
var old_item =$('#div_outgoing_call_dates_rows').html();
old_item=old_item+'New Content';
$('#div_outgoing_call_dates_rows').append(old_item);
Fiddle here.
div_outgoing_call_dates_rows is the div element, you need to append the row to the table inside the div, so use the descendant-selector
$("#div_outgoing_call_dates_rows table").append(dynamicRow);
You must select table in order to append a dynamic row, so change selector:
$("#div_outgoing_call_dates_rows table").append(dynamicRow);

how to append the data using jquery?

I need to add the value into the span using dom. But now i am using string manipulation. how to change this into the dom or append the value . i need to get the return value in html formate using dom.
Define layer.id as some text and this will get replace in all span element content
$.each($("span"),function(){
$(this).html(layer.id);
});
Thanks
You can append like following :
$('.ClassName').append('<p>Test</p>');
$('#id').after('<p>Test</p>');
$('#id').before('<p>Test</p>');
Try with this:
$("<li class='" + liClass + "'>" + preElement +
"<label for='" + layer.id + "'>" + layer.name + "</label>").appendTo('ul.class');
//----------^^^^^
// use the id
// or class of
//the specific ul
use appendTo() instead return and append it to your element.
(as i see you are returning li then append it to the ul)

Removing rows that do not contain search-term with jQuery

I'm using the following JQuery to filter rows on a datatable, which works fine...
yuiDtFilter = function(tableDivId, filter) {
//custom jQuery function defines case-insensitive fn:Contains, use default fn:contains for case-sensitive search
jQuery.expr[':'].Contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
$("#" + tableDivId + " .yui-dt-data").find('tr').hide();
$("#" + tableDivId + " .yui-dt-data").find('td:Contains("' + filter + '")').parents('tr').show();
}
However I have a need for the filter work in the opposite way. I need it to remove rows that don't match the search terms.
I've found out that I need to use 'not()', but I've spent most of the day in vain trying to get it to work (using every example I can find).
I've tried many variations of -
$("#" + tableDivId + " .yui-dt-data")
.find(:not(('td:Contains("' + filter + '")'))
.parents('tr').remove();
Could anyone give me a hand using my code as a starting point?
Try
$("#" + tableDivId + " .yui-dt-data").find('td').not(':contains("' + filter + '")').parents('tr').remove();
or
$("#" + tableDivId + " .yui-dt-data").find( 'td:not(:contains("' + filter + '"))' ).parents('tr').remove()
Remove row from HTML table that doesn't contains specific text or string using jquery.
Note: If there are only two column in HTML table, we can use "last-child" attribute to find.
*$(document).ready(function(){
$("#tabledata tbody .mainTR").each(function(){
var lastTD = $(this).find("td:last-child");
var lastTdText = lastTD.text().trim();
if(!lastTdText.includes("DrivePilot")){
$(this).remove();
}
});
});
Note: If there are more than two column in HTML table, we can use "nth-child(2)" attribute to find.
Passing column index with "nth-child(column index)"
$(document).ready(function(){
$("#tabledata tbody .mainTR").each(function(){
var lastTD = $(this).find("td:nth-child(2)");
var lastTdText = lastTD.text().trim();
if(!lastTdText.includes("DrivePilot")){
$(this).remove();
}
});
});
Note: "DrivePilot" is nothing but text or string

Categories