Obtain the value from an element inside an html table

Question

I have a page with a table with inputs fields in its cells and I want to jump from row to row and cell to cell to obtain that values with javascript/jquery. I can access to the cell but I haven't found a way to access to the element inside the cell.

I tried with

$('#tblIssues tr:eq(1) td:eq(1)').html()

and it returns the html code inside my td but not the value.

The element inside the cell table can be a text area, input text or combobox. I want the value of that element.

I want to use something like a double for to go through the table and save that information into an array.

`$('#tblIssues tr:eq(1) td:eq(1) :input').val()` `:input` will match any kind of user input field. — Barmar, Jul 05 '19 at 20:37
My guess is the Issue is OP is expecting value in the HTML to be there, it does not update the attribute.... — epascarello, Jul 05 '19 at 20:37
https://stackoverflow.com/questions/7986026/html-input-is-not-updating-value-attribute-on-change — epascarello, Jul 05 '19 at 20:38

score 1 · Answer 1 · answered Jul 05 '19 at 20:44

If you want to create a 2-dimensional array of values, use nested .map() calls to loop over the rows for the first dimension, and all the input fields for the second dimension.

Use the .value property of the inputs to get the current value.

var valArray = $.each("#tblIssues tr").map(function() {
    return $(this).find(":input").map(function() {
        return this.value;
    }).get();
}).get();

score 0 · Answer 2 · answered Jul 05 '19 at 22:29

If I understand your question you wish to obtain the value of input elements from within a table? and you wish to return the value for all of them separately? html is used to obtain to contents of an element i.e:

$(function() {
$("div.header").html();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="headercontainer">
<div class="header">Hello World!</div>
</div>

would return :

Hello World!

I think it would be best to look at https://api.jquery.com/html/ for more info as it can also be used to show the actual html within a container etc.

One approach to getting values for each input field would be making use a class that is similar for each input, you can have several classes separated by a space which can then be called upon. Something like this:




function Myfunc() {
var totals = 0;
$(".classa").each(function() {
totals += +$(this).val();
});
$("#total").val(totals);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table> 
<tr>
<td>
<form>
<input type="text" class="classa classb classc" value="1" id="id1">
<input type="text" class="classa classd classe" value="2" id="id2">
<input type="text" class="classa classf classg" value="3" id="id3">
</form>
</td>
</tr>
</table>
<br>
<input type="button" class="button" id="getvalue" value="Add up values!" onclick="Myfunc()">
<br>
<label for="total">
<input type="text" class="total" id="total">
</label>

Alternatives if you wish to add text values together to make a sentence perhaps something like this would be of more interest to you :



function Myfunc() {
    var first = $("input.classb").val();
    var second = $("input.classd").val();
    var third = $("input.classf").val();
    var sumtext = (first + ' ' + second + ' ' + third );
    $("#totsent").val(sumtext); 
    console.log(first);
    console.log(second);
    console.log(third);
    console.log(sumtext);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table> 
    <tr>
    <td>
    <form>
    <input type="text" class="classa classb classc" value="Hello" id="id1">
    <input type="text" class="classa classd classe" value="Beautiful" id="id2">
    <input type="text" class="classa classf classg" value="World!" id="id3">
    </form>
    </td>
    </tr>
    </table>
    <br>
    <input type="button" class="button" id="getvalue" value="Add up text!" onclick="Myfunc()">
    <br>
    <label for="totsent">
    <input type="text" class="sentence" id="totsent">
    </label>

Maybe this answer helps, maybe it doesn't, I'm still fairly new to Jquery and JavaScript but i hope it does.

score 0 · Answer 3 · answered Jul 06 '19 at 08:02

In one line of plain JavaScript -- every value of every form field can be collected as an array.

Wrap <table> in a <form> tag
```
<form><table>...</table></form>
```
Reference the form ([0] will target the first form tag on page)
```
document.forms[0]
```
Collect all form controls into a HTML Collection (an array-like object)
```
.elements
```
Convert HTML Collection into an array
```
Array.from(...)
```
For every field in array return its value in a new array
```
.map(field => field.value)
```

Demo

const values = Array.from(document.forms[0].elements).map(field => field.value);
console.log(values);

.as-console-wrapper {
  width: 20%;
  margin-left:80%;
  overflow-y:scroll
}
.as-console-row.as-console-row::after {
  content:'';
  padding:0;
  margin:0;
  border:0;
  width:0;
}

<form>
<table>
  <tr><td><input value='A'></td><td><select><option value='A'>A</option><option value='B' selected>B</option><option value='C'>C</option></select></td><td><textarea>ABC</textarea></td></tr>
  <tr><td><input value='D'></td><td><select><option value='D'>D</option><option value='E'>E</option><option value='F' selected>F</option></select></td><td><textarea>DEF</textarea></td></tr>
  <tr><td><input value='G'></td><td><select><option value='G' selected>G</option><option value='H'>H</option><option value='I'>I</option></select></td><td><textarea>GHI</textarea></td></tr>
  <tr><td><input value='J'></td><td><select><option value='J'>J</option><option value='K' selected>K</option><option value='L'>L</option></select></td><td><textarea>JKL</textarea></td></tr>
  <tr><td><input value='M'></td><td><select><option value='M'>M</option><option value='N'>N</option><option value='O' selected>O</option></select></td><td><textarea>MNO</textarea></td></tr>
  <tr><td><input value='P'></td><td><select><option value='P' selected>P</option><option value='Q'>Q</option><option value='R'>R</option></select></td><td><textarea>PQR</textarea></td></tr>
  <tr><td><input value='S'></td><td><select><option value='S'>S</option><option value='T' selected>T</option><option value='U'>U</option></select></td><td><textarea>STU</textarea></td></tr>
  <tr><td><input value='V'></td><td><select><option value='V'>V</option><option value='W'>W</option><option value='X' selected>X</option></select></td><td><textarea>VWX</textarea></td></tr>
  <tr><td><input value='Y'></td><td><select><option value='Y'>Y</option><option value='Z' selected>Z</option></select></td><td><textarea>YZ</textarea></td></tr>
</table>
</form>

Obtain the value from an element inside an html table

3 Answers3

Demo