locked
Reading Input Boxes Within Table Rows RRS feed

  • Question

  • User1122355199 posted

    Hello everyone and thanks for your help in advance.  I want to develop a script that reads a table that has input text fields in three separate columns of each row.  I want the user to be able to complete the values required in each column of each row in the table.  I then want one link to click on that will launch a function that will loop through each row of the table, retrieving the input values in each column of the row.  I understand how to loop through the rows of a table, but don't understand how to access the input boxes of each column within that row.  Any help would be appreciated.

    Wednesday, April 13, 2016 2:35 AM

Answers

  • User2103319870 posted

    how to loop through the rows of a table, but don't understand how to access the input boxes of each column within that row

    You can try with the below code

    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
       <script>
              $(document).ready(function () {
                  //Attach button clicke event hanlder
                  $('#button1').click(function () {
                  //Loop through each radiobutton in table
                      $("table tr td input[type='text']").each(function () {
                          //Get the value
                          var thirdrowval = $(this).val();
                          alert(thirdrowval);
                      });
                  });
              });
          </script>

    Complete Code

    <!DOCTYPE html>
    <html>
    <head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
      <meta charset="utf-8">
       <script>
              $(document).ready(function () {
                  //Attach button clicke event hanlder
                  $('#button1').click(function () {
                  //Loop through each radiobutton in table
                      $("table tr td input[type='text']").each(function () {
                          //Get the value
                          var thirdrowval = $(this).val();
                          alert(thirdrowval);
                      });
                  });
              });
          </script>
    </head>
    <body>
    <div id="showdiv17" style="display: block;">
     <table id="table1" width="100%" runat="server" border="1">
     <tbody>
       <tr>
        <td width="30%"><input type='text' name='Name' id='Name' value="Text1"/></td>
        <td width="50%"><input type='text' name='Name' id='Name' value="Text2"/></td>
        <td width="20%"><input type='text' name='Name' id='Name' value="42"/></td>
       </tr>
       <tr>   
        <td width="30%"><input type='text' name='Name' id='Name' value="21"/></td>
        <td width="50%"><input type='text' name='Name' id='Name' value="35"/></td>
        <td width="20%"><input type='text' name='Name' id='Name' value="25"/></td>
       </tr>
     </tbody>
    </table>
      <input type="button" Value="GetValue" id="button1"/>
    </div>
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 13, 2016 4:10 AM

