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