Reputation: 413
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).
Upvotes: 0
Views: 207
Reputation: 73301
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()
^
Upvotes: 2