Table cell value accessing in Javascript

Question

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

each_col.getElementsByTagName('input')[0] or each_col.querySelector('input') — Pranav C Balan
– Pranav C Balan, Commented Aug 11, 2016 at 7:36

baao · Accepted Answer · 2016-08-11 07:42:51Z

2

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()
          ^

edited Aug 11, 2016 at 7:42

answered Aug 11, 2016 at 7:36

baao

73.6k18 gold badges152 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhradip Over a year ago

Thank you very much @mmm

Collectives™ on Stack Overflow

Table cell value accessing in Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related