Cycle among table cells, reading different data - javascript

Here my HTML table:
<table id="tableSensors" class="table table-sm header-fixed">
<thead class="thead-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Min</th>
<th scope="col" width="10%">Max</th>
<th scope="col" width="10%">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Temperature</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="21" readonly="">
</td>
</tr>
<tr>
<td>Humidity</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="65" readonly="">
</td>
</tr>
<tr>
<td>Pressure</td>
<td>980</td>
<td>1040</td>
<td>
<input class="form-control form-control-sm" type="text" value="1015" readonly="">
</td>
</tr>
</tbody>
</table>
The first row is to implement a filter, so it does not contain useful data.
The last column has an input tag, rather then a plain text.
I want to:
cycle among all rows/column
skipping the first row
pushing data into an array, keeping in mind the difference of the last column
This is the actual code:
function exportTable(id) { // id = #tableSensors
let data = [];
$(id).find('tr').not(':first').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
// do something else
}
But:
it does not skip the first row
I'm not sure how to know if I'm in the last column to use .val() on the input tag
Ideally, I should check in each cell if there is an input tag to retrieve the data in the right way.
UPDATE
Second point fixed by myself:
$(id).find('tr').not(':first').each(function() {
$(this).find('td').each(function() {
if ($(this).find('input').length) data.push($(this).find('input').val().trim());
else data.push($(this).text().trim());
});
});


