Reorder specific rows of a table - javascript

Hello All and Thanks in Advance
This is my problem. I have to sort tables. One table has say total 10 rows. 3 top rows of that tables have fixed values. I want to sort the remaining 7 rows values alphabetically on the basis of first column input.
The other table has same structure. That is first column of the table has an input of type text. But in this table the problem is complex i.e. there are total 12 rows. First 2 rows are fixed. They are not going to move. And also the last row is also fixed. The remaining in between needs to be sorted alphabetically again on the basis of input in the first column.
Third table is the easiest I guess. No rows are fixed. Neither at top nor at bottom. And the rows needs to be sorted.
The table structure that I am following is as follows
<table>
<thead>
<tr>
<th>Column One Heading</th>
<th>Column Two Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='A fixed value' id='Heading' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='1' />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
Kindly note that i do not want the reordering of the table rows. I only want the values inside the first two columns reordered in the rows and rows don't move. Which essentially means the hidden value of a particular row is not changed.
I don't know how to do it but what i feel is right way to go about it is fetch the values of the rows that needs to be sorted into say a JSON Array. Sort that array and then fill the rows with the data.
First Example
<table>
<thead>
<tr>
<th>Column One Heading</th>
<th>Column Two Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='A fixed value' id='Heading1' disabled='disabled' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='1' />
</td>
</tr>
<tr>
<td> <input type='text' value='A fixed value' id='Heading2' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='2' />
</td>
</tr>
<tr>
<td> <input type='text' value='A fixed value' id='Heading3' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='3' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading4'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='4' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading5'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='5' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading6'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='6' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading7'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='7' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading8'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='8' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading9'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='9' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading10'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='10' />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
Second Example
<table>
<thead>
<tr>
<th>Column One Heading</th>
<th>Column Two Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='A fixed value' id='Heading1' disabled='disabled' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='1' />
</td>
</tr>
<tr>
<td> <input type='text' value='A fixed value' id='Heading2' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='2' />
</td>
</tr>
<tr>
<td> <input type='text' value='A fixed value' id='Heading3' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='3' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading4'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='4' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading5'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='5' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading6'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='6' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading7'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='7' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading8'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='8' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading9'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='9' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading10' value='A fixed value' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='10' />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
Third Example
<table>
<thead>
<tr>
<th>Column One Heading</th>
<th>Column Two Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' id='Heading1' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='1' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading2' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='2' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading3'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='3' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading4'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='4' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading5'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='5' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading6'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='6' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading7'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='7' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading8'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='8' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading9'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='9' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading10' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='10' />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>


heres something real quick:
JSFiddle
http://jsfiddle.net/tcy0tmb5/
JS
function sortColumn(staticRowCount, columnToSort) {
var values = [];
$('tr').each(function(index, element) {
if (index > staticRowCount) {
var td = $(element).find('td').get(columnToSort);
values.push($(td).find('input').val());
}
});
//Do the sort
values.sort;
$('tr').each(function(index, element) {
if (index > staticRowCount) {
var val = values.shift();
//if you want to pull form the other side of the array use pop();
var td = $(element).find('td').get(columnToSort);
$(td).find('input').val(val);
}
});
}
sortColumn(3, 0);


You can add a specific class to all the elements that needs to be ordered.
If you just want to order the first elements value you can use this code, after adding a "toBeOrdered" class to the elements:
var objs = document.getElementsByClassName("toBeOrdered");
var array = [];
for ( var i = 0 ; i < objs.length ; i++ ) {
array[i] = objs[i].value;
}
array.sort();
for ( var i = 0 ; i < objs.length ; i++ ) {
objs[i].value = array[i];
}

Related

wy is the function insert() cant insert (+,/,*,-,%,.)sign

