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>
Related
I have a code with two calculations
x = a * b * e
and the sum from it (x) shall be added together with c and d
y = c + d + x
how do I do that? The other code I succeeded with, but not to get the sum of X to be added together with C and D
my code looks like below
<form oninput="x.value=(parseFloat(a.value.replace(',','.'))*parseFloat(b.value.replace(',','.'))*parseFloat(e.value.replace(',','.'))).toFixed(2).toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ' ').replace(/[.]/,',');y.value=(parseFloat(c.value.replace(',','.'))+parseFloat(d.value.replace(',','.'))+parseFloat(x.value.replace(',','.'))).toFixed(2).toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ' ').replace(/[.]/,',')">
<table>
<th colspan="2">
bla bla bla
</th>
<tr>
<td>
<label for="a">bla bla:</label>
</td>
<td>
<input type="number" id="a" value="24"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="b">bla bla:</label>
</td>
<td>
<input type="number" id="b" value="25"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="c">bla bla:</label>
</td>
<td>
<input type="number" id="c" value="500"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="d">bla bla:</label>
</td>
<td>
<input type="number" id="d" value="25"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="e">bla bal:</label>
</td>
<td>
<input type="number" id="e" value="25"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="x"> 😟😟😟::</label>
</td>
<td>
<output name="x" for="a b e"></output><br /><br />
</td>
</tr>
<tr>
<td>
<label for="y" style="font-size:20px;color:red"> <b>Bla</b> 😟😟😟::</label>
</td>
<td>
<b><output name="y" for="a b x"></output></b>
</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>
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).
I have CheckBoxList when I have one default value called "Select All" and rest items binded from database:
<asp:CheckBoxList runat="server" ID="chkBxLstSystemTypes" CssClass="chkBxList" RepeatDirection="Horizontal" RepeatColumns="10" TabIndex="2">
<asp:ListItem Value="SelectAll">Select All</asp:ListItem>
I would like to have JavaScript or jQuery function which will check all check boxes when user clicks "Select all" and deselect the check boxes when user deselects the "Select All".
-- EDIT 1
Rendered HTML:
<table id="ctl00_MainContent_chkBxLstSystemTypes" class="chkBxList" border="0">
<tr>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_0" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$0" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_0">Select All</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_1" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$1" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_1">ASG</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_2" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$2" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_2">AVP</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_3" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$3" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_3">CDR</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_4" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$4" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_4">CMS</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_5" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$5" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_5">CUCM_Logins</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_6" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$6" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_6">CUCM_Subscribers</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_7" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$7" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_7">Cybertech</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_8" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$8" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_8">eHealth</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_9" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$9" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_9">Intuity</label>
</td>
</tr>
<tr>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_10" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$10" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_10">MMSMailbox</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_11" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$11" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_11">MMSUser</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_12" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$12" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_12">NICE Perform</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_13" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$13" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_13">PBX</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_14" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$14" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_14">UNITY</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_15" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$15" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_15">VoIP</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_16" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$16" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_16">WebEx</label>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I suggest to use CliendIdMode="static" in your runat="server" elements that you use them in js. You can try this:
$("#ctl00_MainContent_chkBxLstSystemTypes_0").click(function () {
$(this).parents("table").find(":checkbox").prop("checked", $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ctl00_MainContent_chkBxLstSystemTypes" class="chkBxList" border="0">
<tr>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_0" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$0" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_0">Select All</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_1" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$1" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_1">ASG</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_2" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$2" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_2">AVP</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_3" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$3" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_3">CDR</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_4" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$4" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_4">CMS</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_5" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$5" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_5">CUCM_Logins</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_6" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$6" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_6">CUCM_Subscribers</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_7" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$7" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_7">Cybertech</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_8" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$8" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_8">eHealth</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_9" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$9" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_9">Intuity</label>
</td>
</tr>
<tr>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_10" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$10" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_10">MMSMailbox</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_11" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$11" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_11">MMSUser</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_12" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$12" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_12">NICE Perform</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_13" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$13" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_13">PBX</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_14" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$14" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_14">UNITY</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_15" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$15" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_15">VoIP</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_16" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$16" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_16">WebEx</label>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Add this jQuery code & you are done.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.chkBxList input:checkbox:first').change(function(){
var status = $(this).is(':checked');
$('.chkBxList input:checkbox').prop('checked', status);
});
</script>
Jsfiddle: http://jsfiddle.net/y9dhwx72/