Abhradip Abhradip - 2 months ago 8
HTML Question

Table cell value accessing in Javascript

I have an html table. Where each table row contains several input text areas and each input text area has unique ids assigned by javascript dynamically.Now I want to put all that ids of the 1st column of my table into an array. I am facing problem in this matter. Help me please.

Html code of my table is as follows:

<table id="POITable">
<tr>
<th>Item</th>
<th>Brand</th>
<th>UOM</th>
<th>Quantity</th>
<th>Remarks</th>
</tr>

<tr style="visibility:hidden;"> <!-- This is just a dummy row-->
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><img alt="Icon" src="/assets/add-icon.png" id="addmorePOIbutton" onclick="insRow()" /></td>
<td><img alt="Icon" src="/assets/minus-icon.png" id="delPOIbutton" onclick="deleteRow(this)"/></td>
</tr>

<tr>
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><img alt="Icon" src="/assets/add-icon.png" id="addmorePOIbutton" onclick="insRow()" /></td>
<td><img alt="Icon" src="/assets/minus-icon.png" id="delPOIbutton" onclick="deleteRow(this)"/></td>
</tr>
</table>


Now my javascript code to put the ids of the input text box is:

function make_summary()
{
var arr=new Array();
var x=document.getElementById('POITable');
var size=x.rows.length;

for (i=2;i<=x.rows.length-1;i++)
{
var each_row=x.rows[i];
var each_col=each_row.cells[1];
console.log(each_col);
}
}


I can access each table data, I mean the td tag, But since there is
<input>
tag inside each td tag,so how to access that input tag element?

each_col.getElementByTagName();
is not working. It is throwing error.

Please give me some solutions. Please give me only javascript solutions (no jquery please).

Answer

As there's always only one element in your td tags, you can just access the inner element with

each_col.getElementsByTagName('input')[0];

Remember that getElementsByTagName() returns a HtmlCollection, not a single element - so you have to specify which of the elements you want to target.

BTW... There's no method called getElementByTagName() - this might be where the confusion comes from. It's the plural of Element -> Elements

getElementsByTagName()
          ^