how to select the first td - javascript

My Html is bellow.
<tr class="success">
cfgdfgh
<td>1</td>
<td>home1</td>
<td>home1</td>
<td>home1</td>
<td>
<input class="btn btn-mini btn-danger deleteMenu" type="button" value="Delete" name="delete">fgfg</td>
</tr>
My Jquery code is bellow
$(".deleteMenu").click(function(){
$(this).parent().css("color","red");
});
I tried that using above jquery code but no luck.I want to selete first td ?
DEMO

Try:
$(".deleteMenu").click(function () {
$(this).closest('tr').find('td:first').css("color", "red");
});
jsFiddle example
With your selector, .parent(), you're selecting the cell that contains the button. One way to accomplish what you want it to traverse up the DOM to the row (.closest('tr')) and then back down to the first cell (.find('td:first')).
BTW on a side note, in your example, the text cfgdfgh isn't valid where you have it.

1) Start by writing valid HTML
2) Go up the DOM tree until u get to the row element, for that you should use .closest()
3) Find the first child of that row element
4) Apply whatever style changes you want
Fiddle: http://jsfiddle.net/u4A7V/7/
Code:
$(".deleteMenu").click(function () {
$(this).closest("tr") // go up the tree
.find("td:first-child") // find the first child
.css("color", "red"); // change color
});

It's pretty easily done this way:
$(".parentClass").find("td:eq(0)")... /* :eq(0) = first occurance */
Also your HTML Markup is erroneous.

The easiest approach would be to assign a class to the . I don't know if it's possible to assign an id to a (probably possible).

This will get the first td in the row:
$(".deleteMenu").click(function(){
$('.success td').eq(0).css("color","red");
});

Hopefull this helps:
http://jsbin.com/eruric/1/edit
$(".success").find("td:first").css("background-color", "red");

Your HTML is not valid, you lack a '' tag and you have text outside the <td>s, change it to this:
<table>
<tr class="success">
<td>1</td>
<td>home1</td>
<td>home1</td>
<td>home1</td>
<td>
<input class="btn btn-mini btn-danger deleteMenu" type="button" value="Delete" name="delete">fgfg</td>
</tr>
</table>
and then your js to:
$(".deleteMenu").click(function(){
$(this).parent().siblings(':eq(0)').css("color","red");
});
JSFiddle Demo

Here we are:
$(".deleteMenu").click(function(){
$(this).closest('tr').find('td').first().css("color","red");
});

$(".deleteMenu").parent() will choose the parent of that input, which is the TR. Also, don't include code straight in the TR, use TD or TH and put it inside. So after putting it in its own TD, you're looking for
$(".deleteMenu").click(function(){
$(this).parents("tr").find("td").first().css("color","red");
});

You can use :first-child.
I assume myTable is an Id of table
$("#myTable tr td:first-child").css("color","red");
Js Fiddle
Please change your markup as well.
tr elements can only have td no text. You have write text in tr element.

Related

jQuery finding child elements of <table>?

