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>
Related
I need to calculate selected checkbox only that foreach in a table field (harga_obat*jumlah)
This is my foreach data
#foreach ($obat as $o)
<tr>
<td>
<input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}"
onkeyup="sum()">
</td>
<td>
<input id="jumlah" type="text" class="form-control" name="jumlah" onkeyup="sum()">
</td>
<td>
<input id="total" type="text" class="form-control total-harga" name="total_harga" onkeyup="sum()" readonly>
</td>
</tr>
#endforeach
This is what I have tried, this is just working for one row like picture below
function sum() {
var harga = document.getElementById('harga').value;
var jumlah = document.getElementById('jumlah').value;
var hasil = parseInt(harga) * parseInt(jumlah);
if (!isNaN(hasil)) {
document.getElementById('total').value = hasil;
}
}
You can only use an id once in a page, id = identifier, so you can use the object id to make sure it's unique and pass it to the sum function
For example
#foreach ($obat as $o)
<tr>
<td>
<input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga-{{ $o->id }}" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}"
onkeyup="sum({{ $o->id }})">
</td>
<td>
<input id="jumlah-{{ $o->id }}" type="text" class="form-control" name="jumlah" onkeyup="sum({{ $o->id }})">
</td>
<td>
<input id="total-{{ $o->id }}" type="text" class="form-control total-harga" name="total_harga"
onkeyup="sum({{ $o->id }})" readonly>
</td>
</tr>
#endforeach
<script>
function sum(id) {
var harga = document.getElementById('harga-' + id).value;
var jumlah = document.getElementById('jumlah-' + id).value;
var hasil = parseInt(harga) * parseInt(jumlah);
if (!isNaN(hasil)) {
document.getElementById('total-' + id).value = hasil;
}
}
</script>
Hope this helps
Since you have multiple lines to foreach, you cannot rely on unique ids. One (inelegant?) solution could be to define dynamic different ids for each row and pass that id to your sum method.
Another solution would be to use a more generic approach that bind the sum method to each row, and passing it the parent scope, an only working with the existing ids, like below:
function sum(parent) {
var harga = parent.querySelector('[name="harga_obat"]').value;
var jumlah = parent.querySelector('[name="jumlah"]').value;
var hasil = parseInt(harga) * parseInt(jumlah);
if (!isNaN(hasil)) {
parent.querySelector('[name="total_harga"]').value = hasil;
}
}
function bind(el) {
el.addEventListener('keyup', function (event) {
sum(event.currentTarget.closest("tr"));
});
}
document.querySelectorAll('[name="harga_obat"]').forEach(function (element) {
bind(element);
});
document.querySelectorAll('[name="jumlah"]').forEach(function (element) {
bind(element);
});
<table>
<tr>
<td>
<input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}">
</td>
<td>
<input id="jumlah" type="text" class="form-control" name="jumlah">
</td>
<td>
<input id="total" type="text" class="form-control total-harga" name="total_harga" readonly>
</td>
</tr>
<tr>
<td>
<input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}">
</td>
<td>
<input id="jumlah" type="text" class="form-control" name="jumlah">
</td>
<td>
<input id="total" type="text" class="form-control total-harga" name="total_harga" readonly>
</td>
</tr>
</table>
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>
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>
I am trying to create an array from the content of a table. The content of the tables looks something like this:
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
And the script that I have written is like this
$(document).on('click', '#guardarBtn', function (event) {
var content=[];
$('.rowUpdate').each(function (i) {
$(this).find('td').each(function (j, v) {
if (j != 0) {
var input = $("input", this),
name = input.attr("name").substring(0, input.attr("name").length),
value = input.val();
alert(value);
content[name] = value;
alert(JSON.stringify(content));
}
});
//alert(content);
rows.push(content);
});
});
But when I click on the button to get the content of the columns of the table and save it in an array it shows blank
UPDATED Js Fiddle link is here
Thanks in advance
Check this one. I changed var content= []; to var content= {};
$(document).on('click', '#guardarBtn', function (event) {
var content= {};
$('.rowUpdate').each(function (i) {
$(this).find('td').each(function (j, v) {
if (j != 0) {
var input = $("input", this),
name = input.attr("name").substring(0, input.attr("name").length),
value = input.val();
content[name] = value;
// alert(JSON.stringify(content));
}
});
alert(JSON.stringify(content));
// rows.push(content);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
Try this (keep the HTML the same):
$(document).on('click', '#guardarBtn', function (event) {
var rows = [];
$('.rowUpdate').each(function (i) {
var row = {};
$(this).find('td').each(function (j, v) {
if (j != 0) {
var input = $("input", this),
name = input.attr("name").substring(0, input.attr("name").length),
value = input.val();
row[name] = value;
}
rows.push(row);
});
});
Shorter way to access :
$(document).on('click', '#guardarBtn', function (event) {
var content = {};
$('.rowUpdate').each(function (i) {
$(this).find('input[type=text]').each(function(){
content[$(this).attr("name")] = $(this).val();
});
});
alert(JSON.stringify(content));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
Try This :
<form name="form_name" id='form_name'>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
</form>
js Here :
$(document).on('click', '#guardarBtn', function (event) {
var row=[];
$('.rowUpdate').each(function (i) {
var content=[];
$(this).find('input').each(function(key,value){
var field_name=$(this).attr('name');
var field_value=$(this).val();
content[field_name]=field_value;
});
row.push(content);
});
console.log(row);
});
If I well understand the question, you just need for something like this (I'm not sure however why you used nested each loops - is there any reason of this? Do you have more code in between these loops?)
$(document).on('click', '#guardarBtn', function(e){
var content={};
$('.rowUpdate td').find('input').each(function(){
content[this.name] = this.value;
});
alert(JSON.stringify(content));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
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).