All replies

  • User2103319870 posted

    how to loop through the rows of a table, but don't understand how to access the input boxes of each column within that row

    You can try with the below code

    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
       <script>
              $(document).ready(function () {
                  //Attach button clicke event hanlder
                  $('#button1').click(function () {
                  //Loop through each radiobutton in table
                      $("table tr td input[type='text']").each(function () {
                          //Get the value
                          var thirdrowval = $(this).val();
                          alert(thirdrowval);
                      });
                  });
              });
          </script>

    Complete Code

    <!DOCTYPE html>
    <html>
    <head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
      <meta charset="utf-8">
       <script>
              $(document).ready(function () {
                  //Attach button clicke event hanlder
                  $('#button1').click(function () {
                  //Loop through each radiobutton in table
                      $("table tr td input[type='text']").each(function () {
                          //Get the value
                          var thirdrowval = $(this).val();
                          alert(thirdrowval);
                      });
                  });
              });
          </script>
    </head>
    <body>
    <div id="showdiv17" style="display: block;">
     <table id="table1" width="100%" runat="server" border="1">
     <tbody>
       <tr>
        <td width="30%"><input type='text' name='Name' id='Name' value="Text1"/></td>
        <td width="50%"><input type='text' name='Name' id='Name' value="Text2"/></td>
        <td width="20%"><input type='text' name='Name' id='Name' value="42"/></td>
       </tr>
       <tr>   
        <td width="30%"><input type='text' name='Name' id='Name' value="21"/></td>
        <td width="50%"><input type='text' name='Name' id='Name' value="35"/></td>
        <td width="20%"><input type='text' name='Name' id='Name' value="25"/></td>
       </tr>
     </tbody>
    </table>
      <input type="button" Value="GetValue" id="button1"/>
    </div>
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 13, 2016 4:10 AM
  • User1122355199 posted

    Thank you so much for the response and for the fiddle.  Does everything it should.  One more question if I may.  Obviously, since I am trying to reference input text within table rows, I am needing to send this data to a database via some type of ajax call.  Since I have never done this before, is it best practice to make an ajax call for the update on each row, or somehow (not sure how) aggregate all the rows and push it to the api?  Any experience or insight on that?

    Thanks again for the help.

    Wednesday, April 13, 2016 9:10 PM
  • User61956409 posted

    Hi kmcnet,

    I am trying to reference input text within table rows, I am needing to send this data to a database via some type of ajax call. 

    If you’d like to post the row data to server and do updating in database when you click the update button within the table row, you could refer to the following sample.

    <table>
        <tr>
            <td>
                <input id="txtfield1" type="text" /></td>
            <td>
                <input id="txtfield2" type="text" /></td>
            <td>
                <input id="txtfield3" type="text" /></td>
            <td>
                <input class="btnupdate" type="button" value="Update" onclick="updaterow(this);" /></td>
        </tr>
    </table>
    
    function updaterow(obj) {
        var field1 = $(obj).parent().siblings("td").eq(0).find(":text").val();
        var field2 = $(obj).parent().siblings("td").eq(1).find(":text").val();
        var field3 = $(obj).parent().siblings("td").eq(2).find(":text").val();
    
    
        $.ajax({
            type: "Post",
            url: "default.aspx/UpdateRecord",
            data: "{'field1':'" + field1 + "','field2':'" + field2 + "','field3':'" + field3 + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var mes = data.d;
                alert(mes);
            },
            error: function (err) {
                alert(err);
            }
        })
    }        
    
    [WebMethod]
    public static string UpdateRecord(string field1, string field2, string field3)
    {
        //here, update records
        return "Hello " + field1 + field2 + field3 + "!";
    }
    

    Best Regards,

    Fei Han




    Thursday, April 14, 2016 3:13 AM
  • User1122355199 posted

    Hello Fei.  Thanks for the response, but not exactly what I am looking for.  In your example, you have a button associated with the table row.  What I am looking for is more like this:

    <table>
        <tr>
            <td>
                <input id="txtfield1" type="text" /></td>
            <td>
                <input id="txtfield2" type="text" /></td>
            <td>
                <input id="txtfield3" type="text" /></td>
        </tr>
        <tr>
            <td>
                <input id="txtfield1" type="text" /></td>
            <td>
                <input id="txtfield2" type="text" /></td>
            <td>
                <input id="txtfield3" type="text" /></td>
        </tr>
        <tr>
            <td>
                <input id="txtfield1" type="text" /></td>
            <td>
                <input id="txtfield2" type="text" /></td>
            <td>
                <input id="txtfield3" type="text" /></td>
        </tr>
    </table>
    <a href="#">Update database from table input</a>

    So the function will need to need to loop through each row of the table, gathering the input box data from the input boxes on each row.  Aside from finding the input box values on each row, I am wondering if I should make the ajax call after each row is traversed, or if there is some way to bundle it all up and make one ajax call.  Currently, when the table is dynamically built, I create a name tag based on the element name and associated row ID, for example:

    <tr><td>
    <input name="txtDeductible20786" id="txtDeductible20786" type="text" value="$0.00">
    </td><.tr>
    
    <tr><td>
    <input name="txtDeductible20787" id="txtDeductible20787" type="text" value="$0.00">
    </td><.tr>

    I'm passing the row id into the <tr> element:

    claimrow = claimrow + '  <tr data-claimrowid=' + response[i].ID + '>';

    Then on the click event, looping through the table:

                    $('#tblClaimCharges tbody tr').each(function (i, row) {
    
                        var txtDeductible = document.getElementsByName('txtDeductible' + $(this).attr("data-claimrowid"));
                        var deductible = $(txtDeductible).val()
    
     
                    });

    So, I'm wondering if there is an easier way to do this as well as where to put the ajax call in this mix.  There are five columns per row that will pass user input to the database and between 5 and 10 rows per each user input.  So I need to get this working efficiently.

    Thanks again for the help.

    Thursday, April 14, 2016 4:53 AM