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

May 25, 2022

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

>Solution :

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>