Getting text values from dynamic HTML table

Question

I am trying to get the values from an html table. I have tried row.cells[j].innerHTML which returns <input name="ctl00$ctl00$ctl00$MainContent$Nav$SiteContent$Text2" type="text" id="MainContent_Nav_SiteContent_Text2" maxlength="5">

I have also tried row.cells[j].innerHTML.text, row.cells[j].innerHTML.value, and row.cells[j].outterHTML which all return undefined. Any ideas?

An overview of what I want happening: user enter values in the dynamic table, adding / deleting rows as needed. Once table is filled, user clicks save which calls GetTableValues() which loops through the table adding each fields value to a string. Each value is separated by % and each row is separated by @. I then assign that string to a hidden field which I can access in my VB.Net code which then parses the data to save to a database.

It is looping through table but (as seen in the logs below), it does not get the values from the table

Here is the javascript and html of the table and looping through the table.

function GetTableValues() {
        
        var s = "";
        console.log("enter function");
        //Reference the Table.
        var table = document.getElementById("dataTable");
 
        //Loop through Table Rows.
        for (var i = 1; i < table.rows.length; i++) {
            //Reference the Table Row.
            var row = table.rows[i];
            console.log("outside nest " + s);
            for (var j = 1; j < 6; j++) {
                console.log("i= " + i + " j= " + j);
                //Copy values from Table Cell to JSON object.
                console.log("inside nest " + row.cells[j].innerHTML +"%");
                s = s + row.cells[j].innerHTML +"%";
            }
                console.log("outside again " + s);
                s = s + "@";
        }
        
        document.getElementsByName("drawingsHidden").value = s
        console.log(document.getElementsByName("drawingsHidden").value);
        
        
    }

<table id="dataTable" style="width:100%">
            <tr>
                <th>Check Box</th>
                <th>CAGE</th>
                <th>Dwg #</th>
                <th>Dwg Rev</th>
                <th>Prop Rev</th>
                <th>Issued Rev</th>
                <th>Status</th>
            </tr>
            <tr>
                <td><input type="checkbox" id="chkbox" /></td>
                <td><input type="text" id="Text2" maxlength="5" runat="server" text=""/></td>
                <td><input type="text" id="DRAWINGNUM" maxlength="20" runat="server" text=""/></td>
                <td><input type="text" id="DRAWINGREV" maxlength="2" runat="server" text=""/></td>
                <td><input type="text" id="PROPREV" maxlength="2" runat="server" text=""/></td>
                <!--tie these fields to the drawing tracking form-->
                <td><input type="text" id="ISSUEDREV" maxlength="2" runat="server" text=""/></td>
                <td><input type="text" id="Text3" maxlength="20" runat="server" text=""></td>
            </tr>
        </table>

enter function
outside nest 
i= 1 j= 1
inside nest <input name="ctl00$ctl00$ctl00$MainContent$Nav$SiteContent$Text2" type="text" id="MainContent_Nav_SiteContent_Text2" maxlength="5" text="">%
i= 1 j= 2
inside nest <input name="ctl00$ctl00$ctl00$MainContent$Nav$SiteContent$DRAWINGNUM" type="text" id="MainContent_Nav_SiteContent_DRAWINGNUM" maxlength="20" text="">%
i= 1 j= 3
inside nest <input name="ctl00$ctl00$ctl00$MainContent$Nav$SiteContent$DRAWINGREV" type="text" id="MainContent_Nav_SiteContent_DRAWINGREV" maxlength="2" text="">%
i= 1 j= 4
inside nest <input name="ctl00$ctl00$ctl00$MainContent$Nav$SiteContent$PROPREV" type="text" id="MainContent_Nav_SiteContent_PROPREV" maxlength="2" text="">%
i= 1 j= 5
inside nest <input name="ctl00$ctl00$ctl00$MainContent$Nav$SiteContent$ISSUEDREV" type="text" id="MainContent_Nav_SiteContent_ISSUEDREV" maxlength="2" text="">%
outside again <input name="ctl00$ctl00$ctl00$MainContent$Nav$SiteContent$Text2" type="text" id="MainContent_Nav_SiteContent_Text2" maxlength="5" text="">%<input name="ctl00$ctl00$ctl00$MainContent$Nav$SiteContent$DRAWINGNUM" type="text" id="MainContent_Nav_SiteContent_DRAWINGNUM" maxlength="20" text="">%<input name="ctl00$ctl00$ctl00$MainContent$Nav$SiteContent$DRAWINGREV" type="text" id="MainContent_Nav_SiteContent_DRAWINGREV" maxlength="2" text="">%<input name="ctl00$ctl00$ctl00$MainContent$Nav$SiteContent$PROPREV" type="text" id="MainContent_Nav_SiteContent_PROPREV" maxlength="2" text="">%<input name="ctl00$ctl00$ctl00$MainContent$Nav$SiteContent$ISSUEDREV" type="text" id="MainContent_Nav_SiteContent_ISSUEDREV" maxlength="2" text="">%

