從動態 HTML 表中獲取文本值

Question

我正在嘗試從 html 表中獲取值。 我試過row.cells[j].innerHTML返回<input name="ctl00$ctl00$ctl00$MainContent$Nav$SiteContent$Text2" type="text" id="MainContent_Nav_SiteContent_Text2" maxlength="5">

我還嘗試row.cells[j].innerHTML.text 、 row.cells[j].innerHTML.value和row.cells[j].outterHTML ，它們都返回undefined 。 有任何想法嗎？

我想要發生的事情的概述：用戶在動態表中輸入值，根據需要添加/刪除行。 表格填滿后，用戶單擊保存，調用GetTableValues()循環遍歷表格，將每個字段值添加到字符串中。 每個值由 % 分隔，每行由 @ 分隔。 然后我將該字符串分配給一個隱藏字段，我可以在我的 VB.Net 代碼中訪問該字段，然后解析數據以保存到數據庫。

它正在遍歷表但是（如下面的日志所示），它沒有從表中獲取值

這里是表格的javascript和html，循環表格。

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="">%

桌子的圖片

Answer 1

row.cells[j]是一個TD Element ，而不是一個 Input 元素。
通過執行console.log(row.cells[j]) ，這是檢測某些屬性實際持有的內容的最簡單方法。 然后，擁有該元素所需要做的就是查詢子元素 Input。 const EL_input = row.cells[j].querySelector("input") 。 現在您有了輸入元素： const value = EL_input.value

• 不要過度使用 ID 選擇器。 特別不在表中。 列包含帶有 ID 的元素是沒有意義的，您可能會遇到重復的 ID 問題，或者實際上您不一定需要表。
• 使用NodeList.prototype.forEach() 。 它比使用令人生畏的 for 循環更簡單、更容易。
• 你也可以創建一些漂亮的 DOM 助手來減輕你的自我查詢 DOM 的元素
• 使用.console.log()或debugger來測試您的代碼。

 // 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>