在Javascript中访问表单元格值

Table cell value accessing in Javascript

本文关键字:单元格 访问表 Javascript      更新时间:2023-09-26

我有一个html表。其中每个表行包含几个输入文本区域,每个输入文本区域都有由javascript动态分配的唯一id。现在我想把表第一列的所有id放到一个数组中。我在这件事上遇到了问题。请帮帮我。

我的表格的Html代码如下:

<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>
现在我的javascript代码来放置输入文本框的id是:
  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);   
    }
  }

我可以访问每个表数据,我的意思是td标签,但由于有<input>标签在每个td标签,那么如何访问输入标签元素?

each_col.getElementByTagName();不工作。抛出错误

请给我一些解决方案。请给我javascript的解决方案(不要jquery)。

由于td标签中总是只有一个元素,因此您可以使用

访问内部元素。
each_col.getElementsByTagName('input')[0];

请记住,getElementsByTagName()返回一个HtmlCollection,而不是单个元素-因此您必须指定要瞄准的元素。

顺便说一句……没有称为getElementByTagName()的方法-这可能是混淆的来源。它是Element的复数形式-> Elements

getElementsByTagName()
          ^