CODEWITHSUNDEEP
javascripthtmlinputhtml-tablecell
Sid G.
Sid G.

Reputation: 100

Retrieving values from input elements in a table in HTML

I have a table set up as such:

<table id="mantab" style="cursor:pointer;" onkeypress="scan(event)">
<tr>
  <a href="#" data-popover=".popover-help" class="open-popover modal-in"></a>
  <td><input type='text' placeholder="Term" id='inp1' class="inp1" /></td>
  <td><input type='text' placeholder="Definition" id='inp2' class="inp2" /></td>
</tr>
</table>

An action can be taken to add a row to this table, which is done by inserting a cell via the insertCell method and setting that cell's innerHTML appropriately.

What I've been trying to do is iterate through the first column of the table and add up all the values from inputs in each cell (after they've been entered) in a comma separated string. This process should be repeated for the second column.

The problem:

None work, some return blank, most undefined. The innerHTML one returns the input element inside the cell, but there is no actual text input data.

If a clearer picture of what I'm looking at is needed, see the following:

enter image description here

This should return one variable containing a string: "KeyA,KeyB,KeyC" and another with: "ValueA,ValueB,ValueC"

I'm somewhat new to javascript, but I have a basic knowledge of a couple other languages. I'm not sure why iterating through a table is posing such a challenge. Any help clarifying how I can extract these "invisible" values would be appreciated. Thanks.

Here is one of many approaches that isn't working for me:

for (var i = 0, row; row = table.rows[i]; i++) {
   for (var j = 0, col; col = row.cells[j]; j++) {
       if(j == 0) { //if first column
            words += col.getElementsByClassName("inp1").value + ","; //inp1 refers to first column input class name
       } else {
            defs += col.getElementsByClassName("inp2").value + ","; //inp2 refers to second column input class name
      }
   }
}

In this example, words is analagous to the first variable from the image above, and defs to the second.

Update: logging the values and the element responsible for providing the values resulted in this:

enter image description here

The first log is blank, and the second has no value assigned, even though I typed in something.

Upvotes: 1

Views: 3437

Answers (2)

Zeeshan
Zeeshan

Reputation: 619

You can do something like this using jQuery selectors

$("#bt").click(function()
{
  var keys = [], values = [];

  $('table tr input').each(function(i,e){
  //access the input's value like this:
    var $e = $(e);
    if($e.hasClass('key')){
    	keys.push($e.val());
    }else{
    values.push($e.val());
    }
});  
  keys = keys.join(',');
  values = values.join(',');
  console.log(keys);
  console.log(values);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mantab" style="cursor:pointer;">
<tr>
  <a href="#" data-popover=".popover-help" class="open-popover modal-in"></a>
  <td><input type='text' placeholder="Term" id='inp1' class="key" /></td>
  <td><input type='text' placeholder="Definition" id='inp2' class="value" /></td>
</tr>
<tr>
  <a href="#" data-popover=".popover-help" class="open-popover modal-in"></a>
  <td><input type='text' placeholder="Term" id='inp1' class="key" /></td>
  <td><input type='text' placeholder="Definition" id='inp2' class="value" /></td>
</tr>
</table>

<button id="bt">
Get Value
</button>

Upvotes: 1

Yair Nevet
Yair Nevet

Reputation: 13003

what about using jQuery and finding all inputs in a table:

$('table input').each(function(i,e){
  //access the input's value like this:
  console.log($(e).val());
});

Upvotes: 0

Related Questions