How to retrieve value of input type in a dynamic table

Question

 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')" />

Okay I have a table set out like this

 <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')" />

I have the JavaScript set up so I can add a row, delete a row which works fine, but I am having real problems trying to get the value of what is inside the input type.

Here is the code I tried to get one of the values

  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);
     }

 }

However the alert box just comes up with:

 <input type="Text">

I want to retrieve the actual value of what's inside the input box. Could anyone tell me what I am doing wrong?

Thanks in advance.

Answer 1

Well you're not even trying to access the value...

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

Answer 2

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

Answer 3

You need to access the input object WITHIN the cell. You're just looking at the HTML within it.

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

Answer 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);
        }            
    }      
}

if you want to get all input fields out of your table