I built this calculator with js and html and it work fine ,but when I put the code inside php in echo statement the(+,-,*,/,%,.)signs doesnt work i dont know why?I mean it should dipslay the number and the signs inside the textview the number are fine but the signs doesnt work
<?php echo"
<div class='wrap'>
<form name='form' class='former' action='php/bill.php' method='GET'>
<input class='textview' name='total' value='".$total."' placeholder='مجموع مشترياتك' readonly>
<input type='text' name='ID' value='".$ID."' hidden>
<input type='text' name='name' value='".$name."' hidden>
<input type='text' name='page' value='".$row['href']."' hidden>
<br>
<button class='submit' type='submit' name='submit'>جد</button>
</form>
<table>
<tr>
<td><input class='button' id='c' type='button' value='C' onclick='clean()'></td>
<td><input class='button' type='button' value='<' onclick='back()'></td>
<td><input class='button' type='button' value='%' onclick='insert('%')'></td>//here is th problem
<td><input class='button' type='button' value='/' onclick='insert('/')'></td>
</tr>
<tr>
<td><input class='button' type='button' value='7' onclick='insert(7)'></td>
<td><input class='button' type='button' value='8' onclick='insert(8)'></td>
<td><input class='button' type='button' value='9' onclick='insert(9)'></td>
<td><input class='button' type='button' value='×' onclick='insert('*')'></td>
</tr>
<tr>
<td><input class='button' type='button' value='4' onclick='insert(4)'></td>
<td><input class='button' type='button' value='5' onclick='insert(5)'></td>
<td><input class='button' type='button' value='6' onclick='insert(6)'></td>
<td><input class='button' type='button' value='-' onclick='insert('-')'></td>
</tr>
<tr>
<td><input class='button' type='button' value='1' onclick='insert(1)'></td>
<td><input class='button' type='button' value='2' onclick='insert(2)'></td>
<td><input class='button' type='button' value='3' onclick='insert(3)'></td>
<td><input class='button' type='button' value='+' onclick='insert('+')'></td>
</tr>
<tr>
<td colspan='2'><input class='button' type='button' style='width:106' value='0' onclick='insert(0)'></td>
<td><input class='button' type='button' value='.' onclick='insert('.')'></td>
<td><input class='button' type='button' value='=' onclick='equal()'></td>
</tr>
</table>
</div>";
?>
and this is the javascript code
function insert(num){
document.form.total.value = document.form.total.value+num;
}
function equal(){
var ex = document.form.total.value;
if(ex){
document.form.total.value =eval(ex);
}
}
function clean(){
document.form.total.value = "";
}
function back(){
var ex = document.form.total.value;
document.form.total.value = ex.substring(0,ex.length-1);
}
function forward(){
var ex = document.form.total.value;
document.form.total.value = ex.substring(0,ex.length+1);
}
just for know every thing work fine just th signe are not

Please use the double quotes after the onclick attribute. Currentlt browser is treating onlclick function like onclick='insert(' .
Working code.
function insert(num) {
document.form.total.value = document.form.total.value + num;
}
function equal() {
var ex = document.form.total.value;
if (ex) {
document.form.total.value = eval(ex);
}
}
function clean() {
document.form.total.value = "";
}
function back() {
var ex = document.form.total.value;
document.form.total.value = ex.substring(0, ex.length - 1);
}
function forward() {
var ex = document.form.total.value;
document.form.total.value = ex.substring(0, ex.length + 1);
}
<div class="wrap">
<form name="form" class="former" action="php/bill.php" method="GET">
<input
class="textview"
name="total"
value=''
placeholder="مجموع مشترياتك"
readonly
/>
<input type="text" name="ID" value='".$ID."' hidden />
<input type="text" name="name" value='".$name."' hidden />
<input type='text' name='page' value='".$row['href']."' hidden>
<br />
<button class="submit" type="submit" name="submit">جد</button>
</form>
<table>
<tr>
<td>
<input
class="button"
id="c"
type="button"
value="C"
onclick="clean()"
/>
</td>
<td>
<input class="button" type="button" value="<" onclick="back()" />
</td>
<td>
<input class='button' type='button' value='%' onclick="insert('%')">
</td>
//here is th problem
<td>
<input class='button' type='button' value='/' onclick="insert('/')">
</td>
</tr>
<tr>
<td>
<input class="button" type="button" value="7" onclick="insert(7)" />
</td>
<td>
<input class="button" type="button" value="8" onclick="insert(8)" />
</td>
<td>
<input class="button" type="button" value="9" onclick="insert(9)" />
</td>
<td>
<input class='button' type='button' value='×' onclick="insert('*')">
</td>
</tr>
<tr>
<td>
<input class="button" type="button" value="4" onclick="insert(4)" />
</td>
<td>
<input class="button" type="button" value="5" onclick="insert(5)" />
</td>
<td>
<input class="button" type="button" value="6" onclick="insert(6)" />
</td>
<td>
<input class='button' type='button' value='-' onclick="insert('-')">
</td>
</tr>
<tr>
<td>
<input class="button" type="button" value="1" onclick="insert(1)" />
</td>
<td>
<input class="button" type="button" value="2" onclick="insert(2)" />
</td>
<td>
<input class="button" type="button" value="3" onclick="insert(3)" />
</td>
<td>
<input class='button' type='button' value='+' onclick="insert('+')">
</td>
</tr>
<tr>
<td colspan="2">
<input
class="button"
type="button"
style="width:106"
value="0"
onclick="insert(0)"
/>
</td>
<td>
<input class='button' type='button' value='.' onclick="insert('.')">
</td>
<td>
<input class="button" type="button" value="=" onclick="equal()" />
</td>
</tr>
</table>
</div>

