Develop Reference

My function validation does not work on added row

I have a function where my input type="number" data-id="weight" checks whether the user typed a divisible by 5 or not. It is perfectly working on my current row but when i add a new row/s, it is not working. Is there anything i missed? I provided my snippet below. Thank you everyone.
To try it. Please type on the weight column a number that is not divisible by 5, then you'll see the error. Add row and do the same, you will not see the error. My target is my function to work with added rows too.
$("#addrow").on('click', function() {
let rowIndex = $('.auto_num').length + 1;
let rowIndexx = $('.auto_num').length + 1;
var newRow = '<tr><td><input class="auto_num" type="text" name="entryCount" value="' + rowIndexx + '" /></td>"' +
'<td><input name="lightBand' + rowIndex + '" id="auto" value="" class="form" type="number" /></td>"' +
'<td><input data-id="weight" name="weight' + rowIndex + '" type="number" placeholder="not working divisible by 5" /></td>"' +
'<td><input id="wingBand" name="wingBand' + rowIndex + '" type="number" /></td>"' +
'<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
});
// divisible by only 5
const inputer = document.querySelectorAll('input[data-id="weight"]');
inputer.forEach(input => {
input.addEventListener('change', () => {
if (input.value % 5 !== 0) {
alert('not valid');
input.value = 5;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>LB#</th>
<th>Weight#</th>
<th>Wingband #</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="hehe form-control" placeholder="" required id="auto" />
</td>
<td class="labelcell">
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
</td>
<td class="labelcell">
<input name="wingBand" class="hehe form-control" type="number" />
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
</td>
</tr>
</div>
</tbody>
</div>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>

This is caused by the event handler for the change event not being fired for dynamically created objects.
When you create an the event handlers like this:
const inputer = document.querySelectorAll('input[data-id="weight"]');
inputer.forEach(input => {
input.addEventListener('change', () => {
...
}
});
The handler is only mapped for elements that exist when you first run the code. That means any subsequently created dynamic elements will not cause the event to fire.
Instead, use the following syntax to create the event which will catch dynamically created elements by using their selector (input[data-id="weight"]):
$(document).on('change', 'input[data-id="weight"]', function(e) {
if ($(this).val() % 5 !== 0) {
alert('not valid');
$(this).val(5);
}
});
I've removed the other code you had previously that tried to bind the event handler. You don't need to do it that way with jQuery.
Seen here in a working version of your snippet:
$("#addrow").on('click', function(){
let rowIndex = $('.auto_num').length+1;
let rowIndexx = $('.auto_num').length+1;
var newRow = '<tr><td><input class="auto_num" type="text" name="entryCount" value="'+rowIndexx+'" /></td>"' +
'<td><input name="lightBand'+rowIndex+'" id="auto" value="" class="form" type="number" /></td>"' +
'<td><input data-id="weight" name="weight'+rowIndex+'" type="number" placeholder="not working divisible by 5" /></td>"' +
'<td><input id="wingBand" name="wingBand'+rowIndex+'" type="number" /></td>"' +
'<td><input type="button" class="removerow" id="removerow'+rowIndex+'" name="removerow'+rowIndex+'" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
});
// divisible by only 5
$(document).on('change', 'input[data-id="weight"]', function(e) {
if ($(this).val() % 5 !== 0) {
alert('not valid');
$(this).val(5);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>LB#</th>
<th>Weight#</th>
<th>Wingband #</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="hehe form-control" placeholder="" required id="auto"/>
</td>
<td class="labelcell">
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
</td>
<td class="labelcell">
<input name="wingBand" class="hehe form-control" type="number" />
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
</td>
</tr>
</div>
</tbody>
</div>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>

Add change event listener after adding the table row. Modified the above code as below:
$("#addrow").on('click', function(){
let rowIndex = $('.auto_num').length+1;
let rowIndexx = $('.auto_num').length+1;
var newRow = '<tr><td><input class="auto_num" type="text" name="entryCount" value="'+rowIndexx+'" /></td>"' +
'<td><input name="lightBand'+rowIndex+'" id="auto" value="" class="form" type="number" /></td>"' +
'<td><input data-id="weight" name="weight'+rowIndex+'" type="number" placeholder="not working divisible by 5" /></td>"' +
'<td><input id="wingBand" name="wingBand'+rowIndex+'" type="number" /></td>"' +
'<td><input type="button" class="removerow" id="removerow'+rowIndex+'" name="removerow'+rowIndex+'" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
const list = document.querySelectorAll('input[data-id="weight"]');
const input = list[list.length - 1];
console.log(input)
input.addEventListener('change', inputValidation);
});
const inputValidation = (e) => {
if (e.target.value % 5 !== 0) {
alert('not valid');
e.target.value = 5;
}
}
// divisible by only 5
const inputer = document.querySelectorAll('input[data-id="weight"]');
inputer.forEach(input => {
input.addEventListener('change', inputValidation);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>LB#</th>
<th>Weight#</th>
<th>Wingband #</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="hehe form-control" placeholder="" required id="auto"/>
</td>
<td class="labelcell">
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
</td>
<td class="labelcell">
<input name="wingBand" class="hehe form-control" type="number" />
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
</td>
</tr>
</div>
</tbody>
</div>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>

how to remove autofocus attrib

i want to get more input field by onfoucus event
function new_option() {
var tot_opt = parseInt($('#tot_opt').val());
$('#otp' + tot_opt).unbind('onfocus', "new_option");
tot_opt++;
$('#tot_opt').val(tot_opt);
var opt = "<br><input onfocus='new_option()' id='otp" + tot_opt + "' placeholder='Options" + tot_opt + "' type='text' name='options' class='form-control'>"
$('#new_opt').append(opt);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<th colspan="2">Create Voter Pool</th>
</tr>
<tr>
<th>Question</th>
<th><textarea name="question" class="form-control">
</textarea></th>
</tr>
<tr>
<th>Options</th>
<td>
<input type="text" placeholder="Options1" id="opt1" class="form-control" name="options"><br>
<input type="text" onfocus="new_option()" id="opt2" placeholder="Options2" class="form-control" name="options">
<span id="new_opt"></span>
<input type="hidden" id="tot_opt" value="2">
</td>
</tr>
</table>
i want onfocus attribute only on last input and want to remove onfoucs attribute from remain

Before you add the new input you can remove the onfocus attribute form all the other inputs.
The below will query for inputs with the onfocus attribute and loop through each element removing the attribute. Then I append the last input with the onfocus attribute. This ensures only the last input will be able to add another input.
function new_option() {
var tot_opt = parseInt($('#tot_opt').val());
$('#otp' + tot_opt).unbind('onfocus', "new_option");
tot_opt++;
$('#tot_opt').val(tot_opt);
var opt = "<br><input onfocus='new_option()' id='otp" + tot_opt + "' placeholder='Options" + tot_opt + "' type='text' name='options' class='form-control'>"
// remove onfocus from all previous inputs (that have the onfocus attribute)
document.querySelectorAll("input[onfocus]").forEach(function(element, index) {
element.removeAttribute("onfocus");
});
$('#new_opt').append(opt);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<th colspan="2">Create Voter Pool</th>
</tr>
<tr>
<th>Question</th>
<th><textarea name="question" class="form-control"></textarea></th>
</tr>
<tr>
<th>Options</th>
<td>
<input type="text" placeholder="Options1" id="opt1" class="form-control" name="options"> <br>
<input type="text" onfocus="new_option()" id="opt2" placeholder="Options2" class="form-control" name="options">
<span id="new_opt"></span>
<input type="hidden" id="tot_opt" value="2">
</td>
</tr>
</table>

Javascript multiplication when add row

I have a problem with my code, when I add the javascript multiplication not running, but at first row just fine. I think the problem id must be unique and i change to name, but still not work.
You can try mycode below.
function multiplyBy() {
num1 = document.getElementById("input1").value;
num2 = document.getElementById("input2").value;
document.getElementById("output").value = num1 * num2;
}
$(document).ready(function() {
$("#addCF").click(function() {
$("#customFields").append('<tr><td>1</td><td><input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text"></td><td><input class="form-control" name="harga_satuan[]" id="input1" onkeyup="calc()" value="" type="text"></td><td><input class="form-control" id="input2" onkeyup="calc()" name="jumlah_beli[]" type="text"></td><td><input class="form-control" name="sub_total[]" value="" id="output" type="text"></td><td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td></tr>');
});
$("#customFields").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class='table table-bordered' id='customFields'>
<thead>
<tr>
<th style='width:35px;'>#</th>
<th style='width:210px;'>Nama Barang</th>
<th style='width:120px;'>Harga</th>
<th style='width:75px;'>Qty</th>
<th style='width:125px;'>Sub Total</th>
<th style='width:40px;'></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input class="form-control" name="kode_barang[]" id="cariBrg" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td>
<input class="form-control" name="harga_satuan[]" id="input1" onkeyup="multiplyBy()" value="" type="text">
</td>
<td>
<input class="form-control" id="input2" onkeyup="multiplyBy()" name="jumlah_beli[]" type="text">
</td>
<td>
<input class="form-control" name="sub_total[]" id="output" onkeyup="multiplyBy()" type="text">
</td>
<td>
<button class="remCF"><i class="fa fa-times" style="color:red;"></i></button>
</td>
</tr>
</tbody>
</table>
<button id='addCF' class='btn btn-default pull-left'><i class='fa fa-plus fa-fw'></i> Baris Baru (F7)</button>

You are using same id multiple times and it gives wrong behavior with jquery/javascript. I have added some classes into each text boxes and replaced mutiplyby function with on keyup jquery function.
Try this with your page and see it gives you your desired output.
$(document).on('keyup','.input',function(){
var num1 = $(this).parents('tr:first').find('.input:first').val();
var num2 = $(this).parents('tr:first').find('.input:last').val();
$(this).parents('tr:first').find('.sub-total').val(num1 * num2);
});
$(document).ready(function() {
$("#addCF").click(function() {
$("#customFields").append('<tr><td>1</td><td><input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text"></td><td><input class="form-control input input1" name="harga_satuan[]" id="input1" onkeyup="multiplyBy(this)" value="" type="text"></td><td><input class="form-control input input2" id="input2" onkeyup="multiplyBy()" name="jumlah_beli[]" type="text"></td><td><input class="form-control sub-total" name="sub_total[]" value="" id="output" type="text"></td><td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td></tr>');
});
$("#customFields").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class='table table-bordered' id='customFields'>
<thead>
<tr>
<th style='width:35px;'>#</th>
<th style='width:210px;'>Nama Barang</th>
<th style='width:120px;'>Harga</th>
<th style='width:75px;'>Qty</th>
<th style='width:125px;'>Sub Total</th>
<th style='width:40px;'></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input class="form-control" name="kode_barang[]" id="cariBrg" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td>
<input class="form-control input" name="harga_satuan[]" id="input1" onkeyup="multiplyBy()" value="" type="text">
</td>
<td>
<input class="form-control input" id="input2" onkeyup="multiplyBy()" name="jumlah_beli[]" type="text">
</td>
<td>
<input class="form-control sub-total" name="sub_total[]" id="output" onkeyup="multiplyBy()" type="text">
</td>
<td>
<button class="remCF"><i class="fa fa-times" style="color:red;"></i></button>
</td>
</tr>
</tbody>
</table>
<button id='addCF' class='btn btn-default pull-left'><i class='fa fa-plus fa-fw'></i> Baris Baru (F7)</button>

The values of id attributes must be unique across the whole document. Each time you do the calculation you are adding another element with the id output. The DOM doesn't know which one you mean.

I think the problem id must be unique and i change to name
Yes that's it, the id should be unique in the same document, instead you don't need id's here it will be better to use common classes :
<tr>
<td>
<input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td>
<input class="form-control calculation" name="harga_satuan[]" value="" type="text">
</td>
<td>
<input class="form-control calculation" name="jumlah_beli[]" type="text">
</td>
<td>
<input class="form-control output" name="sub_total[]" id="" type="text">
</td>
<td>
<button class="remCF"><i class="fa fa-times" style="color:red;"></i></button>
</td>
</tr>
NOTE : No need for inline-events better to attach your event in the JS code, Check my suggestion using input event that is more efficient than keyup when you track the user input's.
I've added also an index to enumerate the rows...
Hope this helps.
Working Snippet :
$(document).ready(function() {
var index = 2;
$("#addCF").click(function() {
$("#customFields").append('<tr><td>'+index+'</td><td><input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text"></td><td><input class="form-control calculation" name="harga_satuan[]" value="" type="text"></td><td><input class="form-control calculation" name="jumlah_beli[]" type="text"></td><td><input class="form-control output" name="sub_total[]" value="" type="text"></td><td><button class="remCF"><i class="fa fa-eye" style="color:red;"></i></button></td></tr>');
index++;
});
$("#customFields").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
$("table").on('input', '.calc', function(){
var parent_row = $(this).closest('tr');
var num1 = parent_row.find('[name="harga_satuan[]"]').val();
var num2 = parent_row.find('[name="jumlah_beli[]"]').val();
parent_row.find('.output').val(num1*num2);
});
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table class='table table-bordered' id='customFields'>
<thead>
<tr>
<th style='width:35px;'>#</th>
<th style='width:210px;'>Nama Barang</th>
<th style='width:120px;'>Harga</th>
<th style='width:75px;'>Qty</th>
<th style='width:125px;'>Sub Total</th>
<th style='width:40px;'></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td><input class="form-control calc" name="harga_satuan[]" value="" type="text"></td>
<td><input class="form-control calc" name="jumlah_beli[]" type="text"></td>
<td><input class="form-control output" name="sub_total[]" id="" type="text"></td>
<td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td>
</tr>
</tbody>
</table>
<button id='addCF' class='btn btn-default pull-left'><i class='fa fa-plus fa-fw'></i> Baris Baru (F7)</button>

How to get the column sum total values of last 2 column's in this dynamic table

The below code is used to add new row to the table, also multiply two fields and show the result in the final field, in this dynamically generated row and at last part of code, removes the added row if it is not needed.
<script type="text/javascript">
$(window).load(function(){
$('.add-box').click(function() {
var box_html = $('<tr class="multLote"><td align="center"><input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;" /></td> ' +
'<td><textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" > </textarea></td>' +
'<td><input type="text" name="lote20[]" value="0" class="val20" /></td>' +
'<td><input type="text" name="lote10[]" value="0" class="val10" /></td>' +
'<td><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></td>' +
'<th>Remover</th></tr>');
$('#tabela-lotes tbody').append(box_html);
return false;
});
$('#tabela-lotes').on("keyup", ".multLote input", function() {
var mult = 0;
// for each row:
console.log($(this).closest('table').find("tr.multLote").length);
$(this).closest('tr.multLote').each(function() {
// get the values from this row:
var $val20 = $('.val20', this).val();
var $val10 = $('.val10', this).val();
console.log($val100);
var $total = ($val20 * $val10);
console.log($total);
// set total for the row
$('.lote_result', this).val($total);
mult += $total;
});
});
$('#tabela-lotes').on('click', '.remove-box', function(e) {
e.preventDefault();
$(this).closest('tr.multLote').remove();
});
});
</script>
This is the html code.
<form action="tabledb.php" method="POST">
<body>
<input type="button" class="add-box" value="Add">
<table id="tabela-lotes">
<thead>
<tr>
<th>
SL. NO
</th>
<th>
PRODUCT NAME
</th>
<th>
RATE PER CB
</th>
<th>
CBs
</th>
<th>
AMOUNT
</th>
</tr>
</thead>
<tbody><tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" value="0"> </textarea>
</td>
<td>
<input type="text" name="lote20[]" class="val20" value="0">
</td>
<td>
<input type="text" name="lote10[]" class="val10" value="0">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="0">
</td>
</tr>
</tbody></table>
<table>
<tr><th>
Total CBS :</th>
<td> <input type="text" name="total_cbs" id="total_cbs" placeholder="Total CBS" style="height:25px;font-weight:bold;" onfocus="cal1()" readonly ></td></tr>
<tr><th>Total AMOUNT : </th>
<td><input type="text" name="total" id="total" placeholder="Total Rs." style="height:25px;font-weight:bold;" onfocus="cal2('.$i.')" readonly></td></tr>
</table>
<input type="submit" value="submit">
</form>
I want to the get the total coloumn sum of lote10[ ] and lote_result[ ] fields to be displayed in the total_cbs and total fields respectively.Please help, Thank you in advance.
enter image description here
I have updated my question with the image of the output, which states exactly what i need, Thank You.

Assuming the end result looks like this:
var result = 0;
var elements = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for (var i = elements.length - 1; i > elements.length - 3; i--) {
var inputs = elements[i].getElementsByTagName('input');
result += parseInt(inputs[inputs.length - 1].value);
}
console.log('total', result);
alert('total ' + result);
<table>
<tbody>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
</tbody>
</table>
JSFIDDLE

make a textbox visible on a tr(row) click and print the same of the data on button click in a DIV

my expectation is: Say i have two rows, The textbox will be hidden and the label will be available as a display when a user click on a selected row the label should be hidden and the text box should be visible of that particular row and after that if the user clicks on the button then the data or the clicked row textbox value should be printed #showresult
current: am getting the color on a row clicked but am not sure how to make a text box visible on a particular row and print the same in a div on button click
JS:
$(document).ready(function () {
$('tr').click(function () {
if(this.style.background == "" || this.style.background =="white") {
$(this).css('background', 'red');
}
else {
$(this).css('background', 'white');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="1" width="100%" id="table1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
<tr>
<td><label>data1</label> <input type="text" value="1" /></td>
<td><label>data2</label> <input type="text" value="2" /></td>
<td><label>data3</label> <input type="text" value="3" /></td>
<td><label>data4</label> <input type="text" value="4" /></td>
<td><label>data5</label> <input type="text" value="5" /></td>
</tr>
<tr>
<td><label>data6</label> <input type="text" value="6" /></td>
<td><label>data7</label> <input type="text" value="7" /></td>
<td><label>data8</label> <input type="text" value="8" /></td>
<td><label>data9</label> <input type="text" value="9" /></td>
<td><label>data10</label> <input type="text" value="10" /></td>
</tr>
</table>
<input type="button" value="printdata"/>
<div id="showresult"></div>

According with you explanation i think this example match what you are trying to accomplish.
css:
.selected {
background: red;
}
Html:
<table border="1" cellspacing="1" width="100%" id="table1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
<tr>
<td>
<label>data1</label>
<input type="text" />
</td>
<td>
<label>data2</label>
<input type="text" />
</td>
<td>
<label>data3</label>
<input type="text" />
</td>
<td>
<label>data4</label>
<input type="text" />
</td>
<td>
<label>data5</label>
<input type="text" />
</td>
</tr>
<tr>
<td>
<label>data6</label>
<input type="text" />
</td>
<td>
<label>data7</label>
<input type="text" />
</td>
<td>
<label>data8</label>
<input type="text" />
</td>
<td>
<label>data9</label>
<input type="text" />
</td>
<td>
<label>data10</label>
<input type="text" />
</td>
</tr>
</table>
<input id="printdata" type="button" value="printdata" />
<div class="showresult">1: <span></span></div>
<div class="showresult">2: <span></span></div>
<div class="showresult">3: <span></span></div>
<div class="showresult">4: <span></span></div>
<div class="showresult">5: <span></span></div>
js:
$('tr input').hide();
$('tr').on('click', function (e) {
if ($( e.target ).is("input")) {
return;
} else if ($(this).hasClass('selected')) {
$(this).toggleClass('selected');
$('input', this).toggle();
} else {
$('tr.selected input').hide();
$('tr.selected').toggleClass('selected');
$(this).toggleClass('selected');
$('input', this).toggle();
}
});
$('#printdata').click(function () {
$('.showresult').each(function (index) {
$('span', this).html('');
$('span', this).html($('tr.selected input').eq(index).val());
});
});
fiddle
$('tr input').hide();
$('tr').on('click', function (e) {
if ($( e.target ).is("input")) {
return;
} else if ($(this).hasClass('selected')) {
$(this).toggleClass('selected');
$('input', this).toggle();
} else {
$('tr.selected input').hide();
$('tr.selected').toggleClass('selected');
$(this).toggleClass('selected');
$('input', this).toggle();
}
});
$('#printdata').click(function () {
$('.showresult').each(function (index) {
$('span', this).html('');
$('span', this).html($('tr.selected input').eq(index).val());
});
});
.selected {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="1" width="100%" id="table1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
<tr>
<td>
<label>data1</label>
<input type="text" />
</td>
<td>
<label>data2</label>
<input type="text" />
</td>
<td>
<label>data3</label>
<input type="text" />
</td>
<td>
<label>data4</label>
<input type="text" />
</td>
<td>
<label>data5</label>
<input type="text" />
</td>
</tr>
<tr>
<td>
<label>data6</label>
<input type="text" />
</td>
<td>
<label>data7</label>
<input type="text" />
</td>
<td>
<label>data8</label>
<input type="text" />
</td>
<td>
<label>data9</label>
<input type="text" />
</td>
<td>
<label>data10</label>
<input type="text" />
</td>
</tr>
</table>
<input id="printdata" type="button" value="printdata" />
<div class="showresult">1: <span></span></div>
<div class="showresult">2: <span></span></div>
<div class="showresult">3: <span></span></div>
<div class="showresult">4: <span></span></div>
<div class="showresult">5: <span></span></div>

Could be helpful
a working example on codepen.io
$(document).ready(function () {
$('tr').click(function () {
if(!$(this).hasClass("active")) {
$('tr').removeClass('active')
$(this).addClass('active');
}
});
});
$("#b-print").click(function(){
$('div#showresult').html('');
$.each($('tr'), function(idx, obj){
$.each($(obj).find('input[type=text]'), function(idx2, obj2){
$('div#showresult').append($(obj2).val()+", ");
});
$('div#showresult').append('<br/>');
});
});
tr input[type=text]{
display: none;
}
tr.active{
background: red;
}
tr.active input[type=text]{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="1" width="100%" id="table1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
<tr>
<td><label>data1</label> <input type="text" value="1" /></td>
<td><label>data2</label> <input type="text" value="2" /></td>
<td><label>data3</label> <input type="text" value="3" /></td>
<td><label>data4</label> <input type="text" value="4" /></td>
<td><label>data5</label> <input type="text" value="5" /></td>
</tr>
<tr>
<td><label>data6</label> <input type="text" value="6" /></td>
<td><label>data7</label> <input type="text" value="7" /></td>
<td><label>data8</label> <input type="text" value="8" /></td>
<td><label>data9</label> <input type="text" value="9" /></td>
<td><label>data10</label> <input type="text" value="10" /></td>
</tr>
</table>
<input type="button" value="printdata" id="b-print"/>
<div id="showresult"></div>