how to generate object from variants using jquery - javascript

I'm trying to generate objects from array variants using jquery but i didn't get proper solution for that can anyone help?
here is my HTML code.
<table>
<tr class="variants">
<td>
100g/
<input id="100g" name="variant_name" type="hidden" value="100g">
m/
<input id="m" name="variant_name" type="hidden" value="m">
blue
<input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>...</td>
<td>...</td>
</tr>
<tr/>....</tr>
<tr/>....</tr>
I need output something like that.
{
"100g":{
"m":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
},
"s":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
}
},
"200g":{
"m":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
},
"s":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
}
}}
here is fiddle link for more information.
https://jsfiddle.net/fhLqsz3w/
It would be greatly appreciated if someone helped me


You can iterate through each tr of the table. Iterate through all the input tag of a row. For all the hidden input, if the key (value is the value of the input element) is present, move to next object otherwise create an object corresponding to that key. For all the non-hidden field, accumulate values in an object accumulator, after exiting the loop, now add the non-hidden object to the original object.
$('#update_btn').click(function(e) {
var obj = {};
$('table tbody tr').each(function() {
var temp = obj;
var notHidden = {};
$(this).find('input').each(function(i,e) {
if(e.type=="hidden"){
if(!(e.value in temp))
temp[e.value] = {};
temp = temp[e.value];
}
//added textbox value
if(e.type!="hidden"){
notHidden[e.getAttribute('name')] = e.value;
}
})
Object.assign(temp, notHidden);
});
console.log(obj);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-hover table-condensed" id="variants">
<tbody>
<tr><th> Variant </th> <th> SKU </th><th>Cross Price and Price</th> <th> Qty</th> <th> Image Link/ID </th></tr>
<tr class="variants">
<td>
100g/ <input id="100g" name="variant_name" type="hidden" value="100g">
m/ <input id="m" name="variant_name" type="hidden" value="m">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
100g/ <input id="100g" name="variant_name" type="hidden" value="100g">
s/ <input id="s" name="variant_name" type="hidden" value="s">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
200g/ <input id="200g" name="variant_name" type="hidden" value="200g">
m/ <input id="m" name="variant_name" type="hidden" value="m">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-7">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
200g/ <input id="200g" name="variant_name" type="hidden" value="200g">
s/ <input id="s" name="variant_name" type="hidden" value="s">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-7">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr></tbody>
</table>
<button id="update_btn">click
</button>

Related

How to get JSON data from HTML form with backbone js

I am creating a dynamic form in a Backbone.js view. I want to get all the JSON data from the form in my view without using jQuery. Is there any way to get the data?
For example: When You check the checkbox, I only want the data for the checked field.
<table class="table">
<thead>
<tr>
<th></th>
<th>{{labels.selectImage}}</th>
<th>{{labels.nameVisibleToShop}}</th>
<th>{{labels.sourceCode}}</th>
<th>{{labels.pricePerItem}}</th>
</tr>
</thead>
<tbody>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
</tbody>
</table>

Reading data from tr with an id inside the tbody

I am trying to read data from input field inside "td" with an id inside the "tbody"
The html structure is like this:
<tbody id="tbody1">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
Here the "tbody" id is changing dynamically and tr can be in between 1 to 10 for each "tbody".
What i want is to read all the data of "bacthNo","location" and "qty" for each tbody and push into an array on form submit. I had tried several approach but not able to fetch data from this complicated form.
Kindly Help.

apply class to all of your fields and then access using each function of jquery like this
<tr>
<td>
<input type="text" id="bacthNo" class="bacthNo form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="location form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="qty form-control md-has-value" required="">
</td>
$('#tbody1').find('tr').each(function () {
var eachtr = $(this);
eachtr.find('.bacthNo').val();
eachtr.find('.location').val();
eachtr.find('.qty').val();
//get your all fields
}
for example see this jsfiddle

$('#tblOne > tbody > tr').each(function() {
alert($(this).find("td:first>input").val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblOne">
<tbody id="tbody1">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
</table>

something like this:
document.addEventListener("DOMContentLoaded", function (event) {
var _rows = document.querySelectorAll('table tr');
//depending on your markup you could use also:
// var _rows = document.querySelectorAll('tr');
// var _rows = document.querySelectorAll('tbody tr');
//or THE WORST CASE if you cannot really change your html:
//document.querySelectorAll('tbody[id*="tbody"] tr');
_rows.forEach(function (row) {
var _bacthNo = row.querySelector('#bacthNo');
var _location = row.querySelector('#location');
var _qty = row.querySelector('#qty');
console.log(_bacthNo.value)
console.log(_location.value)
console.log(_qty.value)
});
});
<table>
<tbody id="tbody1">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
</table>

Autofill other fields automatically if one field is entered with jquery

Please check my fiddle.
Fiddle
When i enter any data in any rows in slab_range, i need to autofill all the other rows of 'Slab Range' with a value 'No Bid'. If i left blank, nothing has to be filled. Likewise if i enter any data in 'Part Number', all the other rows of 'Part Number' has to be filled with value '2'. The rows are coming from db, so i cant tell how many rows it will be, it should iterate all the rows.
<tr>
<td>
<input size="1" id="sl[0]" name="sl[0]" value="1" type="text">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>

There you go, now it's your task to refactoring the code because both methods are equals.
var ProcessTable = (function () {
var _slabs, _partsNumber;
var _init = function () {
_slabs = $('input[name^="slab_range"]');
_partsNumber = $('input[name^="item_partno"]');
_slabs.on('blur', _slabBlurHandler);
_partsNumber.on('blur', _partNumberBlurHandler);
};
var _slabBlurHandler = function (e) {
var value = $.trim($(this).val());
if (value !== '') {
_slabs.val('No bid');
} else {
_slabs.val('');
}
$(this).val(value); // Because the previous line override the original value
};
var _partNumberBlurHandler = function (e) {
var value = $.trim($(this).val());
if (value !== '') {
_partsNumber.val('2');
} else {
_partsNumber.val('');
}
$(this).val(value); // Because the previous line override the original value
};
return {
init: _init
}
})();
ProcessTable.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cart1" name="cart" method="post" class="single" action="price_edit_save.php?supplier_name=Jupiter+Microwave+Components+Inc&tender_id=151501">
<div class="clone_row">
<table style="border-collapse: collapse;" id="table" border="1" cellpadding="2" cellspacing="2" width="100%">
<thead>
<tr bgcolor="#E6E6FA">
<th width="4%">SlNo</th>
<th width="4%">Slab Range</th>
<th width="6%">Part Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input size="1" name="id[0]" value="9978" readonly="readonly" type="hidden">
<input size="1" id="sl[0]" name="sl[0]" value="1" type="text">
<input size="1" id="item_id[0]" name="item_id[0]" readonly="readonly" type="hidden">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>
<tr>
<td>
<input size="1" name="id[1]" value="9979" readonly="readonly" type="hidden">
<input size="1" id="sl[1]" name="sl[1]" value="2" type="text">
<input size="1" id="item_id[1]" name="item_id[1]" readonly="readonly" type="hidden">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>
<tr>
<td>
<input size="1" name="id[1]" value="9979" readonly="readonly" type="hidden">
<input size="1" id="sl[1]" name="sl[1]" value="2" type="text">
<input size="1" id="item_id[1]" name="item_id[1]" readonly="readonly" type="hidden">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>
</tbody>
</table>
</div>
<div class="addMoreDIV">
</div>
<table>
<tr>
<td>
<input value="--Update Data--" type="submit">
</td>
</tr>
</table>
</form>
And please, be more kindly when you ask for "help".

Generate Array of numbers from sudoku table HTML table

I have a simple HTML table setup to look like a sudoku board. Each cell is a input with type = number.
I want to use jQuery to extract all of the numbers from each cell and generate an array of arrays. The array will be formatted like this:
array = [ [1,2,3,4,5,6,7,8,9],
[2,3,4,5,6,7,8,9,1],
[3,4,5,6,7,8,9,1,2],
[1,2,3,4,5,6,7,8,9],
[2,3,4,5,6,7,8,9,1],
[3,4,5,6,7,8,9,1,2],
[1,2,3,4,5,6,7,8,9],
[2,3,4,5,6,7,8,9,1],
[3,4,5,6,7,8,9,1,2]]
Here is a fiddle of my general set up: Sudoku Board Fiddle
the css is taken from this answer sudoku css
Essentially the HTML is set up like this:
<table id='#table'>
<tr id="row1">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
.... x9 rows
</form>
I want to make a function with jQuery that on the click of a button, it converts each row into an array and puts each array into one array.
My approach:
Use jQuery to select the table. Loop through each table row. Nest a loop to loop over each input and append each value to arrays.
This is what I have so far (it does not work at all. It just logs an empty array, even if I populate the table with values).
var array = [];
$('button').on('click', function(){
event.preventDefault();
$('table').children('tr').each(function(){
$(this).find('input').each(function(){
array.push($(this).val());
});
});
alert(array);
});

You should have another array for each tr and after all td iterations, push that array in main array
Fiddle here
$('button').on('click', function() {
event.preventDefault();
var array = [];
$('#table').find('tr').each(function() {
var arr = [];
$(this).find('input').each(function() {
arr.push($(this).val());
});
array.push(arr);
});
console.log(array);
});
table {
margin: 1em auto;
}
td {
height: 30px;
width: 30px;
border: 1px solid;
text-align: center;
}
td:first-child {
border-left: solid;
}
td:nth-child(3n) {
border-right: solid;
}
tr:first-child {
border-top: solid;
}
tr:nth-child(3n) td {
border-bottom: solid;
}
input {
width: 30px;
height: 30px;
}
button {
display: block;
margin: 0 auto;
height: 30px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table'>
<tr id="row1">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row2">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row3">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row4">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row5">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row6">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row7">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row8">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row9">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
</table>
<button>Generate Array</button>

There are a couple of problems with your code. First, you're trying to find an element with the ID table (that's what #table targets). You don't have an element with the ID of table, so that instantly doesn't work. So you either need to give you table an ID, or change your selector to get the table. I'll suggest the latter, for now.
$('table')...
Secondly, instead of using .children(), try using the $(selector, parent) shorthand. .children() is awkward in the case of tables; it only selects direct children, and a TR is not a direct child (tbody is the direct child, even if you don't declare it in your markup). I avoid using .children(). If anything, use .find().
$('tr', 'table').each(function() { ... });
Thirdly, you are using event.preventDefault(), but you haven't passed the event paramter to your callback. You need to pass the event, like so:
$('tr', 'table').each(function(event) { ... });
You will still only end up with a 1-dimensional array, not a 2-d array like you'd require, but this fixes the problems you had with your initial code.

First point is, you haven't added id for table element. But you are taking reference of table id in function.That is how it was in fiddle code.
JS Code:
var array = [];
$('button').on('click', function(){
// event.preventDefault();
$('#table').find('tr').each(function(){
var newarr=[];
$(this).find('td input').each(function(){
newarr.push($(this).val());
console.log('newarr:'+newarr);
});
array.push(newarr);
});
console.log(array);
});
I have updated and code and the final result is printing in console.
Check it.

var array = [];
$('button').on('click', function(){
event.preventDefault();
array = [];
$('#table').find("tr").each(function(){
var row = [];
$(this).find('input').each(function(){
row.push($(this).val());
});
array.push(row);
});
console.log(array);
});
table {
margin:1em auto;
}
td {
height:30px;
width:30px;
border:1px solid;
text-align:center;
}
td:first-child {
border-left:solid;
}
td:nth-child(3n) {
border-right:solid ;
}
tr:first-child {
border-top:solid;
}
tr:nth-child(3n) td {
border-bottom:solid ;
}
input {
width:30px;
height: 30px;
}
button {
display: block;
margin: 0 auto;
height: 30px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr id="row1">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row2">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row3">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row4">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row5">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row6">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row7">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row8">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row9">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
</table>
<button>Generate Array</button>

Frozen Columns Vertical Scroll Issue

FIDDLE
I have written code to keep fixed first 2 columns & other columns are horizontally scrollable.
My problem is, I want a fixed height set to the table so that it is vertically also scrollable.
<div class="table-responsive" style="width: 400px; overflow-x:scroll; margin-left:354px;">
<table class="table table-bordered" border="1">
<thead>
<tr class="tblHeadings">
<th class="fixCol1 headCol">
<div style="height: 40px;padding-top: 19px;">Code</div>
</th>
<th class="fixCol2 headCol">
<div style="height: 40px;padding-top: 19px;">Name</div>
</th>
<th style="width:120px;height: 54px;">Days
<input type="hidden" name="monthlyField" value="LD">
</th>
<th style="width:120px;height: 54px;">EARNG1
<input type="hidden" name="monthlyField" value="EARNG1">
</th>
<th style="width:120px;height: 54px;">EARNG2
<input type="hidden" name="monthlyField" value="EARNG2">
</th>
<th style="width:100px">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixCol1">GT001
<input type="hidden" name="empID" value="1">
<input type="hidden" name="empCode" value="GT001">
</td>
<td class="fixCol2">Brock</td>
<td>
<input type="number" max="31" step="0.01" value="" name="1|LD" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|WEEKOFF_DAYS" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG1" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG2" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG3" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG4" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG5" class="form-control tdTextboxes">
</td>
<td>
<button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'1')">Delete</button>
</td>
</tr>
<tr>
<td class="fixCol1">GT002
<input type="hidden" name="empID" value="2">
<input type="hidden" name="empCode" value="GT002">
</td>
<td class="fixCol2">John</td>
<td>
<input type="number" max="31" step="0.01" value="" name="2|LD" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|WEEKOFF_DAYS" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG1" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG2" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG3" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG4" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG5" class="form-control tdTextboxes">
</td>
<td>
<button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'2')">Delete</button>
</td>
</tr>
<tr>
<td class="fixCol1">GT003
<input type="hidden" name="empID" value="3">
<input type="hidden" name="empCode" value="GT003">
</td>
<td class="fixCol2">Walker Ross</td>
<td>
<input type="number" max="31" step="0.01" value="" name="3|LD" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="3|WEEKOFF_DAYS" class="form-control tdTextboxes">
</td>
<td>
<button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'3')">Delete</button>
</td>
</tr>
</tbody>
</table>

Since it looks like you're using Bootstrap, I took the liberty to make a Bootply demo of what you're trying to achieve.
You already had the solution really, the only thing was to apply fixed height to the table-responsive class rather than to the table class.
So I simply added height:200px; to the right class (btw, in general try to avoid in-line styling).

Categories