This is example of my code..
from the example, I've got two rows..
What I want to do is, I want to add the two rows dynamically..
thank you
<table id="datatable">
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
</table>
<button type="button" id="add" onclick="addRow('dataTable')">
<b>Add</b>
</button>
function addRow(tableID) {
alert('ttt');
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
jsfiddle example
Try this:
HTML
<table id="datatable">
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
</table>
<button type="button" id="add" onclick="addRow('dataTable')">
<b>Add</b>
</button>
JS
$(document).ready(function() {
$('#add').click(function(){
$('#datatable').append(' <tr> <td>Account No</td> <td>:</td> <td colspan="2"><input size="20" type="text" /></td> <td>Bill No</td> <td>:</td> <td><input type="text" /></td> </tr> <tr> <td>Name</td> <td>:</td> <td colspan="2"><input type="text" /></td> <td>Bill date</td> <td>:</td> <td><input type="text" /></td> </tr>');
});
});
Fiddle: http://jsfiddle.net/zLXmQ/4/
Just browsing through and would like to point out that your table id- is datatable and your parameter is dataTable. hopefully thats pertinent
simply you can do this :
function addRow(tableId)
{
$('#' + tableId + ' tr:last').after('<tr><td>Enter You New Row Data Here..</td></tr>');
}
for more information check this : Add table row in jQuery
Related
need a help with a table calculate some numbers with jquery
The calculations are done correctly for first table row and tfoot for equal is working fine
Monthly Quantity*unit Price=Total Monthly
Total Annually=Total Monthly*12
the table foot each td is adding above column td
the example:
$("html").bind('input keydown keyup mousedown mouseup', function() {
$('table tr td:nth-child(5) input,table tr td:nth-child(6) input').prop('readonly', true);
var qntMonthly = Number($('table tr td:nth-child(3) input').val());
var unitprice = Number($('table tr td:nth-child(4) input').val());
var totalmonthly = qntMonthly * unitprice;
var totalannualy = totalmonthly * 12;
document.querySelector('table tr td:nth-child(5) input').value = qntMonthly * unitprice;
document.querySelector('table tr td:nth-child(6) input').value = totalannualy;
var alltotalmonthly = 0;
$("table tbody tr td:nth-child(3) input").each(function() {
alltotalmonthly += +$(this).val();
});
var allunits = 0;
$("table tbody tr td:nth-child(4) input").each(function() {
allunits += +$(this).val();
});
var totalallmonthly = 0;
$("table tbody tr td:nth-child(5) input").each(function() {
totalallmonthly += +$(this).val();
});
var totalallannualy = 0;
$("table tbody tr td:nth-child(6) input").each(function() {
totalallannualy += +$(this).val();
});
/*document.querySelector('table tfoot tr td:nth-child(3)').html(alltotalmonthly);*/
document.getElementById("allqutymonthly").innerHTML = alltotalmonthly
document.getElementById("allunits").innerHTML = allunits
document.getElementById("totalallmonthly").innerHTML = totalallmonthly
document.getElementById("totalallannualy").innerHTML = totalallannualy
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tableA table table-striped table-bordered">
<thead>
<tr>
<th>no.</th>
<th>title</th>
<th>Monthly Quantity</th>
<th>unit Price</th>
<th>Total Monthly</th>
<th>Total Annually</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td><input type="text" value="Tea" class="form-control"></td>
<td><input type="number" min="0" value="2" class="form-control"></td>
<td><input type="number" min="0" value="2" class="form-control"></td>
<td><input type="number" min="0" value="" class="form-control">
</td>
<td><input type="number" min="0" value="" class="form-control"></td>
<td class="text-center">
</td>
</tr>
<tr>
<td class="text-center">2</td>
<td><input type="text" value="coffee" class="form-control"></td>
<td><input type="number" min="0" value="10" class="form-control"></td>
<td><input type="number" min="0" value="3" class="form-control"></td>
<td><input type="number" min="0" value="5" class="form-control"></td>
<td><input type="number" min="0" value="2" class="form-control"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" class="text-center">Total</td>
<td>
<div id="allqutymonthly" class="totalSum">00000</div>
</td>
<td>
<div id="allunits" class="totalSum">00000</div>
</td>
<td>
<div id="totalallmonthly" class="totalSum">00000</div>
</td>
<td>
<div id="totalallannualy" class="totalSum">00000</div>
</td>
</tr>
</tfoot>
</table>
1- I want to apply it to all table rows
2- I need the total number Appears automatically when the page is opened and the total number change directly.
<!DOCTYPE html>
<html>
<body>
<!--External table-->
<table border="1px">
<tr>
<td>
//price and quantity fields
<input type="text" name="price" label="Price" id="Pri">
<input type="text" name="quantity" label="Quantity" id="Qty">
</td>
<td>
<!--internal table-->
<table border="1px">
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><input type="checkbox" id="checx"/></td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td><input type="checkbox" id="checx"/></td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td><input type="checkbox" id="checx"/></td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</td>
</tr>
</table>
//Javascript
<script type="text/javascript">
checkboxes = document.getElementById("checx").getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName("td")[1];
var FirstColumn = currentRow.getElementsByTagName("td")[0];
alert("My text is: " + secondColumn.textContent +" "+ FirstColumn.textContent);
};
}
document.getElementById("Pri").value=secondColumn.textContent;
document.getElementById("Qty").value=FirstColumn.textContent;
</script>
//I have a dynamic table on the above pattern.I want in such a way that when I click on the checkbox on the internal table it should copy the values and should show on the input boxes on the corresponding row on the external table.
</body>
</html>
I have a dynamic table on the above pattern.I want in such a way that when I click on the checkbox on the internal table it should copy the values and should show on the input boxes on the corresponding row on the external table.
Thanks for your help in advance
the main issue that checkboxes ids has to be unique per element so you have to depend on class name rather than ids of checkboxes
in addition to the following code
document.getElementById("Pri").value=secondColumn.textContent;
document.getElementById("Qty").value=FirstColumn.textContent;
Has to be inside the event handler
<!DOCTYPE html>
<html>
<body>
<!--External table-->
<table id="parentTable" border="1px">
<tr>
<td>
//price and quantity fields
<input type="text" name="price" label="Price" id="Pri">
<input type="text" name="quantity" label="Quantity" id="Qty">
</td>
<td>
<!--internal table-->
<table border="1px">
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><input type="checkbox" id="checx1" class="checx"/></td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td><input type="checkbox" id="checx2" class="checx"/></td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td><input type="checkbox" id="checx3" class="checx"/></td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td><input type="checkbox" id="checx4" class="checx" /></td>
</tr>
</table>
</td>
</tr>
</table>
//Javascript
<script type="text/javascript">
checkboxes = document.getElementsByClassName("checx");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName("td")[1];
var FirstColumn = currentRow.getElementsByTagName("td")[0];
alert("My text is: " + secondColumn.textContent +" "+FirstColumn.textContent);
document.getElementById("Pri").value=secondColumn.textContent;
document.getElementById("Qty").value=FirstColumn.textContent;
};
}
</script>
</body>
</html>
I have a table with some input fields a person will be filling in. It's for an application. I have a total for each set of tables. Right now those are summing up the totals from the fields into a total box for each table. I need an additional field to subtract those two fields to give me one broad total. For some reason I am getting no console errors or total outputted.
function findTotal() {
var arr = document.getElementsByClassName('qty');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total_Assets').value = tot;
}
function findTotal2() {
var arr = document.getElementsByClassName('qty2');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total_liabilities').value = tot;
}
function fnCalculate() {
//Get the texts from both textboxes
var txt1 = document.getElementById("total_Assets").value;
var txt2 = document.getElementById("total_liabilities").value;
//Substract that
var res = parseInt(txt1) - parseInt(txt2);
//Set the value to your div
document.getElementById("net_worth").innerHtml = res;
}
<table class="tg">
<tr>
<th class="tg-9hbo"><br></th>
<th class="tg-9hbo">Amount ($)<br></th>
</tr>
<tr>
<td class="tg-yw4l">Other Assets<br></td>
<td class="tg-yw4l"><input class="qty" onblur="findTotal()" id="other_assets" type="text" name="other_assets" value="[[+fi.other_assets]]" /></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"><input class="qty" onblur="findTotal()" id="other_assets_2" type="text" name="other_assets_2" value="[[+fi.other_assets_2]]" /></td>
</tr>
<tr>
<td class="tg-yw4l">(A) TOTAL ASSETS<br></td>
<td class="tg-yw4l"><input onblur="fnCalculate()" class="totals" id="total_Assets" type="text" name="total_Assets" value="[[+fi.total_Assets]]" readonly /></td>
</tr>
<tr>
<td class="tg-yw4l">(C) NET WORTH (A MINUS B)<br></td>
<td class="tg-yw4l"><input id="net_worth" type="text" name="net_worth" value="[[+fi.net_worth]]" readonly/></td>
</tr>
</table>
<table class="tg">
<tr>
<th class="tg-9hbo"><br></th>
<th class="tg-9hbo">Amount ($)<br></th>
</tr>
<tr>
<td class="tg-yw4l">Bank Loans<br></td>
<td class="tg-yw4l"><input class="qty2" onblur="findTotal2()" id="bank_loans" type="text" name="bank_loans" value="[[+fi.bank_loans]]" /></td>
</tr>
<tr>
<td class="tg-yw4l">Mortgages and Real Estate<br></td>
<td class="tg-yw4l"><input class="qty2" onblur="findTotal2()" id="mortgages" type="text" name="mortgages" value="[[+fi.mortgages]]" /></td>
</tr>
<tr>
<td class="tg-yw4l">(B) TOTAL LIABILITIES<br></td>
<td class="tg-yw4l"><input onblur="fnCalculate()" class="totals" id="total_liabilities" type="text" name="total_liabilities" value="[[+fi.total_liabilities]]" readonly /></td>
</tr>
</table>
I fixed two issues:
I have replaced the .innerHtml by the .value property
I call all the calculations each time an entry loses its focus. I think the calculations weren't correctly triggered
In addition to that, I replaced the use of the value attribute by placeholder to display the field name. That way you don't have to remove the text before entering anything.
function findTotal() {
var arr = document.getElementsByClassName('qty');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total_Assets').value = tot;
}
function findTotal2() {
var arr = document.getElementsByClassName('qty2');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total_liabilities').value = tot;
}
function fnCalculate() {
findTotal();
findTotal2();
//Get the texts from both textboxes
var txt1 = document.getElementById("total_Assets").value;
var txt2 = document.getElementById("total_liabilities").value;
//Substract that
var res = parseInt(txt1) - parseInt(txt2);
//Set the value to your div
document.getElementById("net_worth").value= res;
}
<table class="tg">
<tr>
<th class="tg-9hbo"><br></th>
<th class="tg-9hbo">Amount ($)<br></th>
</tr>
<tr>
<td class="tg-yw4l">Other Assets<br></td>
<td class="tg-yw4l"><input class="qty" onblur="fnCalculate()" id="other_assets" type="text" name="other_assets" placeholder="[[+fi.other_assets]]" /></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"><input class="qty" onblur="fnCalculate()" id="other_assets_2" type="text" name="other_assets_2" placeholder="[[+fi.other_assets_2]]" /></td>
</tr>
<tr>
<td class="tg-yw4l">(A) TOTAL ASSETS<br></td>
<td class="tg-yw4l"><input onblur="fnCalculate()" class="totals" id="total_Assets" type="text" name="total_Assets" placeholder="[[+fi.total_Assets]]" readonly /></td>
</tr>
<tr>
<td class="tg-yw4l">(C) NET WORTH (A MINUS B)<br></td>
<td class="tg-yw4l"><input id="net_worth" type="text" name="net_worth" placeholder="[[+fi.net_worth]]" readonly/></td>
</tr>
</table>
<table class="tg">
<tr>
<th class="tg-9hbo"><br></th>
<th class="tg-9hbo">Amount ($)<br></th>
</tr>
<tr>
<td class="tg-yw4l">Bank Loans<br></td>
<td class="tg-yw4l"><input class="qty2" onblur="fnCalculate()" id="bank_loans" type="text" name="bank_loans" placeholder="[[+fi.bank_loans]]" /></td>
</tr>
<tr>
<td class="tg-yw4l">Mortgages and Real Estate<br></td>
<td class="tg-yw4l"><input class="qty2" onblur="fnCalculate()" id="mortgages" type="text" name="mortgages" placeholder="[[+fi.mortgages]]" /></td>
</tr>
<tr>
<td class="tg-yw4l">(B) TOTAL LIABILITIES<br></td>
<td class="tg-yw4l"><input onblur="fnCalculate()" class="totals" id="total_liabilities" type="text" name="total_liabilities" placeholder="[[+fi.total_liabilities]]" readonly /></td>
</tr>
</table>
I am stuck to generate the JSON based on the HTML below
<table>
<thead>
<tr>
<th>Date</th>
<th>Rainfall <small>(Milimeter)</small></th>
<th>Reservoir Level <small>(Meter)</small></th>
<th>T/Water <small>(Meter)</small></th>
<th>W/Supply <small>(Cumec)</small></th>
<th>C/Station <small>(Cumec)</small></th>
<th>Remarks </th>
<th>Task</th>
</tr>
</thead>
<tbody>
<tr>
<td>01/06/2014</td>
<td>120</td>
<td>120</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><span class="glyphicon glyphicon-ok"></span></td>
</tr>
<tr>
<td>02/06/2014</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><span class="glyphicon glyphicon-ok"></span></td>
</tr>
<tr>
<td>03/06/2014</td>
<td><input type="text" id="44"></td>
<td><input type="text" id="45"></td>
<td><input type="text" id="46"></td>
<td><input type="text" id="47"></td>
<td><input type="text" id="48"></td>
<td><input type="text" id="49"></td>
<td><button class="btn btn-info btn-xs Save">Save</button></td>
</tr>
<tr>
<td>04/06/2014</td>
<td><input type="text" id="44"></td>
<td><input type="text" id="45"></td>
<td><input type="text" id="46"></td>
<td><input type="text" id="47"></td>
<td><input type="text" id="48"></td>
<td><input type="text" id="49"></td>
<td><button class="btn btn-info btn-xs Save">Save</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="9"></td>
</tr>
</tfoot>
</table>
As you can see, some cell are blanks, some are mixed with <small>, <span>, and <input>. What I failed to achieve is how to produce the json out of this table in the following format
["Date", "Rainfall (milimeter)", "Reservoir Level (meter)","T/Water (meter)","W/Supply (cumec)","C/Station (cumec)","Remarks","Task"],
["01/06/2014", "120", "120","","","","","OK"],["02/06/2014", "120", "120","","","","","OK"],["03/06/2014", "12", "100","","","","","X"]
From the above format, you can see all values in cell are captured. As for <input> element, I need to pull value of it and append it to json result. Below is what I have right now. So far no luck
buildTableBody = function() {
var data = [],
table = $('table', el)[0];
for (var i=0; i<table.rows.length; i++) {
var tableRow = table.rows[i],
rowData = {};
for (var j=0; j<tableRow.cells.length; j++) {
var rc = tableRow.cells[j].innerHTML.toLowerCase().replace(/ /gi,'');
if ((rc) || (!_(rc).isBlank())) {
//console.log(rc);
var cl = _(_(rc).stripTags()).humanize();
if (cl == 'task') {
rowData[i] = 'Status';
} else if (cl == 'Save') {
rowData[i] = 'X'
}
} else {
rowData[i] = ' ';
}
}
data.push(rowData[i]);
}
//console.log(data);
return data;
}
Thank you
Let's have a table like this:
<table>
<tr>
<td><input type="text" name="FirstName1" /></td>
<td><input type="text" name="LastName1" /></td>
</tr>
<tr>
<td><input type="text" name="FirstName2" /></td>
<td><input type="text" name="LastName2" /></td>
</tr>
</table>
I want to have a button that will add new row at the end of the table with incremented name attributes so it will look like this:
<table>
<tr>
<td><input type="text" name="FirstName1" /></td>
<td><input type="text" name="LastName1" /></td>
</tr>
<tr>
<td><input type="text" name="FirstName2" /></td>
<td><input type="text" name="LastName2" /></td>
</tr>
<tr>
<td><input type="text" name="FirstName3" /></td>
<td><input type="text" name="LastName3" /></td>
</tr>
</table>
And so on.
So far I have this but it does not increment name attributes:
$("#newRowButton").click(function(){
$("table tr:last").clone().appendTo("table");
});
$("#newRowButton").click(function() {
$("table tr:last")
.clone()
.appendTo("table")
.find(':input')
.attr('name', function(index, name) {
return name.replace(/(\d+)$/, function(fullMatch, n) {
return Number(n) + 1;
});
})
});
Live demo.
$("#newRowButton").click(function(){
var trows = $("table tr:last").clone();
trows.find('td input').attr("name",function(i,a){
var p = new RegExp("((?:[a-z][a-z]+))(\\d+)",["i"]);
var m = p.exec(a);
var index = parseInt(m[1]);
index++;
return m[0]+index;
});
trows.appendTo("table");
});
var clonedRow = $("#EventType tr:last").clone();
$("input", clonedRow).attr('name', 'FirstName3'); // reset the name
you can get the name attribute and increment by 1
Reference