Get values from table of text fields javascript - javascript

I have a form which actually is a table of text fields. The html looks like this:
<form>
<table id="table">
<tr>
<th>Player</th>
<th>Number</th>
<th>Con.per.day</th>
<th>P.100.kg</th>
<th>P.day</th>
<th>I.month</th>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td>Result</td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td>Result</td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td>Result</td>
</tr>
</table>
<input type="button" name="rank" value="Rank" onClick="rankPlayers(this.form)"/>
</form>
I would like to iterate all fields and get the values at the press of the button, but I get undefined returned in the console log. I don't want to use IDs for each field as I want to do some column operations (add, multiply). My script for the first column looks like this:
function rankPlayers(){
var table=document.getElementById("table");
for(var i=1; i<table.rows.length;i++){
console.log(table.rows[i].cells[0].value);
}
}
Any tips? Thanks


You need to select the input from the cell:
// ------------------------------------v
console.log(table.rows[i].cells[0].firstChild.value);
If you could have siblings (even whitespace) around the inputs, then you can use the .children collection to target the correct element.
// ------------------------------------v
console.log(table.rows[i].cells[0].children[0].value);


You can change your loop to:
var table=document.getElementsByTagName("td");
for(var i=1; i<table.length;i++){
console.log(table[i].firstChild.value);
}
This gets all td elements, loops them, and checks the firstChild value

Related

Copying TD value to dynamically created input inside a TD

