1

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:

  • Everything I attempt to read is undefined

    I've tried the following approaches to retrieving the contents of a cell:

    document.getElementById("id").value,

    document.getElementByClassName("classname").value,

    table.rows[0].cells[0].value,

    table.rows[0].cells[0].val(),

    table.rows[0].cells[0].innerHTML,

    table.rows[0].cells[0].children[0].val()

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.

Improve this question
8
  • I'm assuming your values are numbers, then u can try parseFloat(col.getElementsByClassName("inp1").value) Commented Aug 28, 2016 at 7:55
  • in case this is not number you can simply call value on input Commented Aug 28, 2016 at 7:57
  • here is a JsFiddle that works. you must have some kind of other problem in your page. Commented Aug 28, 2016 at 8:02
  • getElementsByClassName returns an array of objects. so you have to iterate over them and then call value for each one. Commented Aug 28, 2016 at 8:04
  • The values are strings. I will give the page another look, but for the most part the concept of the input in each cell seems straightforward. Commented Aug 28, 2016 at 8:08

2 Answers 2

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

While the structure of this is definitely what I'm looking for, .val() returns blank output even though there is text written in. Perhaps you can recommend a different method of accessing the input values/tell me how to make the value variable actually update to reflect the cell contents?
just run the snippet it's outputing valid values. There must be something wrong on your page.
My apologies, this is functioning correctly here. I went ahead and integrated your solution into my page without running the code snippet. Thanks for a working response.
I fixed my use of your solution, but it fails to retrieve any value past the first row. Do you have any explanation for this?
This is due to selector $('table tr input:first') and $('table tr input:last').
|
0

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());
});
Improve this answer

5 Comments

I just tried it. The result is a blank console log output (6 times).
there are values in your inputs?
Yes, just double checked. Logging the input elements themselves turns up something like this: <... value>. There's no '=' operator or a value.
should be something like: <input value="bra bla"/>
any idea why value doesnt have any assignment?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.