javascripthtmlhtml-tablejsdomhtml-tableextract

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


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>