select specific input element in a specific row and column

Question

Cosider this image: enter image description here

How I can select it without it's ID with jQuery? I mean how I can select it like this statement:

Find Input in Row with Code=1000 and Column Desc2

thanks

Edit 1)

HTML Code

<table border="1" width="300px">
    <tr>
        <td>
            Desc2
        </td>
        <td>
            Desc1
        </td>
        <td>
            Code
        </td>
    </tr>
    <tr>
        <td bgcolor="#CCCCB3">
            <input id="Text1" type="text" />
        </td>
        <td>
        </td>
        <td>
            1000
        </td>
    </tr>
    <tr>
        <td bgcolor="#FFFFCC">
            &nbsp;
        </td>
        <td bgcolor="#FFFFCC">
        </td>
        <td bgcolor="#FFFFCC">
        </td>
    </tr>
    <tr>
        <td bgcolor="#CCCCB3">
            <input id="Text2" type="text" />
        </td>
        <td>
        </td>
        <td>
            1001
        </td>
        <tr>
            <td bgcolor="#CCCCB3" class="style1">
                <input id="Text3" type="text" />
            </td>
            <td class="style1">
            </td>
            <td class="style1">
                1002
            </td>
        </tr>
        <tr>
            <td bgcolor="#CCCCB3">
                <input id="Text4" type="text" />
            </td>
            <td>
            </td>
            <td>
                1003
            </td>
        </tr>
</table>

It would be easier to help if you posted the html for your example instead of an image. And is that the whole table or just part of it? I mean if there's only one input field per row, it's trivial. — flesk
– flesk, Commented Nov 20, 2011 at 20:42

Rob W · Accepted Answer · 2011-11-20 20:42:21Z

1

Select the last cell, filter the row whose last cell has a value which is equal to "1000", and select the first input element of the collection:

$("table td:last-of-type").filter(function(){
    return $(this).text() == "1000";
}).parent().find("input:first");

For constructing such selectors, you can use the following:

:eq() and .eq()
:nth-child() (for a specific child position only!)

Warning: Do not fall in the trap of contains(). This method select all elements which contain the given phrase. .contains(1000) will also select <td>10000</td>.

answered Nov 20, 2011 at 20:42

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

DooDoo Over a year ago

Thanks.I add your code in my page but it does not work.I use this code:

var a = $("table td:last-of-type").filter(function () {                 return $(this).text() == "1000";             }).parent().find("input:first");             $(a).text("nima");

. what is last-of-type?

Rob W Over a year ago

td:last-of-type is a CSS selector which selects every <td> element which is the last of its type, with respect to its parent. Can you provide a fiddle?

Rob W Over a year ago

Your code contains spaces. Use $.trim to remove beginning and trailing spaces. Also, my code already returns a jQuery object, so there's no need to wrap it in another jQuery object. Fiddle: jsfiddle.net/7qyFk/5

DooDoo Over a year ago

thanks it works but it need $ for get attr of it ;).I want a general way to do this.last-of-type is a limited solution for this.If my input is in Desc2 column how I can Select that?

Rob W Over a year ago

Example: Select row 5, cell 2: $("table > tr:nth-child(5) > td:nth-child(2)").

|

Collectives™ on Stack Overflow

select specific input element in a specific row and column

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related