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.

You're getting html of the cell. It's the input itself. Go one level deeper and get value of that input. — Sergio Tulentsev, Mar 22 '12 at 13:19

score 40 · Accepted Answer · answered Mar 22 '12 at 13:19

40

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

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

answered Mar 22 '12 at 13:19

Niet the Dark Absol

320,036
81
464
592

Cheers, that works perfectly. I knew it was going to be something simple. Will accept your answer when I can (have to wait 5 minutes it seems) – AdamM Mar 22 '12 at 13:28
@Niet the Dark Absol , Can you explain, what is role of rows[],cells[] and chldren[]? – Sagar Vaghela Nov 21 '13 at 06:30
Exactly what they say on the tin. `rows[]` is an array* that all tables have, that contains the rows of said table. `cells[]` is an array* that all table rows have, that contains the cells of said row. `children[]` is an array* all elements have, that contains the child elements of said element. *array should be read as "array-like object", because while they can be accessed like arrays they lack array methods. – Niet the Dark Absol Nov 21 '13 at 09:53

score 7 · Answer 2 · answered Mar 22 '12 at 13:29

7

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

answered Mar 22 '12 at 13:29

mgraph

15,238
4
41
75

score 6 · Answer 3 · answered Mar 22 '12 at 13:20

6

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;

answered Mar 22 '12 at 13:20

deed02392

4,799
2
31
48

Copy my answer almost word-for-word, why don't you? – Niet the Dark Absol Mar 22 '12 at 13:21
3

I hardly copied when we answered at the same time. It was a simple answer, let's just put it down to great minds... – deed02392 Mar 22 '12 at 13:23

score 3 · Answer 4 · answered Mar 14 '13 at 16:11

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

score 1 · Answer 5 · answered Mar 22 '12 at 13:29

To get all of the inputs, you should do something like:

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

score 0 · Answer 6 · answered Oct 23 '19 at 17:07

For future readers, here's a full demo snippet with it working... (based on the accepted answer)

Also setup a second function to display the value of the second cell if clicked - to show how to access the value from the next cell.

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

How to retrieve value of input type in a dynamic table

6 Answers6

Linked

Related