如何在动态表中检索输入类型的值答案

【问题标题】：How to retrieve value of input type in a dynamic table如何在动态表中检索输入类型的值
【发布时间】：2019-10-24 01:07:59
【问题描述】：

 function showContent(tableID) {
         var tbl = document.getElementById(tableID);
         var rCount = tbl.rows.length;
         try {
             alert(tbl.rows[rCount - 1].cells[0].innerHTML);

         } catch (e) {
             alert(e);
         }

     }

<table border="1" id="dataTable">
       <tr>
          <td>
              <Strong>Text</Strong>
          </td>
          <td>
              <Strong>Font</Strong>
          </td>
          <td>
              <Strong>Size</Strong>
          </td>
          <td>
              <Strong>Color</Strong>
          </td>
          <tr>
          <td>
              <input type="Text">
          </td>
          <td>
               <input type="Text">
          </td>
          <td>
                <input type="Text">
          </td>
          <td>
                <input type="Text">
          </td>
        </tr>
       </tr>
     </table>
     <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
     <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />       
     <INPUT type="button" value="Show" onclick="showContent('dataTable')" />

好的，我有一张这样的桌子

 <table border="1" id="dataTable">
   <tr>
      <td>
          <Strong>Text</Strong>
      </td>
      <td>
          <Strong>Font</Strong>
      </td>
      <td>
          <Strong>Size</Strong>
      </td>
      <td>
          <Strong>Color</Strong>
      </td>
      <tr>
      <td>
          <input type="Text">
      </td>
      <td>
           <input type="Text">
      </td>
      <td>
            <input type="Text">
      </td>
      <td>
            <input type="Text">
      </td>
    </tr>
   </tr>
 </table>
 <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
 <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />       
 <INPUT type="button" value="Show" onclick="showContent('dataTable')" />

我已经设置了 JavaScript，所以我可以添加一行，删除一行工作正常，但我在尝试获取输入类型内部的值时遇到了真正的问题。

这是我试图获取其中一个值的代码

  function showContent(tableID) {
     var tbl = document.getElementById(tableID);
     var rCount = tbl.rows.length;
     try {
         alert(tbl.rows[rCount - 1].cells[0].innerHTML);

     } catch (e) {
         alert(e);
     }

 }

但是警报框刚刚出现：

 <input type="Text">

我想检索输入框中内容的实际值。谁能告诉我我做错了什么？

提前致谢。

【问题讨论】：

您正在获取单元格的 html。这是输入本身。深入一层并获得该输入的价值。

标签： javascript html

【解决方案1】：

好吧，您甚至都没有尝试访问该值...

alert(tbl.rows[rCount-1].cells[0].children[0].value);

【讨论】：

干杯，效果很好。我知道这将是一件简单的事情。我会尽可能接受你的回答（似乎必须等待 5 分钟）
@Niet the Dark Absol ，你能解释一下 rows[],cells[] 和 chldren[] 的作用是什么吗？
正是他们在罐头上所说的。 rows[] 是所有表都有的数组*，其中包含所述表的行。 cells[] 是一个数组*，所有表行都具有，其中包含所述行的单元格。 children[] 是一个数组* 所有元素都有，它包含所述元素的子元素。 *array 应该被理解为“类数组对象”，因为虽然它们可以像数组一样被访问，但它们缺少数组方法。

【解决方案2】：

alert(tbl.rows[rCount - 1].cells[0].getElementsByTagName("input")[0].value);

【讨论】：

【解决方案3】：

您需要访问单元格内的输入对象。您只是在查看其中的 HTML。

试试tbl.rows[rCount - 1].cells[0].children[0].value;

【讨论】：

几乎逐字复制我的答案，你为什么不呢？
当我们同时回答时，我几乎没有抄袭。这是一个简单的答案，让我们把它归结为伟大的思想......

【解决方案4】：

function neeminhoud3(){
    var tabel = document.getElementById('tableDiagnose');
    var rijen = tabel.rows.length;

    for (i = 0; i < rijen; i++){
        var inputs = tabel.rows.item(i).getElementsByTagName("input");
        var inputslengte = inputs.length;

        for(var j = 0; j < inputslengte; j++){
            var inputval = inputs[j].value;                
            alert(inputval);
        }            
    }      
}

如果您想从表格中取出所有输入字段

【讨论】：

【解决方案5】：

要获取所有输入，您应该执行以下操作：

function get(tableId) {
// returns an array for the values of all input elements in the last row of given table
    var t = document.getElementById(tableId);
    var r = t.rows[t.rows.length-1];
    var inputs = r.getElementsByTagName("input");
    var result = new Array(inputs.length);
    for (var i=0; i<inputs.length; i++)
        result[i] = inputs[i].value; // not innerHTML or something
    return result;
}

【讨论】：

【解决方案6】：

对于未来的读者，这里有一个完整的演示 sn-p 可以正常工作...（基于接受的答案）

还设置了第二个函数，如果单击，则显示第二个单元格的值 - 以显示如何从下一个单元格访问值。

function showText(tableID) {
     var tbl = document.getElementById(tableID);
     var rCount = tbl.rows.length;
     try {
         alert(tbl.rows[rCount-1].cells[0].children[0].value);

     } catch (e) {
         alert(e);
     }

 }
 
 function showFont(tableID) {
     var tbl = document.getElementById(tableID);
     var rCount = tbl.rows.length;
     try {
         alert(tbl.rows[rCount-1].cells[1].children[0].value); // Note changed to cell[1] for the next cell

     } catch (e) {
         alert(e);
     }

 }

<table border="1" id="dataTable">
       <tr>
          <td>
              <Strong>Text</Strong>
          </td>
          <td>
              <Strong>Font</Strong>
          </td>
          <td>
              <Strong>Size</Strong>
          </td>
          <td>
              <Strong>Color</Strong>
          </td>
          <tr>
          <td>
              <input type="Text">
          </td>
          <td>
               <input type="Text">
          </td>
          <td>
                <input type="Text">
          </td>
          <td>
                <input type="Text">
          </td>
        </tr>
       </tr>
     </table>     
     <INPUT type="button" value="Show Text Value" onclick="showText('dataTable')" />
     <INPUT type="button" value="Show Font Value" onclick="showFont('dataTable')" />

【讨论】：