How to get the Last Row value from HTMLTable in Jquery in Asp.Net

Introduction:

In this article I am going to explain how to get the last row values from HTML table using Jquery. In this example I have used the online Jquery CDN files available. If you don’t want to use the Online available cdn file then you can manually add the jquery files to your solution. I have explained the steps here in detail.

I have used the last() filter function in Jquery to get the last element in that set of DOM elements.

Complete Code

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>

        $(document).ready(function () {
            //Attach click event o button
            $('#btnGetValue').click(function () {
                //Get the last row in gridview
                var tr = $('#DetailTable tr:last');
                //Ge the firstcolumnVal 
                var firstcolumnval = $(tr).find("td").html()
                alert(firstcolumnval);
                //Get the secondcolumn value
                var secondcolumnval = $(tr).find("td").find('input.Col1').val();
                alert(secondcolumnval);
                //Get the Thirdcolumn value
                var Thirdcolumnval = $(tr).find("td").find('input.length').val();
                alert(Thirdcolumnval);
                //Get the Fourthcolumn value
                var Fourthcolumnval = $(tr).find("td").find('input.Col3').val();
                alert(Fourthcolumnval);
            });
        });
    </script>

    <table style="width: 40%" id="DetailTable">
        <tr>
            <td>1
            </td>
            <td>
                <input type="text" maxlength="100" class="Col1" display="Dynamic" value="4" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col2" display="Dynamic" value="12" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col3" display="Dynamic" value="Text Value1" />
            </td>
        </tr>

        <tr>
            <td>2
            </td>
            <td>
                <input type="text" maxlength="100" class="Col1" display="Dynamic" value="5" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col2" display="Dynamic" value="6" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col3" display="Dynamic" value="Text Value2" />
            </td>
        </tr>

        <tr>
            <td>3
            </td>
            <td>
                <input type="text" maxlength="100" class="Col1" display="Dynamic" value="34" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col2" display="Dynamic" value="12" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col3" display="Dynamic" value="Text Value3" />
            </td>
        </tr>
    </table>
    <input id="btnGetValue" value="GetValue" type="button" />
Advertisements

, , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s