javascript - how to select the first td - Stack Overflow

admin管理员组

文章数量:1394585

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

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

• javascript
• jquery
• html

Share Improve this question Follow asked Jun 6, 2013 at 16:26 IronManIronMan 3511 silver badge77 bronze badges 2

• What's going on? Does this question need 10 answers? – Antony Commented Jun 6, 2013 at 16:33
• hehe it looks like we all tried to answer it at the same time. oh well =) – azzy81 Commented Jun 7, 2013 at 14:36

Add a ment  | 

10 Answers 10

Sorted by: Reset to default 5

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 acplish 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/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./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.

本文标签： javascripthow to select the first tdStack Overflow