I have a table with dynamically generated td's that contain text inputs and I need to get the value from the first td in the row and insert into one of the inputs depending on what I select in a <select>. This is trigger by a button.
So far I'm able to get the the value I need with first-child and from my select I have the value of the option same as the class of the inputs.
$("#t_a").click(function() {
var selected = $('select[name=t_r]').val();
$("table tr").each(function() {
var s = $(this).find('td:first-child').html();
$(this).find('.' + selected).attr("value", s);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="t_r" name="t_r" style="width:200px;">
<option value="1234">Option 1234</option>
<option value="1235">Option 1235</option>
<option value="1236">Option 1236</option>
</select>
<input type="button" name="t_a" id="t_a" value="Apply" />
<table>
<tr>
<td>123</td>
<td><input type="text" id="a_1234" class="1234" value=""></td>
<td><input type="text" id="a_1235" class="1235" value=""></td>
<td><input type="text" id="a_1236" class="1236" value=""></td>
</tr>
<tr>
<td>321</td>
<td><input type="text" id="b_1234" class="1234" value=""></td>
<td><input type="text" id="b_1235" class="1235" value=""></td>
<td><input type="text" id="b_1236" class="1236" value=""></td>
</tr>
<tr>
<td>456</td>
<td><input type="text" id="c_1234" class="1234" value=""></td>
<td><input type="text" id="c_1235" class="1235" value=""></td>
<td><input type="text" id="c_1236" class="1236" value=""></td>
</tr>
</table>

With the help of monkawitz and user7290573 I was able to solve my problem by using val() instead of attr().
Thank you Tim Lewis for the guidance.

How To get Multidimensional Input Fields Array Index with JavaScript?

This my sample HTML form with multidimensional input fields
<tr>
<td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
<td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
<td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
<td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
</tr>
Lets say I'm writing on ID diameter_bottom5 input. And onkeyup I need index of diameter of input field. In this example it would be 5.
I don't want to use regex or slice in name or id attribute.
I don't want to create custom attribute to store index.
How can get multidimensional input fields array index in which I'm currently typing using JavaScript?

If you are O.K. with the 'order index' of your table data, you can do it like that (obviously, this wouldn't work if your 'numbering' won't match given order and/or amount of inputs):
const tableData = [...document.getElementById('myTable').getElementsByTagName('td')]
tableData.forEach((item, i) => item.addEventListener('keyup', () => {
console.log(i)
}), false);
<table id='myTable'>
<tr>
<td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
<td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
<td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
<td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
</tr>
</table>

how can I take data from a dynamic table row by row using php

So basically I am looking for a way to take data from a dynamic table that is filled by the user and put it in a mysql database. The only part I am finding hard is reading row by row. Since this is a responsive dynamic table that lets the user add and delete rows, the name of the input tags remains the same row by row. Here is a sample of my code.
<table>
<tr>
<td><input type="text" name="foo"> </td>
<td><input type="text" name="bar"></td>
</tr>
<tr>
<td><input type="text" name="foo"> </td>
<td><input type="text" name="bar"></td>
</tr>
<tr>
<td><input type="text" name="foo"> </td>
<td><input type="text" name="bar"></td>
</tr>
</table>
Thank you

You can use array-notation, and this way when you post the values to the server - php will treat them as array:
<table>
<tr>
<td><input type="text" name="foo[]"> </td>
<td><input type="text" name="bar[]"></td>
</tr>
<tr>
<td><input type="text" name="foo[]"> </td>
<td><input type="text" name="bar[]"></td>
</tr>
<tr>
<td><input type="text" name="foo[]"> </td>
<td><input type="text" name="bar[]"></td>
</tr>
</table>
In your php code you will get
$_POST['foo'][0] = 'text1';
$_POST['foo'][1] = 'text2';
$_POST['foo'][2] = 'text3';
And this way you can have as many values as you want.

Get all input values from table excluding first column

I want to alert the input value of each row except the first column.
Here is my code.
<table id="table">
<tr>
<td><input type="text" size="5" value="name"/></td>
<td><input type="text" size="5" value="number"/></td>
<td><input type="text" size="5" value="class"/></td>
</tr>
<tr>
<td><input type="text" size="5" value="bbbbb"/></td>
<td><input type="text" size="5" value="1"/></td>
<td><input type="text" size="5" value="2"/></td>
</tr>
<tr>
<td><input type="text" size="5" value="cccc"/></td>
<td><input type="text" size="5" value="5"/></td>
<td><input type="text" size="5" value="2"/></td>
</tr>
<tr>
<td><input type="text" size="5" value="ddddd"/></td>
<td><input type="text" size="5" value="1"/></td>
<td><input type="text" size="5" value="2"/></td>
</tr>
$(document).ready(function() {
$("#table tr:gt(0) td:gt(0) ").each(function()
{
a=$(this).find('input[type="text"]').val();
alert(a);
});
});
While running this code all value alerted except "bbbb". (ie,ccccc ,dddd alerted.). I only need each rows second one column onwords.
fiddle: https://jsfiddle.net/k1tfo5kb/

This should work:
https://jsfiddle.net/23jcejbm/
$(document).ready(function() {
var $cells = $("#table tr td").not(':first-child'),
$inputs = $cells.find('input[type="text"]');
$.each($inputs, function(){
var value = this.value;
alert(value);
});
});

Here you go: https://jsfiddle.net/pukw0uLz/1/
I changed alert to console.log, much less aggressive. Make sure to open you web console!

Count number of columns in a table row

I have a table similar to:
<table id="table1">
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<table>
I want to count the number of td element in a row. I am trying:
document.getElementById('').cells.length;
document.getElementById('').length;
document.getElementById('').getElementsByTagName('td').length;
It did not show actual result.

document.getElementById('table1').rows[0].cells.length
cells is not a property of a table, rows are. Cells is a property of a row though

You could do
alert(document.getElementById('table1').rows[0].cells.length)
fiddle here http://jsfiddle.net/TEZ73/

Why not use reduce so that we can take colspan into account? :)
function getColumns(table) {
var cellsArray = [];
var cells = table.rows[0].cells;
// Cast the cells to an array
// (there are *cooler* ways of doing this, but this is the fastest by far)
// Taken from https://stackoverflow.com/a/15144269/6424295
for(var i=-1, l=cells.length; ++i!==l; cellsArray[i]=cells[i]);
return cellsArray.reduce(
(cols, cell) =>
// Check if the cell is visible and add it / ignore it
(cell.offsetParent !== null) ? cols += cell.colSpan : cols,
0
);
}

Count all td in table1:
console.log(
table1.querySelectorAll("td").length
)
<table id="table1">
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<table>
Count all td into each tr of table1.
table1.querySelectorAll("tr").forEach(function(e){
console.log( e.querySelectorAll("td").length )
})
<table id="table1">
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<table>

It's a bad idea to count the td elements to get the number of columns in your table, because td elements can span multiple columns with colspan.
Here's a simple solution using jquery:
var length = 0;
$("tr:first").find("td,th").each(function(){
var colspan = $(this).attr("colspan");
if(typeof colspan !== "undefined" && colspan > 0){
length += parseInt(colspan);
}else{
length += 1;
}
});
$("div").html("number of columns: "+length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>single</td>
<td colspan="2">double</td>
<td>single</td>
<td>single</td>
</tr>
</table>
<div></div>
For a plain Javascript solution, see Emilio's answer.

First off, when you call getElementById, you need to provide an id. o_O
The only item in your dom with an id is the table element. If you can, you could add ids (make sure they are unique) to your tr elements.
Alternatively, you can use getElementsByTagName('tr') to get a list of tr elements in your document, and then get the number of tds.
here is a fiddle that console logs the results...

If the colspan or rowspan is all set to 1, counting the children tds will give the correct answer. However, if there are spans, we cannot count the number of columns exactly, even by the maximum number of tds of the rows. Consider the following example:
var mytable = document.getElementById('table')
for (var i=0; i < mytable.rows.length; ++i) {
document.write(mytable.rows[i].cells.length + "<br>");
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 3px;
}
<table id="table">
<thead>
<tr>
<th colspan="2">Header</th>
<th rowspan="2">Hi</th>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">hello</td>
<td>world</td>
</tr>
<tr>
<td>hello</td>
<td colspan="2">again</td>
</tr>
</tbody>
</table>

Here is a terse script taking into account colspan.
numCols will be 0 if the table has no rows, or no columns, and it will be equal to the number of columns regardless of whether some of the cells span multiple rows or columns, as long as the table markup is valid and there are no rows shorter or longer than the number of columns in the table.
const table = document.querySelector('table')
const numCols = table.rows[0]
? [...table.rows[0].cells]
.reduce((numCols, cell) => numCols + cell.colSpan , 0)
: 0

<table id="table1">
<tr>
<td colspan=4><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<table>
<script>
var row=document.getElementById('table1').rows.length;
for(i=0;i<row;i++){
console.log('Row '+parseFloat(i+1)+' : '+document.getElementById('table1').rows[i].cells.length +' column');
}
</script>
Result:
Row 1 : 1 column
Row 2 : 4 column

$('#table1').find(input).length

Categories

Resources