Javascript Radio add value Textarea

Is there any ways to set a textarea when I clicked a radio button at some row (<tr>) ?
function changeTeks(i){
var teks = '';
var row = $(this).parents('tr');
if(i == '1'){
teks = row.find('input[name="brazil[]"]').val();
}else if(i == '2'){
teks = row.find('input[name="normal[]"]').val();
}else if(i == '3'){
teks = row.find('input[name="gagal[]"]').val();
}else{
teks = "belum";
}
row.find('textarea[name="hasil[]"]').text(teks);
console.log(teks);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 1' />
<input type='hidden' name='normal[]' value='not yet in test 1 ' />
<input type='hidden' name='brazil[]' value='success in test 1' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 1</td>
<td><input type='radio' name='target0[]' value='1' onclick='changeTeks(1)' />
</td>
<td><input type='radio' name='target0[]' value='2' onclick='changeTeks(2)' />
</td>
<td><input type='radio' name='target0[]' value='3' onclick='changeTeks(3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 2' />
<input type='hidden' name='normal[]' value='not yet in test 2' />
<input type='hidden' name='brazil[]' value='success in test 2' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 2</td>
<td><input type='radio' name='target1[]' value='1' onclick='changeTeks(1)' />
</td>
<td><input type='radio' name='target1[]' value='2' onclick='changeTeks(2)' />
</td>
<td><input type='radio' name='target1[]' value='3' onclick='changeTeks(3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 3' />
<input type='hidden' name='normal[]' value='not yet in test 3' />
<input type='hidden' name='brazil[]' value='success in test 3' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 3</td>
<td><input type='radio' name='target2[]' value='1' onclick='changeTeks(1)' />
</td>
<td><input type='radio' name='target2[]' value='2' onclick='changeTeks(2)' />
</td>
<td><input type='radio' name='target2[]' value='3' onclick='changeTeks(3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
</table>
I always get undefined value from the parent. I want to fill textarea with text in input type hidden value for each row (because this hidden value is different for each row)

From the Pranav's comment pass this in your function and the use it inside.
function changeTeks(ele,i){
var teks = '';
var row = $(ele).closest('tr');
if(i == '1'){
teks = row.find('input[name="brazil[]"]').val();
}else if(i == '2'){
teks = row.find('input[name="normal[]"]').val();
}else if(i == '3'){
teks = row.find('input[name="gagal[]"]').val();
}else{
teks = "belum";
}
row.find('textarea[name="hasil[]"]').html(teks);
console.log(teks);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 1' />
<input type='hidden' name='normal[]' value='not yet in test 1 ' />
<input type='hidden' name='brazil[]' value='success in test 1' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 1</td>
<td><input type='radio' name='target0[]' value='1' onclick='changeTeks(this,1)' />
</td>
<td><input type='radio' name='target0[]' value='2' onclick='changeTeks(this,2)' />
</td>
<td><input type='radio' name='target0[]' value='3' onclick='changeTeks(this,3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 2' />
<input type='hidden' name='normal[]' value='not yet in test 2' />
<input type='hidden' name='brazil[]' value='success in test 2' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 2</td>
<td><input type='radio' name='target1[]' value='1' onclick='changeTeks(this,1)' />
</td>
<td><input type='radio' name='target1[]' value='2' onclick='changeTeks(this,2)' />
</td>
<td><input type='radio' name='target1[]' value='3' onclick='changeTeks(this,3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 3' />
<input type='hidden' name='normal[]' value='not yet in test 3' />
<input type='hidden' name='brazil[]' value='success in test 3' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 3</td>
<td><input type='radio' name='target2[]' value='1' onclick='changeTeks(this,1)' />
</td>
<td><input type='radio' name='target2[]' value='2' onclick='changeTeks(this,2)' />
</td>
<td><input type='radio' name='target2[]' value='3' onclick='changeTeks(this,3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
</table>

jQuery loop calculation

I am trying to bring some records using php and do some calculations. What i am doing now is that, each row is having a dropdown with different currencies. When i select each currency, it calculates and shows certain values. Till here its working fine.
What i am trying to achieve is that if i select first currency dropdown, it should calculate the complete records calculations instead of selecting the currency of each rows. I guess i need to do some kind of loop in the jquery which calculates the rows.
Fiddle
Fiddle u can see the code, but not getting the output properly. so i just put the code in a server also. Link is http://spreadon.net/quot.html
Following is the part of jquery script for the currency dropdown.
$(window).load(function() {
$(document).ready(function() {
$("select").on('change', function() {
var dept_number = $(this).val();
var price = $(this).find(':selected').data('price');
var selected = $(this).find('option:selected').text();
if (selected == "INR") {
$(this).closest('table').find('.total1').val($(this).closest('table').find('.total').val());
} else {
$(this).closest('table').find('.total1').val((($(this).closest('table').find('.total').val() * price) / $(this).closest('table').find('.inrvalue').val()).toFixed(3));
}
$(this).closest('table').find('.price_unit').val(($(this).closest('table').find('.total1').val() / $(this).closest('table').find('.qty').val()).toFixed(3));
});
});
});

I have added working code which will guide you how to iterate through tr and it td on change of select
see the code it will give you hint about it.
and you have a power of this in each method usind this you can achive your goal.
$(document).ready(function() {
$("select").on('change', function() {
var dept_number = $(this).val();
var price = $(this).find(':selected').data('price');
var selected = $(this).find('option:selected').text();
if (selected == "INR") {
$(this).closest('table').find('.total1').val($(this).closest('table').find('.total').val());
} else {
$(this).closest('table').find('.total1').val((($(this).closest('table').find('.total').val() * price) / $(this).closest('table').find('.inrvalue').val()).toFixed(3));
}
$(this).closest('table').find('.price_unit').val(($(this).closest('table').find('.total1').val() / $(this).closest('table').find('.qty').val()).toFixed(3));
// this is upto your logic.
//now i have write my code which will ittrate through each row and column
$(".trToiitrate").each(function(e) {
alert("it is from tr");
$(this).find("td").each(function(e) {
alert("this is from td");
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='cart' method='post' class='single' action='generate_quot_cust_edititems_save_complete.php?tender_id=151399'>
<input size='1' type='hidden' name='id[3]' value='1582' readonly/>
<input type='hidden' name='sum_input' id='sum_input' value=''>
<div align="center">
<table width="100%" border="1" style="border-collapse: collapse;">
<thead>
<tr bgcolor="#E6E6FA">
<th width=6%>SlNo</th>
<th width=15%>Description</th>
<th width=5%>Qty</th>
<th width=5%>Unit Price</th>
<th width=5%>Total</th>
<th width=8%>Total (INR)</th>
<th width=7%>Total Value</th>
<th width=7%>Currency</th>
<th width=7%>Total</th>
<th width=7%>Price/Unit</th>
</tr>
</thead>
</table>
</div>
<div align="center" class="base">
<table width="100%" border="1" style="border-collapse: collapse;">
<tbody id="people">
<tr class="trToiitrate">
<td width='6%'>
<input size='1' type='hidden' name='id[0]' value='1579' readonly/>
<input size='1' type='text' name='sl[0]' value='1' readonly/>
</td>
<td width='15%' id='addinput'>
<input type='text' size='19' id='item_name0' name='item_name[0]' placeholder='3M EC 2214 Regular Adhesive EpoxySize: 150ml box ' value='3M EC 2214 Regular Adhesive EpoxySize: 150ml box ' />
</td>
<td width='5%'>
<input size='1' class='qty' type='text' name='qty[]' id='qty[]' value='10' readonly/>
</td>
<td width='5%'>
<input size='1' type='text' name='unitprice[0]' value='223.15' readonly/>
</td>
<td width='5%'>
<input size='5' type='text' name='total_old' value='2231.500' readonly/>
</td>
<td width='8%'>
<input size='7' type='text' id='total_inr[]' name='total_inr[]' value='219479.000' />
</td>
<input class='txt' type='hidden' size='3' id='addon_value[]' name='addon_value[]' value='0' onchange='calcTotals()'>
<td width='7%'>
<input class='total' size='6' type='text' id='add_value[]' name='add_value[]' value='373114'>
</td>
<td width='7%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=68.128019>INR</option>
<option value=GBP data-price=0.692675>GBP</option>
<option value=EUR data-price=0.895982>EUR</option>
<option selected="selected" value=SGD data-price=1.400105>SGD</option>
<option value=AUD data-price=1.3949>AUD</option>
<option value=CAD data-price=1.377725>CAD</option>
<option value=CHF data-price=0.986467>CHF</option>
<option value=JPY data-price=114.6032>JPY</option>
<option value=MYR data-price=4.136531>MYR</option>
<option value=ZAR data-price=15.73123>ZAR</option>
</select>
</td>
<input type="hidden" class="inrvalue" id="inrvalue" name="inrvalue" value="68.128019">
<input type="hidden" class="deptip" id="dept-input" />
<input type="hidden" class="priceip" id="price-input" />
<input type="hidden" class="cs" id="cs" name="cs" value="SGD">
<td width="7%">
<input size="5" type="text" data-value="" name='total1[]' id='total1[]' value="13531.598" readonly class="total1" />
</td>
<td width='7%'>
<input class='price_unit' size='6' type='text' id='price_unit[]' name='price_unit[]' value='1353.160' readonly>
</td>
</tr>
<div align="center" class="base">
<table width="100%" border="1" style="border-collapse: collapse;">
<tbody id="people">
<tr class="trToiitrate">
<td width='6%'>
<input size='1' type='hidden' name='id[1]' value='1580' readonly/>
<input size='1' type='text' name='sl[1]' value='2' readonly/>
</td>
<td width='15%' id='addinput'>
<input type='text' size='19' id='item_name1' name='item_name[1]' placeholder='CONAP CE-1170 ACRYLIC CONFORMAL COATING AS PER MIL-1-46058, Type AR,Size: 01 quart = 0.8 kg' value='CONAP CE-1170 ACRYLIC CONFORMAL COATING AS PER MIL-1-46058, Type AR,Size: 01 quart = 0.8 kg'
/>
</td>
<td width='5%'>
<input size='1' class='qty' type='text' name='qty[]' id='qty[]' value='2' readonly/>
</td>
<td width='5%'>
<input size='1' type='text' name='unitprice[1]' value='285' readonly/>
</td>
<td width='5%'>
<input size='5' type='text' name='total_old' value='570.000' readonly/>
</td>
<td width='8%'>
<input size='7' type='text' id='total_inr[]' name='total_inr[]' value='27735.800' />
</td>
<input class='txt' type='hidden' size='3' id='addon_value[]' name='addon_value[]' value='0' onchange='calcTotals()'>
<td width='7%'>
<input class='total' size='6' type='text' id='add_value[]' name='add_value[]' value='83207.4'>
</td>
<td width='7%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=68.128019>INR</option>
<option value=GBP data-price=0.692675>GBP</option>
<option value=EUR data-price=0.895982>EUR</option>
<option selected="selected" value=SGD data-price=1.400105>SGD</option>
<option value=AUD data-price=1.3949>AUD</option>
<option value=CAD data-price=1.377725>CAD</option>
<option value=CHF data-price=0.986467>CHF</option>
<option value=JPY data-price=114.6032>JPY</option>
<option value=MYR data-price=4.136531>MYR</option>
<option value=ZAR data-price=15.73123>ZAR</option>
</select>
</td>
<input type="hidden" class="inrvalue" id="inrvalue" name="inrvalue" value="68.128019">
<input type="hidden" class="deptip" id="dept-input" />
<input type="hidden" class="priceip" id="price-input" />
<input type="hidden" class="cs" id="cs" name="cs" value="SGD">
<td width="7%">
<input size="5" type="text" data-value="" name='total1[]' id='total1[]' value="1710.003" readonly class="total1" />
</td>
<td width='7%'>
<input class='price_unit' size='6' type='text' id='price_unit[]' name='price_unit[]' value='855.001' readonly>
</td>
</tr>
<div align="center" class="base">

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>

get from clicked row input values with jquery

my table looks something like that:
<table class="tg">
<tr>
<th class="tg-031e"></th>
<th class="tg-031e"></th>
<th class="tg-031e"></th>
<th class="tg-031e"></th>
</tr>
<tr>
<td class="tg-031e"><span class="display-mode" />
<input class="edit-mode max" value="1" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="edit-mode min" value="2" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="edit-mode width" value="3" />
</td>
<td class="tg-031e">
<button name="Klickmich" type="button" value="Überraschung">Foo</Button>
</td>
</tr>
<tr>
<td class="tg-031e"><span class="display-mode" />
<input class="max edit-mode" value="4" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="min edit-mode" value="5" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="edit-mode width" value="6" />
</td>
<td class="tg-031e">
<button name="Klickmich" type="button" value="Überraschung">Foo</Button>
</td>
</tr>
<tr>
<td class="tg-031e"><span class="display-mode" />
<input class="edit-mode max" value="7" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="edit-mode min" value="8" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="edit-mode width" value="9" />
</td>
<td class="tg-031e">
<button name="Klickmich" type="button" value="Überraschung">Foo</Button>
</td>
</tr>
When the user clicks on the row I want to save / fetch the values of the input values from the clicked row.
I did that with:
$("button").click(function () {
var min = jQuery("input#min").val();
var max = jQuery("input#max").val();
var width = jQuery("input#width").val();
console.log(currentClass);
console.log(min);
console.log(max);
console.log(width);
});
With this code I only get the values of the first row. I should revice the values from the clicked row. For example if the user clicks on the third row the values should be 7,8,9.
Also I'm wondering why I get with $(this).parents('tr') the button context instead of the tr context in jquery.
Does someone have a good workaround for this? Code also here http://jsfiddle.net/zW5KC/1/

Okay, so firstly your IDs should be unique, so I've changed them to classes.
Secondly, when you try var min = jQuery("input#min").val(); its finding an input with the id of min, however its just finding the first one on the page, it doesn't know which one you want.
So I've updated the code to use this which in this case references the actual button element you've clicked. From there we find the closest parent which is a tr and then from there find a child who has the correct class. Code;
<table class="tg">
<tr>
<th class="tg-031e"></th>
<th class="tg-031e"></th>
<th class="tg-031e"></th>
<th class="tg-031e"></th>
</tr>
<tr>
<td class="tg-031e"><span class="display-mode" />
<input class="max" class="edit-mode" value="1" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="min" class="edit-mode" value="2" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="width" class="edit-mode" value="3" />
</td>
<td class="tg-031e">
<button name="Klickmich" type="button" value="Überraschung">Foo</Button>
</td>
</tr>
<tr>
<td class="tg-031e"><span class="display-mode" />
<input class="max" class="edit-mode" value="4" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="min" class="edit-mode" value="5" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="width" class="edit-mode" value="6" />
</td>
<td class="tg-031e">
<button name="Klickmich" type="button" value="Überraschung">Foo</Button>
</td>
</tr>
<tr>
<td class="tg-031e"><span class="display-mode" />
<input class="max" class="edit-mode" value="7" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="min" class="edit-mode" value="8" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="width" class="edit-mode" value="9" />
</td>
<td class="tg-031e">
<button name="Klickmich" type="button" value="Überraschung">Foo</Button>
</td>
</tr>
<script type="text/javascript">
$("button").click(function () {
var $row = $(this).closest('tr');
var min = $row.find('.min').val();
var max = $row.find('.max').val();
var width = $row.find('.width').val();
console.log(currentClass);
console.log(min);
console.log(max);
console.log(width);
});
</script>

Use closest() to find parent tr and then use find() to get the specific element inside that tr like this:
$("button").click(function () {
var min = jQuery(this).closest("tr").find("#min").val();
var max = jQuery(this).closest("tr").find("#max").val();
var width = jQuery(this).closest("tr").find("#width").val();
console.log(min);
console.log(max);
console.log(width);
});

Categories