从动态 HTML 表中获取文本值

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

Answer 1

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>

Answer 2

 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>