如何获取 table 中 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);
                }  
            }

当我迭代这个 table 时，我得到每个 td 标签的 html 部分，

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

如何获取此 Inner html 的值标签中的值？

提前致谢

Answer 1

您可以检索嵌套在 table 个单元格中的 <input> 个元素的值，使用 col.querySelector('input').value。

我在您的代码之上制作了这个演示：

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>

如何获取 table 中 td 标记的内部 html 中的值

How to get the value present in inner html of the td tag in table

javascript

html

html-table

jsdom

html-tableextract