I am trying to execute a function for each "tr" child element of my "table" with jquery, but this code does not identify the children. I've used this code for "div" based designs before and it works perfectly if I change the "table" and "tr" tags to "div" but it doesn't run here!
This is simple design:
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
<table>
<tr align="center">
<input id="btnSearch" type="button" value="Search" />
</tr>
</table>
And this is jquery:
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch").children("tr").each(function(){
alert($(this).text);
});
});
});
jsfiddle:
Note that the alert is run just once! And I have also removed the "tr" for children in my jsfiddle to make the code runnable...
could anyone help me?
The tr elements are not children of table, the are children of tbody (or thead or tfoot). The tbody element is automatically created if you don't specify it. You can figure this out easily for yourself if you inspect the generated DOM.
Long story short, either search for all descendants, with .find
$("#tblSearch").find("tr")
// simpler:
$("#tblSearch tr")
or include tbdoy in your selector:
$("#tblSearch").children("tbody").children("tr")
// simpler:
$("#tblSearch > tbody > tr")
That being said, you also have to add the actual content inside td elements, as noted in the other answers.
If you are new to HTML and tables, read the MDN documentation.
There are 2 problems, an invalid html and the selector is wrong
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
then
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch").find(">tbody > tr").each(function () {
alert($(this).text());
});
});
});
Demo: Fiddle
Problems were:
tables automatically have tbody elements inserted into the DOM, so you should not reference TR's as children of a TABLE element.
You referenced a non-existant text property instead of the jQuery text() function.
You probably want to reference the tds anyway (and probably only a specific TD in each row), as returning the text of an entire row (TR) seldom makes sense in HTML.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/TdGKj/1/
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch td:first-child").each(function () {
alert($(this).text());
});
});
});
The #tblSearch td:first-child selector basically says: "Find the element with id=tblSearch then search for any td elements that are the first child of their parent. Note I added a second column of dummy TDs cells to the JSFiddle so you could see this in practice.
There any many selectors for choosing specific children, which will vary based on your specific needs, but that just needs a little research of jQuery selectors
You don't need to use children at all. You can just create a selector -
$('#tblSearch tr td')
WORKING DEMO - http://codepen.io/nitishdhar/pen/Aiwgm
First you need to fix your HTML structure, place the child td elements inside each tr -
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
<div>
<input id="btnSearch" type="button" value="Search"/></td>
</div>
Now you can alert each value using this javascript snippet -
$(function () {
$('#btnSearch').click(function () {
$("#tblSearch tr td").each(function(){
alert($(this).text());
});
});
});
Note - This will alert each value separately as you needed.
First of all fix up your html and add the correct tags around the cell data
Then this should do what you're wanting:
$('table#tblSearch tr').children().each(function(){
alert($(this).text());
});
You have multiple problems in the question you provided:
Your HTML is not valid; Place a td element inside each tr
Call the correct jQuery function. Instead of using children('tr'), which it won't find because there are no tr that are children to the table element (only tbody,thead, etc), you will need to call the find() jQuery function (e.g. find('td')) and from there you will be able to get the text of the cell; however, you may also be able to find tr and get text of the whole row in that case.

Extract text in table cell before input field

I have some HTML of the form:-
<table>
<tr>
<td>Text for input 1<br/><div>Lots of textual data</div><input id="field1" class="mandatory"/></td>
<td>Text for input 2<br/><input id="field2" class="mandatory"/></td?
<td>Text for input 3<br/><input id="field3"/></td>
</tr>
</table>
(but with many more fields & rows).
I'm iterating through the mandatory class and, where the input field is empty, I want to display the text preceding the <br/> but not anything else.
Using:-
$(this).parent().text();
only works up to a point because it also displays the text in the <div>
Is there a way that I can limit the text to just that before the <br/>?
I think what you are looking for is .contents()
$(this).parent().contents().eq(0).text();
Demo: Fiddle
You may update your HTML markup to keep your message in a span tag with a special css class which you can use to make your jQuery selection more easier.
<table>
<tr>
<td><span class="msg">Text for input 1</span><br/>
<div>Lots of textual data</div><input id="field1" class="mandatory"/>
</td>
</tr>
</table>
and now use the closest method to get the parent td and use the find method to get the span
$(".mandatory").each(function(index,item){
var msg=$(this).closest("td").find("span.msg").html();
//do something with msg now
});
Here is a working sample http://jsbin.com/oDUPujOl/1/
Time for some plain JS, as jQuery doesn't really play well with textnodes:
var text = this.parentNode.firstChild.nodeValue.trim();
FIDDLE
You can clone your target TD and remove the elements which are with unnecessary text. Now you easily fetch the required text from that TD. For reference please read this : .clone()
Try this one,
$("#field1").keyup(function(){
var xClone = $(this).parent().clone();
xClone.find('div').remove();
alert((xClone).text());
});
DEMO

jQuery find highest parent TD

