如何获取表中 td 标记的内部 html 中存在的值

Question

index.html

   <tr>
            <td>
                <input type="text" name="id" id="id" value="<%=rn%>">
            </td>
            <td>
                <input type="text" name="name" id="name" value="<%=na%>">
            </td>
            <td>
                <input type="text" name="location" id="location" value="<%=pe%>">
            </td>
            <td>
                <input type="text" name="nbed" id="nbed" value="<%=ad%>">
            </td>
            <td>
                <input type="text" name="obed" id="obed" value="<%=obed%>">
            </td>
            <td>
                <input type="text" name="ibed" id="ibed" value="<%=ibed%>">
            </td>
            <td>
                <input type="hidden" name="type" value="edit">
                <button type="button" onclick="loadAjax()">edit</button>
            </td>
            <td>
                <input type="hidden" name="sid" value = "<%=rn%>" id="sid">
                <button type="button" onclick="loadAjax2()">Delete</button>
            </td>
        </form>
       <% } %>
       </tr>

script.js

var table = document.getElementById("data");

            for (var i = 0, row; row = table.rows[i]; i++) 
            {
                for (var j = 0, col; col = row.cells[j]; j++) {
                        console.log(col.innerHTML);
                }  
            }

When I iterate this table I get the html part of each td tag like this,

        **<input type="text" name="location" id="location" value=" fkeaqwji" pwa2-uuid="EDITOR/input-478-395-B6990-D43" pwa-fake-editor="">**

How shall I get the value present in the value tag of this Inner html?

Thanks in advance

Answer 1

You can retrieve the value of <input> elements nested inside the table cells, using col.querySelector('input').value .

I crafted this demo on top of your code:

 var table = document.getElementById("data"); for (var i = 0, row; row = table.rows[i]; i++) { for (var j = 0, col; col = row.cells[j]; j++) { const inputElement = col.querySelector('input'); //just in case there's no input element inside the td if (inputElement !== null){ const value = inputElement.value; console.log( value ); } } }

 tr{ display: flex; flex-direction: column; }

 <table id="data"> <tr> <td> <input type="text" name="id" id="id" value="<%=rn%>"> </td> <td> <input type="text" name="name" id="name" value="<%=na%>"> </td> <td> <input type="text" name="location" id="location" value="<%=pe%>"> </td> <td> <input type="text" name="nbed" id="nbed" value="<%=ad%>"> </td> <td> <input type="text" name="obed" id="obed" value="<%=obed%>"> </td> <td> <input type="text" name="ibed" id="ibed" value="<%=ibed%>"> </td> </tr> </table>