how to write selector for select td in table

Question

i have this html code

<table style="width: 100%;">
            <tr>
                <td>
                    ID
                </td>
                <td>
                    <input id="Text1" type="text" class="b" />
                </td>
            </tr>
            <tr>
                <td>
                    Name
                </td>
                <td>
                    <input id="Text2" type="text" class="b" />
                </td>
            </tr>
            <tr>
                <td>
                    Family
                </td>
                <td>
                    <input id="Text3" type="text" class="b" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input id="Button1" type="button" value="Click Me" />
                </td>
            </tr>
        </table>

i want, if user no enter text select sibling td and get text in td i'm writing this code but no working

        $(function () {
            $("#Button1").click(function () {
                var ls = $(".b");
                alert(ls.length);
                for (var i = 0; i <= ls.length - 1; i++) {
                    if ($(ls[i]).val() == "") {
                        alert("hi");
                        var ctx = $(ls[i]).parent("td").parent().siblings();;
                        alert($(ctx).val());
                        //
                        alert(ctx.length);

                    }
                }
            });
        });

for example, if user in Text1 to enter id and press button 1 i want show alert id.

please help me. thanks all

Answer 1

Here is one alert that covers all the empty items, rather than a single alert for each

DEMO : http://jsfiddle.net/RCHss/

$("#Button1").click(function() {
    var empty_items = [];
    $(".b").each(function() {
        if ($(this).val() == '') {
            empty_items.push($.trim($(this).parent().prev().text()));
        }
    });
    if (empty_items.length) {
        alert('Please fill in :\n\n' + empty_items.join('\n'))
    }
});

Answer 2

for example, if user in Text1 to enter id and press button 1 i want show alert id.

So you want to find the previous td, the one just before the td containing the input that doesn't have a value? That would be something like this:

$(function () {
    $("#Button1").click(function () {
        var ls = $(".b");
        var input;
        alert(ls.length);
        // Note that rather than using a `for` loop, you might
        // look at using jQuery's `each` function
        for (var i = 0; i < ls.length - 1; i++) {
            // Get a jQuery wrapper for this `input` element
            input = $(ls[i]);

            // Is it empty?
            if (input.val() == "") {
                // Yes, traverse up to the `td`, then get the previous `td`
                var ctx = input.closest("td").prev();

                // Show its text (or html); note that it's not `val`, `td`
                // elements don't have a *value*, they have text/markup
                alert(ctx.text()); // Or ctx.html()
            }
        }
    });
});