I'm working on a code for a form contained within a table. I'm writing (with jQuery) a function to highlight the parent <td> of each <input> element. That part is simple - the code is just:
$('.myForm input').click(function(){
$(this).parent().addClass('active');
})
The more complicated part is that some text fields are inside of a second table nested within a <td> of the first table. It would look like:
<table>
<tr>
<td> <--cell I want to add the class to
<table>
<tr>
<td><input type='text'></td>
</tr>
</table>
</td>
</tr>
</table>
So my question is this: is there a way to use one jQuery statement to find the highest parent <td> of the <input> element? So in other words, can I combine:
$('.myForm input').click(function(){
$(this).parent().addClass('active');
})
and
$('.myForm input').click(function(){
$(this).parent().parent().addClass('active');
})
into one function?
The best solution is to add a class to the table you actually want to target. This means that you could update the markup in future without necessarily breaking the JS, by doing something like $(this).closest('.targetElement').addClass('active').
If you can't do that, you can use parents('td').last(). This selects all td parent elements and then gets the last one.
$('.myForm input').click(function(){
$(this).parents('td').last().addClass('active');
})
See the jQuery manual:
closest
parents
last
Try doing this:
$('.myForm input').click(function(){
$(this).parents('td').last().addClass('active');
})
I'd suggest trying:
$(this).parents("td").last()
It will find all table cell ancestors of the current element. The last one should contain the highest level table cell element.
you can try:
$(this).parents('td:last');
or
$(this).parents('td').last();
Give your top-level td element a class name:
<table>
<tr>
<td class="topTD"> <--cell I want to add the class to
<table>
<tr>
<td><input type='text'></td>
</tr>
</table>
</td>
</tr>
</table>
$('.myForm input').click(function(){
$(this).closest('td.topTD').addClass('active');
});
Quick&dirty :)
$(this).parents('td')[--$(this).parents('td').length]

Appending to <td> instead of below <tr>. What's wrong?

In this jsFiddle
http://jsfiddle.net/littlesandra88/tZqYX/
would I like that a new <tr> is inserted below the one where "Details" is clicked.
I do
$('.row').append("<tr><td>It worked</td></tr>");
but this results in
<tr class="row">
<td class="edit-column">Details <input value="Save" type="submit"></td>
<tr><td>It worked</td></tr></tr>
where I was hoping for
<tr class="row">
<td class="edit-column">Details <input value="Save" type="submit"></td>
</tr>
<tr><td>It worked</td></tr>
Any idea how to fix this?
Try $('.row').after("<tr><td>It worked</td></tr>");
.append. is appending the row to the .row row. Using .after will put the row AFTER the .row row
Try .after() instead of .append()
$('.row').after("<tr><td>It worked</td></tr>");
You are basically trying to add to an existing row. You need to add the new row to the table. Or try something like the next $row after it.
Try .after() instead. .append() is for sticking something INSIDE the specified element at the end of the child list
$(<tr><td>It worked</td></tr>").insertAfter($('.row'));
You need to append the new row to the tbody element, not to the row itself
You are basically trying to add to an existing row. You need to add the new row to the table. Or try something like the next $row after it.
$('#accTable').append("<tr><td>It worked</td></tr>");
The .after() is probably what you're looking for. It will append the text after the row element.

How to pass a row into a javascript function when wrapped?

I am trying to make a button that when clicked, it will remove the row from the table. The problem is that I cannot use 'this' to pass an instance of itself into the function because it is wrapped in a 'a href' hyperlink.
<tr>
<td>
<a href="#"
onclick="return removeContact(\''.$row['ContactMail'].'\', this);">
</td>
</tr>
Any ideas on how to get this working?
Use this.parentNode to get the TD or this.parentNode.parentNode to get the row.
Or you can put some Id into TR tag and call it using the jQuery wrap like this:
$("#TrNNN").remove()
A nice way to do this is with JQuery:
$('a').click(function() {
this.parentNode.parentNode.remove()
});

Categories