Read data from textbox which is in html table using javascript

Posted on 2011-10-18
Last Modified: 2012-05-12

I have textbox in the html table , now i want to read the data from this textbox for each row using javascript
can you please suggest.

Question by:praveen1981
    LVL 17

    Expert Comment

    Look at below code

    Test page :
    <meta http-equiv="Content-Language" content="en-gb">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Kiran Test</title>
    <script src="" type="text/javascript"></script>
      function ReadData()
         $("table#my_table tr").each(function(){
           alert($(this).find('td:first input').val() + " " + $(this).find('td:last input').val());
      <table width="200" border="1" id="my_table">
              <input type="text" name="FirstName" id="FirstName" value="Andy" />
              <input type="text" name="LastName" id="LastName" value="Flower" />
              <input type="text" name="FirstName1" id="FirstName1" value="Steve"/>
              <input type="text" name="LastName1" id="LastName1" value="English"/>
              <input type="text" name="FirstName2" id="FirstName2" value="Robert" />
              <input type="text" name="LastName2" id="LastName2" value="Sanford" />
    <input id="btn" type="button" value="Read Data">

    Open in new window

    LVL 40

    Accepted Solution

    first get the handle to that row of the table

    var rows = document.getElementById("myTable").rows;

    for ( var rowCounter = 0; rowCounter < rows.length; rowCounter++)
      var row = rows[ rowCounter ];
      //get access to the textbox
      var allInputs = row.getElementsByTagName("input");

      for ( var allInputCounter = 0; allInputCounter < allInputs.length; allInputCounter++)
         var input = allInputs[ allInputCounter ];
         if ( input.getAttribute("type") == "text" )
            alert("my textbox value is " + input.value);

    Author Closing Comment

    Many thanks, it solved the Problem

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    CSS Animation 6 57
    Lines Not Lining Up 2 35
    CSS WIld Cards 2 28
    Javascript - getdate 5 36
    Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    24 Experts available now in Live!

    Get 1:1 Help Now