locked
get table row value using ajax RRS feed

  • Question

  • User491718545 posted

    hi,

    i want to get table row value 

    this is my coding but cant get table value

    <table>
    <tr>
    <td class="editable"> <a class="query" href="#"> <input type='text' name='postcode' id='txt_Address1' value=''/> </a> </td>
    <td class="editable"> <a class="text" href="#"><input type='text' name='postcode' id='txt_Address2' value=''/>  </a> </td>
    </tr>

    </table>

    <input type="button" id="detect_rel" value="detect"/>

    $('#detect_rel').click(function() {

    $('tr').each(function(i, el) {
    var query = $(el).children('td').children('.query').text();--How to get textbox value
    var text = $(el).children('td').children('.text').text();
    alert(query + " " + text);
    //$.ajax (do your AJAX call here using values of query and text
    });
    });

    thanks

    thanks

    Thursday, December 19, 2013 12:42 AM

Answers

  • User-1509636757 posted

    Check out below working example that mathes some of  your requirement. You can modify it to get <a> value as well:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#detect_rel').click(function () {
                    $('#table-1 tr td').each(function () {
                        var address = $(this).find("input[id*='txt_Address']");
                        alert(address.val());
                    });
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <table id="table-1">
                <tr>
                    <td class="editable"><a class="query" href="#">
                        <input type='text' name='postcode' id='txt_Address1' value='ABC' />
                    </a></td>
                    <td class="editable"><a class="text" href="#">
                        <input type='text' name='postcode' id='txt_Address2' value='DEF' />
                    </a></td>
                </tr>
    
            </table>
        </form>
    </body>
    </html>

    hope it helps/.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 19, 2013 1:00 AM

All replies

  • User-1509636757 posted

    Check out below working example that mathes some of  your requirement. You can modify it to get <a> value as well:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#detect_rel').click(function () {
                    $('#table-1 tr td').each(function () {
                        var address = $(this).find("input[id*='txt_Address']");
                        alert(address.val());
                    });
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <table id="table-1">
                <tr>
                    <td class="editable"><a class="query" href="#">
                        <input type='text' name='postcode' id='txt_Address1' value='ABC' />
                    </a></td>
                    <td class="editable"><a class="text" href="#">
                        <input type='text' name='postcode' id='txt_Address2' value='DEF' />
                    </a></td>
                </tr>
    
            </table>
        </form>
    </body>
    </html>

    hope it helps/.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 19, 2013 1:00 AM
  • User491718545 posted

    Hi,

    m creating dynamically textbox ,

    how to get that textbox value without mention textboxid

      var address = $(this).find("input[id*='txt_Address']");

    i have 4 rows want to get that value each row ????????

    <tr>
    <td class="editable"> <a class="query" href="#"> <input type='text' name='postcode' id='txt_Address1' value=''/> </a> </td>

    <td class="editable"> <a class="text" href="#"> <input type='text' name='postcode' id='txt_Address1' value=''/> </a> </td>

    </tr>

    <tr>
    <td class="editable"> <a class="query" href="#"> <input type='text' name='postcode' id='txt_Address1' value=''/> </a> </td>

    </tr>

    <tr>
    <td class="editable"> <a class="query" href="#"> <input type='text' name='postcode' id='txt_Address1' value=''/> </a> </td>

    </tr>

    <tr>
    <td class="editable"> <a class="query" href="#"> <input type='text' name='postcode' id='txt_Address1' value=''/> </a> </td>

    </tr>


    </tr>

    thanks

    Thursday, December 19, 2013 1:25 AM
  • User-1509636757 posted

    how to get that textbox value without mention textboxid

    You can get it by specifying the type='text' in selector. Here is the example without using ID:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#detect_rel').click(function () {
                    $('#table-1 tr td').each(function () {
                        var address = $(this).find("input[type='text']");
                        alert(address.val());
                    });
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
    
            <table id="table-1">
                <tr>
                    <td class="editable"><a class="query" href="#">
                        <input type='text' name='postcode' id='txt_Address1' value='A' />
                    </a></td>
                    <td class="editable"><a class="text" href="#">
                        <input type='text' name='postcode' id='Text1' value='B' />
                    </a></td>
                </tr>
                <tr>
                    <td class="editable"><a class="query" href="#">
                        <input type='text' name='postcode' id='Text2' value='C' />
                    </a></td>
    
                </tr>
                <tr>
                    <td class="editable"><a class="query" href="#">
                        <input type='text' name='postcode' id='Text3' value='D' />
                    </a></td>
                </tr>
                <tr>
                    <td class="editable"><a class="query" href="#">
                        <input type='text' name='postcode' id='Text4' value='E' />
                    </a></td>
                </tr>
            </table>
        </form>
    </body>
    </html>

    hope it helps./.

    Thursday, December 19, 2013 1:31 AM