We Keep Coding

how to select the first td

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.

jQuery append() div tag not working as expected

i'm having a problem with my append div.
here is a rough idea of my html
<table>
<tr>
<td>title 1</td>
<td>subject 2</td>
</tr>
<div id='appenddiv'></div>
<tr>
<td>title 2</td>
<td>subject 2</td>
</tr>
</table>
and my jquery script is this:
var output = "<tr><td>title added</td><td>subject added</td></tr>";
$('#appenddiv').append(htmloutput);
All works fine with the script and it fires when it should etc.. but my problem is, instead of placing the new html inside the div tags, it just adds it to the top of the table?
any idea why?

As moonwave99 said, you can't have a <div> as a direct child of your table element. If you always to add after the first row, you can do:
var output = "<tr><td>title added</td><td>subject added</td></tr>";
$('table tr:first').after(output);

You can't have a <div> as a direct child of a <table> element, so it's rendered outside of it.

Your html structure is not valid. You shouldn't place a div between tr's. You should place it inside a td if you want it inside your table.
If you want to add another row to your table, you should place a tr instead of your div element, and append it's content, or you should use jQuery .after() or .before() to position your element at a specific position.

you can only append div inside a <td> if you want to have a div in a table otherwise you cannot just add <div> inside <table>

I think no need to assign a variable, you can put html code directly to after() method.
Below is the script:
$('table tr:first').after("<tr><td>title added</td><td>subject added</td></tr>");
Above script will always add new row after the first row.

Deleting Row of Table based on div id using JavaScript

Really need your help.
I have a table that can dynamically add and delete row. But the problem is I want to delete the row of the table based on div id. I mean, on one column for every row of table i have div id which are auto increment. Then, I want to delete the row based on the div id. Is that possible?
Thanks a lot.

You can do this really easy with jQuery.
http://jsfiddle.net/KWPWr/1/
$('#d2').closest('tr').remove();

Yes.
$('#row-id').closest('tr').fadeOut(200, function() { $(this).remove(); });
The above will first select the div, then find the table row it exists in, fades it out and the removes it.

If your table looks like this:
<table>
<tbody>
<tr>
<td>
<div id="01"></div>
</td>
</tr>
<tr>
<td>
<div id="02"></div>
</td>
</tr>
</tbody>
</table>
You can use document.getElementById(DIVID).parentNode.parentNode to access the <tr> Element.

add a new row in a table [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Add table row in jQuery
I want to add a new row to my table on a change event. Here is what I have so far:
$('#CourseID').change(function() {
$('#CourseListTable > tr > td:last').append('<td>...</td>');
});
Here is my table:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<table id="CourseListTable">
<tr>
<th>Course ID</th>
<th>Course Section</th>
<th>Level</th>
</tr>
<tr>
<td><select name="CourseID" id="CourseID"></select></td>
<td><select name="CourseSection" id="CourseSection"></select></td>
<td><select name="Level" id="Level"></select></td>
</tr>
</table>
I am not able to get this to work. I am missing something over here can anyone let me know where my error lies?
Thanks in advance.

You mention append Row but in your code you are appending just cells.
If you need to actually append a full row, try this:
$('#CourseID').change(function() {
$('<tr/>').append('<td>...</td>').insertAfter('#CourseListTable tr:last');
});

This line:
$('#CourseListTable > tr > td:last').append('<td>...</td>');
appends a TD (<td>...</td>) to an existing TD (td:last); you want to append it to a TR, eg.
$('#CourseListTable > tr').append('<td>...</td>');
Of course, you mentioned wanting to add a new row, in which case you shouldn't be appending a <td> at all, you should be appending a <tr> (and you should append it to the table, obviously).

$('#CourseID').change(function() {
$('#CourseListTable > tbody > tr:eq(1)').append('<td>...</td>');
});

If you want to add a new row you have to add a tr
$('#CourseListTable tr:last').after('<tr><td>...</td><td>...</td><td>...</td></tr>');

You should use after instead, append will append the element inside the tr.
$('#CourseID').change(function() {
$('#CourseListTable tr:last').after('<tr><td>test</td><td>test</td><td>test</td></tr>');
});

follow this:
Customizing JQuery Cloned row attributes
It lets you clone, append and then customize each cell.. very flexible.

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()
});