Hi,

I have a table (tableSearch) with dropdowns and text box. User is allow to add row on the fly.

Currently, I use appendTo (as seen below) to add row to the table and I would like to know if $('#tableSearch tr').last() is the right way to get the newly added row. What happen right now, is the newly added row’s controls will use existing values. I wanted to clear/reset them. However, when I tried  $('#tableSearch tr').last().find('.ddlType').val = "0"; for example, it doesn’t select the first item of the dropdown ddlType. Either does .text. When I use debug it with “alert”, it returns some javascript. Is this done correctly.

Please advice. Your help would be greatly appreciated!

<script>

        $(function () {

            //Attach click event 

            $('#tableSearch').on("click", '.Add', function () {

                //Get the html of closest table Row(tr) and then append it to your table

                $('<tr>').append($(this).closest('tr').html()).appendTo('#tableSearch');

                $('#tableSearch tr').last().find('.ddlType').val = "0";

                $('#tableSearch tr').last().find('.ddlType').text = "";

                $('#tableSearch tr:last').find('.ddlSearch').hide();

                $('#tableSearch tr:last').find('.txtSearch').hide();

                ShowHide();

            });

            ShowHide();

            $('#tableSearch').on("click", '.Delete', function () {

                //Get the html of closest table Row(tr) and then append it to your table

                $(this).closest('tr').remove();

            });

        });

        function ShowHide() {

            $('.ddlType').change(function () {

                switch ($(this).val()) {

                    case "2":

                    case "3":

                        $(this).closest('tr').find('.ddlSearch').show();

                        $(this).closest('tr').find('.txtSearch').hide();

                        break;

                    default:

                        $(this).closest('tr').find('.ddlSearch').hide();

                        $(this).closest('tr').find('.txtSearch').show();

                        break;

                }

            });

        }

</script>

<table id="tableSearch">

        <tr>

            <td>

               <asp:DropDownList ID="ddlType" CssClass="ddlType" runat="server">

               <asp:ListItem Value="0"  Text=""></asp:ListItem>

                <asp:ListItem Value="1">Name</asp:ListItem>

                <asp:ListItem Value="2">Business Unit</asp:ListItem>

                <asp:ListItem Value="3">Department</asp:ListItem>

                <asp:ListItem Value="4">Division</asp:ListItem>

            </asp:DropDownList>

            </td>

            <td>

                <asp:DropDownList ID="ddlSearch" CssClass="ddlSearch" runat="server">

                </asp:DropDownList>

                <asp:TextBox ID="txtSearch" CssClass="txtSearch" runat="server"></asp:TextBox>

            </td>

            <td>

                <a href="#" class="Add">Add</a>

            </td>

            <td>

                <a href="#" class="Delete">Delete</a>

            </td>

        </tr>

    </table>