You need to filter within the tbody otherwise it will ignore the tr within thead since :first pseudo class selector selects the first one among the entire collection.
function exportTable(id) { // id = #tableSensors
let data = [];
$(id).find('tbody tr').not(':first').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
console.log(data);
// do something else
}
function exportTable(id) { // id = #tableSensors
let data = [];
$('table tbody').find('tr').not(':first').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
console.log(data);
// do something else
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableSensors" class="table table-sm header-fixed">
<thead class="thead-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Min</th>
<th scope="col" width="10%">Max</th>
<th scope="col" width="10%">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Temperature</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="21" readonly="">
</td>
</tr>
<tr>
<td>Humidity</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="65" readonly="">
</td>
</tr>
<tr>
<td>Pressure</td>
<td>980</td>
<td>1040</td>
<td>
<input class="form-control form-control-sm" type="text" value="1015" readonly="">
</td>
</tr>
</tbody>
</table>
<span onClick="exportTable();">click</span>
You can use [:first-child][2] as well which will work in both ways since it ignores both tr elements.
function exportTable(id) { // id = #tableSensors
let data = [];
$(id).find('tbody tr:not(:first-child)').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
}
function exportTable(id) { // id = #tableSensors
let data = [];
$('table tbody tr:not(:first-child)').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
console.log(data);
// do something else
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableSensors" class="table table-sm header-fixed">
<thead class="thead-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Min</th>
<th scope="col" width="10%">Max</th>
<th scope="col" width="10%">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Temperature</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="21" readonly="">
</td>
</tr>
<tr>
<td>Humidity</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="65" readonly="">
</td>
</tr>
<tr>
<td>Pressure</td>
<td>980</td>
<td>1040</td>
<td>
<input class="form-control form-control-sm" type="text" value="1015" readonly="">
</td>
</tr>
</tbody>
</table>
<span onClick="exportTable();">click</span>

Related

How to get total sum from input values using Javascript?

I want to display the total sum of values shown in the amount input-boxes in the next field named sub total without refreshing page.
JS-code for sum of n numbers:
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0') , Add()">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount-2" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td class="text-end">0</td>
</tr>
</tbody>
</table>
</div>

I don't know why, but obviously rare are those who understand that using a form has benefits ...
const myForm = document.forms['my-form']
myForm.oninput = ({target: elm}) => // for any change iside the form
{
let
row = elm.closest('tr')
, Dsc = row.querySelector('input[name^="desc"]')
, Qte = row.querySelector('input[name^="quantity"')
, Prx = row.querySelector('input[name^="price"')
, Amt = row.querySelector('input[name^="amount"')
;
Dsc.required = (Qte.valueAsNumber > 0)
switch (elm.name.split('_')[0]) {
case 'quantity':
case 'price':
Amt.value = Qte.valueAsNumber * Prx.valueAsNumber
myForm.SubTotal.textContent =
[...myForm.querySelectorAll('input[name^="amount"')]
.reduce((sum,el)=>sum + +el.value,0)
break;
}
}
myForm.onsubmit = e =>
{
e.preventDefault() // disable form submiting
let formInputs = Object.fromEntries( new FormData(myForm).entries() )
console.clear()
console.log( formInputs)
}
table {
border-collapse: collapse;
margin : 2em 1em;
}
td, th {
padding : .2em;
border : 1px solid darkblue;
}
input {
width : 6em;
text-align : right;
}
td:first-of-type input {
width : 10em;
text-align : left;
}
<form name="my-form">
<table>
<thead>
<tr> <th>Description</th> <th>Quantity</th> <th>Unit Price</th> <th>Amount</th> </tr>
</thead>
<tbody>
<tr>
<td> <input type="text" name="desc_1" > </td>
<td> <input type="number" name="quantity_1" value="0" min="0"> </td>
<td> <input type="number" name="price_1" value="0" min="0"> </td>
<td> <input type="text" name="amount_1" disabled value="0"></td>
</tr>
<tr>
<td> <input type="text" name="desc_2" > </td>
<td> <input type="number" name="quantity_2" value="0" min="0"> </td>
<td> <input type="number" name="price_2" value="0" min="0"> </td>
<td> <input type="text" name="amount_2" disabled value="0"></td>
</tr>
<tr>
<td> <input type="text" name="desc_3" > </td>
<td> <input type="number" name="quantity_3" value="0" min="0"> </td>
<td> <input type="number" name="price_3" value="0" min="0"> </td>
<td> <input type="text" name="amount_3" disabled value="0"></td>
</tr>
</tbody>
<tfoot>
<td colspan="4"> Sub Total : <output name="SubTotal">0</output> </td>
</tfoot>
</table>
<button type="submit">submit</button>
</form>

You can assign an id to the subtotal cell and change its value on every Mul call.
Something like this :
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
const subTotalField = document.getElementById("subTotal");
subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;
}
<html>
<body>
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0') , Add()">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount-2" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td id="subTotal" class="text-end">0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Monitor the changes in table using JavaScript or HTML

I want to change the total price when the count or unit price of the products are changed on the website. I know I should use the onChange function, but I have no idea about how to write the JavaScript code.
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true" >
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true" >
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true" >
<input id="productCount" type="text" name="countList" onchange="update()" class="layui-input count"
th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true" >
<input id="normalPrice" type="text" name="priceList" onchange="update()" class="layui-input price"
th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price"
th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
<a href="javascript:void(0)" class="delBtn redType" onclick='delColumns(this)'>Del</a>
</td>
</tr>
</tbody>
</table>
I hope that the totalPrice = count*price could refresh whenever the user changes one of those values.

You can easily monitor the pointed input fields (#productCount and #normalPrice) and change the value of #total according to it. In the code below, I use the input event and I'm not using inline event handlers, but rather the function addEventListener() (know why).
const productCountInput = document.querySelector('#productCount');
const productPriceInput = document.querySelector('#normalPrice');
const totalPriceInput = document.querySelector('#total');
function updateTotalPrice() {
totalPriceInput.value = (parseFloat(productCountInput.value) * parseFloat(productPriceInput.value)) || 0;
}
productCountInput.addEventListener('input', updateTotalPrice);
productPriceInput.addEventListener('input', updateTotalPrice);
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true">
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true">
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true">
<input id="productCount" type="text" name="countList" class="layui-input count" th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true">
<input id="normalPrice" type="text" name="priceList" class="layui-input price" th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price" th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
Del
</td>
</tr>
</tbody>
</table>

How to add extra row on a table by clicking

I am trying to create an invoice system and I need to add a function to add extra rows.
What I have looks like this:
$(document).ready(function() {
$("#addrow").click(function(){
$(".item-row:last").after('
<tr class="item-row">
<td>#</td>
<td>New Item</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
</tr>');
bind();
});
});
<table>
<tr>
<th>#</th>
<th>Type</th>
<th>Location</th>
<th>Item</th>
<th>Cost</th>
<th>Days</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td>1</td>
<td>Type</td>
<td>Location</td>
<td>Item</td>
<td>100</td>
<td>2</td>
<td>200</td>
</tr>
<tr id="hidden-row">
<td colspan=7>
<a id="addrow" href="javascript:;" title="Add a row">Add a row</a>
</td>
</tr>
What I want to do but have no idea how to do it is: click Add a row, and have an extra row to add more products. I did some research and came across some example and I took the code for the script from there but I do not know if I left part of the script out. I am using, html, php and js any help will be greatly appreciated! thank you in advanced.

You need to use `` instead of '' if its multiple line html. Also, you need to use .bind():
$(document).ready(function() {
$("#addrow").click(function() {
$(".item-row:last").after(`
<tr class="item-row">
<td>#</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
</tr>`)
.bind();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>#</th>
<th>Type</th>
<th>Location</th>
<th>Item</th>
<th>Cost</th>
<th>Days</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td>1</td>
<td>Type</td>
<td>Location</td>
<td>Item</td>
<td>100</td>
<td>2</td>
<td>200</td>
</tr>
<tr id="hidden-row">
<td colspan=7>
<a id="addrow" href="javascript:;" title="Add a row">Add a row</a>
</td>
</tr>
</table>

$(document).ready(function() {
var iCnt=0;
$('#FaqsTable').on('click','#addCF',function() {
if(iCnt<=100) {
iCnt=iCnt+1;
$("#FaqsTable").append('<tr>'+
//'<td> <div class=" col-md-9"><div class="gt_privacy_field default_width"> <input type="text" class="c_ph" id="POID" name="POID[]" value="" placeholder="POID" /></div></div></td>' +
'<td style="display:none"><input type="text" class="c_ph" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="Select Item" style="width:150px" /></td>'+
'<td><input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px"/></td>'+
'<td><input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="Enter Amount" style="width:150px"/></td>'+
'<td class="hidden" style="display:none"><input type="text" class="Flag sm-form-control" id="Flag" name="Flag[]" value="I" placeholder="Flag" /></td>'+
'<td><p class="fa fa-trash-o m-r-5" style="color:red"></p>Remove</td> '+
'</tr>');
}
});
$("#FaqsTable").on('click','#remCF',function() {
var flag=$(this).closest('tr').find(".Flag").val();
if(flag=="I") {
$(this).closest('tr').remove();
}
else(flag=="U")
{
$(this).closest("tr").hide();
$(this).closest('tr').find(".Flag").val("D");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="form-group row">
<div class="table-responsive">
<table id="FaqsTable" class="table table-bordered nobottommargin">
<tr style="background-color:#b5aeae">
<th style="text-align:center;width:400px;">Perticular </th>
<th style="text-align: center; width: 150px;">Amount </th>
<th style="text-align: center; width: 100px;">Action</th>
<tr />
<tr>
<td style="display:none">
<input type="text" class="form-control" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="ItemName" style="width:150px" required />
</td>
<td>
<input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px" required />
</td>
<td>
<input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="EnterAmount" style="width:150px" required />
</td>
<td>
<p class="fa fa-plus" style="color:green"></p>Add
</td>
</tr>
</table>
</div>
</div>
$(document).ready(function() {
var iCnt=0;
$('#FaqsTable').on('click','#addCF',function() {
if(iCnt<=100) {
iCnt=iCnt+1;
$("#FaqsTable").append('<tr>'+
//'<td> <div class=" col-md-9"><div class="gt_privacy_field default_width"> <input type="text" class="c_ph" id="POID" name="POID[]" value="" placeholder="POID" /></div></div></td>' +
'<td style="display:none"><input type="text" class="c_ph" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="Select Item" style="width:150px" /></td>'+
'<td><input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px"/></td>'+
'<td><input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="Enter Amount" style="width:150px"/></td>'+
'<td class="hidden" style="display:none"><input type="text" class="Flag sm-form-control" id="Flag" name="Flag[]" value="I" placeholder="Flag" /></td>'+
'<td><p class="fa fa-trash-o m-r-5" style="color:red"></p>Remove</td> '+
'</tr>');
}
});
$("#FaqsTable").on('click','#remCF',function() {
var flag=$(this).closest('tr').find(".Flag").val();
if(flag=="I") {
$(this).closest('tr').remove();
}
else(flag=="U")
{
$(this).closest("tr").hide();
$(this).closest('tr').find(".Flag").val("D");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="form-group row">
<div class="table-responsive">
<table id="FaqsTable" class="table table-bordered nobottommargin">
<tr style="background-color:#b5aeae">
<th style="text-align:center;width:400px;">Perticular </th>
<th style="text-align: center; width: 150px;">Amount </th>
<th style="text-align: center; width: 100px;">Action</th>
<tr />
<tr>
<td style="display:none">
<input type="text" class="form-control" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="ItemName" style="width:150px" required />
</td>
<td>
<input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px" required />
</td>
<td>
<input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="EnterAmount" style="width:150px" required />
</td>
<td>
<p style="color:green"></p>Add
</td>
</tr>
</table>
</div>
</div>

How to Copy checked checkbox from one table to another table

I have two table where Table 1 is master table for table 2. If I Click addnew button than a new row will added in both table 1 and table 2 and Whatever employee name i will write it will be copied in table 2 same time. I want to Copy checked input checkbox also from table 1 to table2.I have added my code please help.
$(document).ready(function() {
$("#insert66").click(function() {
$(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td></td> <td> <input type="checkbox" id="mandatorySub"> </td></tr>')
$("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr>')
});
$('.copySubName').on('input', '.EmpName', function() {
var index = $(this).closest('table').find('input').index(this);
//for second table
$('#tableboth').find('.EmpName').eq(index).val($(this).val())
//for 3rd table
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table66" class="table table-bordered table-hover copySubName">
<input type="button" class="btn green" value="Add New+" id="insert66"></input>
<thead>
<th>Employee Name</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" name="EmpName">
</td>
<td>
<input type="checkbox" id="mandatorySub">
</td>
</tr>
</tbody>
</table>
<div class="portlet light portlet-fit box individual individualSalSection">
<div class="portlet-body individual individualSalSectionSub">
Table2:
<table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual">
<thead>
<th>Employee</th>
<th> Marks</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" disabled="true" name="EmpName">
</td>
<td>
<input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years">
</td>
<td>
<input type="checkbox" id="mandatorySub">
</td>
</tr>
</tbody>
</table>
</div>
</div>

You need to change id="mandatorySub" to class="mandatorySub1" and class="mandatorySub2"
I had updated your code may be this will help you if i understand you correctly
$(document).ready(function() {
$("#insert66").click(function() {
$(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td><td><input type="checkbox" class="mandatorySub1"></td></tr>')
$("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" class="mandatorySub2"> </td> </tr>')
});
$('.copySubName').on('input', '.EmpName', function() {
var index = $(this).closest('table').find('input').index(this);
//for second table
$('#tableboth').find('.EmpName').eq(index).val($(this).val())
//for 3rd table
});
$('body').on('click','.mandatorySub1',function(){
$('input.mandatorySub2').eq($("input.mandatorySub1").index( this )).trigger('click');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table66" class="table table-bordered table-hover copySubName">
<input type="button" class="btn green" value="Add New+" id="insert66"></input>
<thead>
<th>Employee Name</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" name="EmpName">
</td>
<td>
<input type="checkbox" class="mandatorySub1">
</td>
</tr>
</tbody>
</table>
<div class="portlet light portlet-fit box individual individualSalSection">
<div class="portlet-body individual individualSalSectionSub">
Table2:
<table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual">
<thead>
<th>Employee</th>
<th> Marks</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" disabled="true" name="EmpName">
</td>
<td>
<input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years">
</td>
<td>
<input type="checkbox" class="mandatorySub2">
</td>
</tr>
</tbody>
</table>
</div>
</div>

You should use mandatorySub as a class rather than multiple ids everywhere. The usage of ids are supposed to be unique inside a document.
What you should aim for is to fire an event on change of status of your checkboxes, and make the other checkboxes checked/unchecked accordingly.
Refer code:
$(document).ready(function() {
$("#insert66").click(function() {
$(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td></td> <td> <input type="checkbox" class="mandatorySub"> </td></tr>')
$("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" class="mandatorySub"> </td> </tr>')
});
$('.copySubName').on('input', '.EmpName', function() {
var index = $(this).closest('table').find('input').index(this);
//for second table
$('#tableboth').find('.EmpName').eq(index).val($(this).val())
//for 3rd table
});
$(document).on("change", ".mandatorySub", function() {
var checkboxIndex = $(this).closest('table').find('input[type="checkbox"]').index(this)
if ($(this).is(":checked")) {
$('#tableboth').find('input[type="checkbox"]').eq(checkboxIndex).prop("checked", true);
} else {
$('#tableboth').find('input[type="checkbox"]').eq(checkboxIndex).prop("checked", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table66" class="table table-bordered table-hover copySubName">
<input type="button" class="btn green" value="Add New+" id="insert66" />
<thead>
<th>Employee Name</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" name="EmpName">
</td>
<td>
<input type="checkbox" class="mandatorySub">
</td>
</tr>
</tbody>
</table>
<div class="portlet light portlet-fit box individual individualSalSection">
<div class="portlet-body individual individualSalSectionSub">
Table2:
<table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual">
<thead>
<th>Employee</th>
<th> Marks</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" disabled="true" name="EmpName">
</td>
<td>
<input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years">
</td>
<td>
<input type="checkbox" class="mandatorySub">
</td>
</tr>
</tbody>
</table>
</div>
</div>

On click table td input append same tr every time

I have a problem in JavaScript to repeat a same tr after,when i click the td elements.
My html code bellow:
<table id="tabl2" class="table time-table table-bordered table-striped budrow">
<thead>
<tr>
<th class="cal-head">Rates</th>
<th class="cal-head">Start date</th>
<th class="cal-head">End date</th>
</tr>
</thead>
<tr>
<td>
<input type="number" readonly placeholder="Rates">
</td>
<td>
<input type="text" readonly id="start" placeholder="Start date">
</td>
<td>
<input type="text" class="datepicker" name="enddate" placeholder="End date">
</td>
</tr>
I tried with this js but failed:
$('.budrow').click(function(){
$(this).find('tr').append('<tr> <td></td> <td></td> <td></td> </tr>');
});
Please help me.

Try to use:
var $table = $('#tabl2');
$table.click(function(e){
var $tr = $(e.target).closest('tr');
if (($tr.parent().prop("tagName") != 'THEAD') && $tr.is(":last-child"))
$tr.after($tr.clone());
});
JSFiddle.

Bind the click event to the clicked element, select the current row using closest() and then append the new row using after() function:
$('.btn').on('click', function() {
var that = $(this);
var newRow = '<tr><td colspan="3">This is a new row</td></tr>';
that.closest('tr').after(newRow);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<button class="btn">click</button>
</td>
<td>
<button class="btn">click</button>
</td>
<td>
<button class="btn">click</button>
</td>
</tr>
</tbody>
</table>

You can clone and add the new row, also it will be better to use a add button separately
<button class="budrow">Add</button>
<table id="tabl2" class="table time-table table-bordered table-striped budrow">
<thead>
<tr>
<th class="cal-head">Rates</th>
<th class="cal-head">Start date</th>
<th class="cal-head">End date</th>
</tr>
</thead>
<tr>
<td>
<input type="number" readonly placeholder="Rates" />
</td>
<td>
<input type="text" readonly id="start" placeholder="Start date" />
</td>
<td>
<input type="text" class="datepicker" name="enddate" placeholder="End date" />
</td>
</tr>
</table>
then
jQuery(function ($) {
var $tr = $('#tabl2 tbody tr').eq(0);
$('button.budrow').click(function () {
var $clone = $tr.clone();
$('#tabl2').append($clone);
$clone.find('.datepicker').removeClass('hasDatepicker').datepicker();
});
$('.datepicker').datepicker();
});
Demo: Fiddle

$('.budrow tbody input').click(function(e){
makeClone(e);
});
function makeClone(e){
var newClone = $(e.target).closest("tr").clone();
$("#tabl2 tbody").append(newClone);
$(newClone).click(function(ev){
makeClone(ev);
})
}

Categories

Resources