Picture of the table

A simple search for "How to get Element Value" would lead you to Element.value not Element.innerHTML — Roko C. Buljan
– Roko C. Buljan, Commented Feb 24, 2022 at 20:00
@RokoC.Buljan You think I didn't google before this? Problem is, there are like 20 different articles all with different ways of doing it... I changed it to row.cells[j].value and still returns undefined — Dane Brazinski
– Dane Brazinski, Commented Feb 24, 2022 at 20:22

Roko C. Buljan · Accepted Answer · 2022-02-24 22:25:46Z

row.cells[j] is a TD Element, not an Input element.
By doing console.log(row.cells[j]) it's the easiest way to detect what is actually hold by some property. Then, having that element all it takes is to query for a child element Input. const EL_input = row.cells[j].querySelector("input"). Now that you have your input Element: const value = EL_input.value

Don't overuse ID selectors. Specially not in a table. It makes no sense for columns to contain elements with IDs, you might either run into a duplicated IDs issue or actually you don't necessarily need a Table.
Use NodeList.prototype.forEach(). It's simpler and easier than using daunting for loops.
You could also create some nifty DOM helpers to ease on your self Querying the DOM for elements
Use .console.log() or debugger to test your code.

// DOM helpers:

const EL = (sel, par) => (par || document).querySelector(sel);
const ELS = (sel, par) => (par || document).querySelectorAll(sel);

// Task:

const getTableValues = () => { 

  let str = "";

  ELS("#dataTable tbody tr").forEach(EL_tr => {
    ELS("td", EL_tr).forEach(EL_td => {
      str += EL("input", EL_td).value + "%";
    });
    str += "@";
  });
  
  EL("#drawingsHidden").value = str
};

EL("#test").addEventListener("click", getTableValues);

#dataTable {
  width: 100%;
}

<table id=dataTable>
  <thead>
    <tr>
      <th>Check Box</th>
      <th>CAGE</th>
      <th>Dwg #</th>
      <th>Dwg Rev</th>
      <th>Prop Rev</th>
      <th>Issued Rev</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type=checkbox></td>
      <td><input type=text maxlength=5></td>
      <td><input type=text maxlength=20></td>
      <td><input type=text maxlength=2></td>
      <td><input type=text maxlength=2></td>
      <td><input type=text maxlength=2></td>
      <td><input type=text maxlength=20></td>
    </tr>
  </tbody>
</table>

<button id=test type=button>CLICK TO TEST</button><br>
<input id=drawingsHidden type=text>

DCR · Accepted Answer · 2022-02-24 20:08:06Z

0

var table = document.getElementsByTagName('table')[0]

var td = table.getElementsByTagName('td')[0]

var input = td.getElementsByTagName('input')[0]

console.log(input.value)

<table>
<tr>
 <td><input value=7><td>
</tr>
</table>

answered Feb 24, 2022 at 20:08

DCR

15.8k13 gold badges61 silver badges131 bronze badges

Collectives™ on Stack Overflow

Getting text values from dynamic HTML table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related