How to get the Grand Total from row total - javascript

I am new in javascript. I have a table with Product Price, Quantity, Width and Height. I have a single row in the invoice and there is a button for adding new row and delete row. I got the total of each row separately. Now I want to get the Grand Total from Totals of all products. After adding the product grand total, I want to store this invoice in Database. Kindly give me a better solution. Thanks in advance. Regards
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
table,tr,td,th { border: 1px black solid;}
</style>
</head>
<body>
<table>
<thead>
<th>Price</th>
<th>Quantity</th>
<th>Width</th>
<th>Height</th>
<th>Total</th>
<th>Action</th>
</thead>
<tbody id="product_table">
<tr>
<td><input type="text" name="price"></td>
<td><input type="text" name="quantity"></td>
<td><input type="text" name="width"></td>
<td><input type="text" name="height"></td>
<td><input type="text" name="total" readonly></td>
<td><input type="button" value="X" onclick="deleteRow(this)"/></td>
</tr>
</tbody>
<input type="button" name="submit" value="Add Row" onclick="add_fields();">
</table>
<span>Grand Total<input type="text" name="grandtotal" readonly></span>
</body>
<script>
const table = document.getElementById('product_table');
table.addEventListener('input', ({ target }) => {
const tr = target.closest('tr');
const [price, quantity, width, height, total] = tr.querySelectorAll('input');
var size = width.value * height.value;
var rate = price.value * quantity.value;
if (size != "") {
total.value = size * rate;
}else{
total.value = rate;
}
});
function add_fields() {
var row = document.createElement("tr");
row.innerHTML =
'<td><input type="text" name="price"></td>' +
'<td><input type="text" name="quantity"></td>' +
'<td><input type="text" name="width"></td>' +
'<td><input type="text" name="height"></td>' +
'<td><input type="text" name="total" readonly></td>' +
'<td><input type="button" value="X" onclick="deleteRow(this)"/></td>';
table.appendChild(row);
}
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
</html>


Here is your working code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js</script>
<style>
table,tr,td,th { border: 1px black solid;}
</style>
</head>
<body>
<table>
<thead>
<th>Price</th>
<th>Quantity</th>
<th>Width</th>
<th>Height</th>
<th>Total</th>
<th>Action</th>
</thead>
<tbody id="product_table">
<tr>
<td><input type="text" name="price"></td>
<td><input type="text" name="quantity"></td>
<td><input type="text" name="width"></td>
<td><input type="text" name="height"></td>
<td><input type="text" name="total" class="totalPrice" readonly></td>
<td><input type="button" value="X" onclick="deleteRow(this)"/></td>
</tr>
</tbody>
<input type="button" name="submit" value="Add Row" onclick="add_fields();">
</table>
<span>Grand Total<input type="text" name="grandtotal" id="grandtotal" readonly></span>
</body>
<script>
const table = document.getElementById('product_table');
table.addEventListener('input', ({ target }) => {
const tr = target.closest('tr');
const [price, quantity, width, height, total] = tr.querySelectorAll('input');
var size = width.value * height.value;
var rate = price.value * quantity.value;
if (size != "") {
total.value = size * rate;
}else{
total.value = rate;
}
totalPrice();
});
function add_fields() {
var row = document.createElement("tr");
row.innerHTML =
'<td><input type="text" name="price"></td>' +
'<td><input type="text" name="quantity"></td>' +
'<td><input type="text" name="width"></td>' +
'<td><input type="text" name="height"></td>' +
'<td><input type="text" name="total" class="totalPrice" readonly></td>' +
'<td><input type="button" value="X" onclick="deleteRow(this)"/></td>';
table.appendChild(row);
}
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
totalPrice();
}
function totalPrice(){
var sum = 0;
$(".totalPrice").each(function(){
sum += parseFloat($(this).val());
});
$("#grandtotal").val(sum);
}
</script>
</html>
Hope it will work for you.
Check this demo: https://jsfiddle.net/8jo7u4ya/

Related

Enable Delete button when row is more than one

Enable "Delete" button in forth col of the table when the row is more than one and Disable when the row is one.
$(document).ready(function() {
var counter = 0;
$("#addrow2").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger" value="Delete"></td>';
newRow.append(cols);
$("#myTable2").append(newRow);
counter++;
});
$("#myTable2").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable2" class="table">
<thead>
<tr>
<th>Full Name</th>
<th>Full Address</th>
<th>Business or Occupation</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="button" class="Del ibtnDel btn btn-md btn-danger" id="DeleteRow1" value="Delete" disabled='disabled'></td>
</tr>
</tbody>
</table>

You can use prop() to enabled/disabled .. also you can add/removeClass to prevent the click ..and on delete button click you need to check for the length of rows .. see the next code
$(document).ready(function() {
var counter = 0;
$("#addrow2").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger" value="Delete"></td>';
newRow.append(cols);
$("#myTable2").append(newRow);
$(".ibtnDel").prop('disabled' , false).removeClass('disabled'); // <<<<<< here
counter++;
});
$("#myTable2").on("click", ".ibtnDel:not(.disabled)", function(event) { // <<<< here ..add :not(.disabled) to prevent the click for .disabled class element
$(this).closest("tr").remove();
counter -= 1;
// >>>>>> here ..check for the row length
if($("#myTable2 tbody tr").length === 1){
$(".ibtnDel").prop('disabled' , true).addClass('disabled');
}
console.log($("#myTable2 tbody tr").length);
});
});
.disabled{
background : red;
color : #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addrow2">Add Row</button>
<table id="myTable2" class="table">
<thead>
<tr>
<th>Full Name</th>
<th>Full Address</th>
<th>Business or Occupation</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="button" class="Del ibtnDel btn btn-md btn-danger" id="DeleteRow1" value="Delete" disabled='disabled'></td>
</tr>
</tbody>
</table>

in the table add a row at the top js

when I click the button, I need to add a row in the table above the current
I found the search code but it adds a line at the bottom tell me where to dig to redo it
http://jsfiddle.net/Guruprasad_Rao/Lg0v4yyz/
<table id="myTable" class="order-list">
<thead>
<tr>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="name" />
</td>
<td>
<input type="text" name="price1" />
</td>
<td><input type="button" id="ibtnDel" value="Delete"></td>
<td colspan="5" style="text-align: left;">
<input type="button" class="addRow" id="addrow" value="Add Row" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="">Grand Total: $<span id="grandtotal"></span>
</td>
</tr>
</tfoot>
</table>

You can use the insertBefore() instead of insertAfter()
The insertBefore() method inserts HTML elements before the selected elements.
$(document).ready(function () {
var counter = 0;
$(document).on("click",".addRow", function () {
console.log('clicked');
var counter = $('#myTable tr').length - 2;
$(document).on("click",".dele", function () {
counter = -1
});
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" name="name' + counter + '"/></td>';
cols += '<td><input type="text" name="price' + counter + '"/></td>';
cols += '<td><input type="button" id="ibtnDel" class="dele" value="Delete"></td>';
cols += '<td colspan="5" style="text-align: left;"><input type="button" class="addRow" value="Add Row" /></td>';
newRow.append(cols);
newRow.insertBefore($(this).parents().closest('tr'));
//$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("change", 'input[name^="price"]', function (event) {
calculateRow($(this).closest("tr"));
calculateGrandTotal();
});
$("table.order-list").on("click", ".dele", function (event) {
$(this).closest("tr").remove();
calculateGrandTotal();
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="order-list">
<thead>
<tr>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="name" />
</td>
<td>
<input type="text" name="price1" />
</td>
<td><input type="button" id="ibtnDel" value="Delete"></td>
<td colspan="5" style="text-align: left;">
<input type="button" class="addRow" id="addrow" value="Add Row" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="">Grand Total: $<span id="grandtotal"></span>
</td>
</tr>
</tfoot>
</table>

You can do something like this in your JS script:
// Replace the following
// newRow.insertAfter($(this).parents().closest('tr'));
// with
newRow.insertBefore($(this).parents('tr'));

Unable to compute Total and add/delete rows from table in html

I am currently using the example from http://jsfiddle.net/QAa35/.
I tried to run the code snippet in my Chrome/IE browser but I am unable to get the results as shown in the fiddle.
Here is what I have in my index.html, which is exactly the same as the fiddle:
<table class="order-list">
<thead>
<tr>
<td>Product</td>
<td>Price</td>
<td>Qty</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="product" /></td>
<td>$<input type="text" name="price" /></td>
<td><input type="text" name="qty" /></td>
<td>$<input type="text" name="linetotal" readonly="readonly"/></td>
<td><a class="deleteRow"> x </a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: center;">
<input type="button" id="addrow" value="Add Product" />
</td>
</tr>
<tr>
<td colspan="5">
Grand Total: $<span id="grandtotal"></span>
</td>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function () {
var counter = 1;
$("#addrow").on("click", function () {
counter++;
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" name="product' + counter + '"/></td>';
cols += '<td>$<input type="text" name="price' + counter + '"/></td>';
cols += '<td><input type="text" name="qty' + counter + '"/></td>';
cols += '<td>$<input type="text" name="linetotal' + counter + '" readonly="readonly"/></td>';
cols += '<td><a class="deleteRow"> x </a></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
});
$("table.order-list").on("change", 'input[name^="price"], input[name^="qty"]', function (event) {
calculateRow($(this).closest("tr"));
calculateGrandTotal();
});
$("table.order-list").on("click", "a.deleteRow", function (event) {
$(this).closest("tr").remove();
calculateGrandTotal();
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
var qty = +row.find('input[name^="qty"]').val();
row.find('input[name^="linetotal"]').val((price * qty).toFixed(2));
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="linetotal"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
</script>
However, I am unable to get the total. I can't add/delete rows as well:
Screenshot of results
How can I make it work?
Thank you!

You code requires jQuery. So you just forgot to include it to your project or did it incorrectly. You can import jQuery from cdn just by adding this script to your HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
To prove that everything works fine with jQuery, here is your code with imported jQuery:
$(document).ready(function () {
var counter = 1;
$("#addrow").on("click", function () {
counter++;
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" name="product' + counter + '"/></td>';
cols += '<td>$<input type="text" name="price' + counter + '"/></td>';
cols += '<td><input type="text" name="qty' + counter + '"/></td>';
cols += '<td>$<input type="text" name="linetotal' + counter + '" readonly="readonly"/></td>';
cols += '<td><a class="deleteRow"> x </a></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
});
$("table.order-list").on("change", 'input[name^="price"], input[name^="qty"]', function (event) {
calculateRow($(this).closest("tr"));
calculateGrandTotal();
});
$("table.order-list").on("click", "a.deleteRow", function (event) {
$(this).closest("tr").remove();
calculateGrandTotal();
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
var qty = +row.find('input[name^="qty"]').val();
row.find('input[name^="linetotal"]').val((price * qty).toFixed(2));
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="linetotal"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="order-list">
<thead>
<tr>
<td>Product</td>
<td>Price</td>
<td>Qty</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="product" /></td>
<td>$<input type="text" name="price" /></td>
<td><input type="text" name="qty" /></td>
<td>$<input type="text" name="linetotal" readonly="readonly"/></td>
<td><a class="deleteRow"> x </a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: center;">
<input type="button" id="addrow" value="Add Product" />
</td>
</tr>
<tr>
<td colspan="5">
Grand Total: $<span id="grandtotal"></span>
</td>
</tr>
</tfoot>
</table>

Edit specific row and reset particular fields of a form not working

I have created a form, here when click on edit button from a dynamically created table it is not fetching the form values.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Generate Challan </title>
<link type="text/css" href="styles.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://code.google.com/p/jquery-json/downloads/detail?name=jquery.json-2.2.min.js"></script>
<script type="text/javascript">
data = new Array();
$(document).ready(function(){
$(".addbutton").click(function() {
var row = new Array(12);
row[0] = $("#txtbox1").val();
row[1] = $("#txtbox2").val();
row[2] = $("#txtbox3").val();
row[3] = $("#txtbox4").val();
row[4] = $("#H1").val();
row[5] = $("#I1").val();
row[6] = $("#G1").val();
row[7] = $("#J1").val();
row[8] = $("#B1").val();
row[9] = $("#C1").val();
row[10] = $("#D1").val();
row[11] = $("#E1").val();
data.push(row);
refresh();
});
$('#myform')[0].reset(); //reset form stmt
//Edit function
var $tds = null;
$('#datatable').on('click', 'td:last-child', function (e) {
var $tr = $(this).parent(),
$tds = $tr.children(),
sname = $tds.eq(0).text().trim(),
mon = $tds.eq(1).text().trim();
year = $tds.eq(2).text().trim();
$('#G1 option').each(function () {
if ($(this).text().trim() == sname) {
$(this).prop('selected', true);
return false;
}
});
$('#H1 option').each(function () {
if ($(this).text().trim() == mon) {
$(this).prop('selected', true);
return false;
}
});
$('#I1 option').each(function () {
if ($(this).text().trim() == year) {
$(this).prop('selected', true);
return false;
}
});
$('#J1').val($tds.eq(3).text().trim())
$('#E1').val($tds.eq(4).text().trim())
e.preventDefault();
});
$("#myform").submit(function(){
var val = $.toJSON(data);
$("#data").attr("value",val);
if(data.length == 0){
alert("Table is empty !");
return false;
}else{
return true;
}
});
});
function refresh(){
$("#datatable").find("tr:gt(1)").remove();
publishtable();
}
function publishtable(){
for(var c=0;c<data.length;c++){
var trow = $('<tr valign="middle">').addClass("contact");
$("<td>").text(c+1).appendTo(trow);
for(var i=0;i<12;i++){
$("<td>").text(data[c][i]).appendTo(trow);
}
var abutton = $('<input type="button" class="editrow" value="Edit">');
var acell = $("<td>");
abutton.appendTo(acell);
acell.appendTo(trow);
$("#datatable").append(trow);
}
}
//Summation
function sum() {
var txtFirstNumberValue = document.getElementById('B1').value;
var txtSecondNumberValue = document.getElementById('C1').value;
var txtThirdNumberValue = document.getElementById('D1').value;
var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('E1').value = result;
}
}
</script>
</head>
<body>
<h2><center>Sample Form</center></h2>
<h5><center>(Rule 23(1) &AMP; Rule 24(1))</center></h5>
<br/><br/>
<table border="0">
<tr>
<td><label for="name">Received from Shri:</label></td>
<td><input type="text" name="name" id="txtbox1" class="txtbox"> </td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input type="text" name="address" id="txtbox2" class="txtbox"> </td>
</tr>
<tr>
<td><label for="address">Email:</label></td>
<td><input type="text" name="email" id="txtbox3" class="txtbox"> </td>
</tr>
<tr>
<td><label for="mobileNo">Mobile No:</label></td>
<td><input type="text" name="mobile" id="txtbox4" class="txtbox"> </td>
</tr>
<tr>
<td> <label for="month">Month:</label></td>
<td><select name="month" id="H1">
<option>Select Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select></td>
<td><label for="year">Year:</label></td>
<td><select name="year" id="I1">
<option>Select Year</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
</select><td>
</tr>
<tr>
<td><label for="serviceName">Service Name:</label></td>
<td><select name="G1" id="G1">
<option>services</option>
</select></td>
</tr>
<tr>
<td><label for="details">Details:</label></td>
<td><input type="text" name="details" id="J1" class="txtbox" ></td>
</tr>
<tr>
<td><label for="tax">Tax:</label></td>
<td><input type="text" name="tax" id="B1" value="" class="txt" onkeyup="sum();" /></td>
</tr>
<tr>
<td><label for="cess">Cess:</label></td>
<td><input type="text" name="cess" id="C1" value="" class="txt" onkeyup="sum();" /></td>
</tr>
<tr>
<td><label for="penalty">Interest/Penalty:</label></td>
<td><input type="text" name="penalty" id="D1" value="" class="txt" onkeyup="sum();" /></td>
</tr>
<tr>
<td><label for="total">Total:</label></td>
<td><input type="text" name="total" id="E1" value="" class="txtbox" /></td>
</tr>
<td>
<input type="button" name="mybutton" class="addbutton" id="addbutton" value="Add">
</td>
</tr>
</table>
<br/>
<br/>
<br/><br/><br/>
<table id="datatable" class="contacts" border="1">
<thead>
<tr>
<td class="contactDept" colspan="13">Generated rows</td>
</tr>
</thead>
<tbody>
<tr class="contact_head">
<td>S.No.</td>
<td>Name</td>
<td>Address</td>
<td>Email</td>
<td>Mobile</td>
<td>Month</td>
<td>Year</td>
<td>Service</td>
<td>Details</td>
<td>Tax</td>
<td>Cess</td>
<td>Penalty</td>
<td>Total</td>
<!--<td><a href="#" >Edit</a></td>-->
</tr>
</tbody>
</table>
<br/>
<form id="myform" action="save/saveTable.action" method="post">
<input type="hidden" id="data" name="data">
<input type="submit" name="submitbutton" class="submitbutton" id="submitbutton" value="Submit Form">
</form>
Here when click on add, form values are displaying on the table. When click on submit button, I am passing the table(dynamically generated table) to some action class. Before submitting the table I have to perform edit operation. I have written a code for edit function but unable to edit. Please help me to solve..

You made a mistake in your var declaration.
For exemple, you have written mon = $tds.eq(1).text().trim();
It should be mon = $tds.eq(5).text().trim();
Because $tds.eq(1) is the name, not the month.
That's why
$('#H1 option').each(function () {
if ($(this).text().trim() == mon) {
$(this).prop('selected', true);
return false;
}
});
never appends.
Please see this working demo
UpDate 1 :
$('#datatable').on('click', 'td:last-child', function (e) {
var $tr = $(this).parent(),
$tds = $tr.children(),
name = $tds.eq(1).text().trim(),
adress = $tds.eq(2).text().trim(),
email = $tds.eq(3).text().trim(),
mobile = $tds.eq(4).text().trim(),
mon = $tds.eq(5).text().trim(),
year = $tds.eq(6).text().trim(),
service = $tds.eq(7).text().trim(),
details = $tds.eq(8).text().trim(),
tax = $tds.eq(9).text().trim(),
cess = $tds.eq(10).text().trim(),
penalty = $tds.eq(11).text().trim(),
sum = $tds.eq(12).text().trim();
...

Adding another row after where the add function is clicked

I have this written function :
$(".tdAdd").on("click", function () {
counter = $('#myTable tr').length - 3; //supposing i only have 2 data
var count = $("#myTable").length;
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="button" value="Add" class="tdAdd"/></td>';
cols += '<td><input type="text" name="name' + counter + '"/></td>';
cols += '<td><input type="text" name="price' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel" value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow); // this is adding row to the end. but i want i on a specific row after where the add button was clicked
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
});
});
and my table is like this :
<table id="myTable" class="order-list">
<thead>
<tr>
<td></td>
<td></td>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">
<input type="button" id="addrow" value="Add Row" />
<td>
<input type="text" name="name" />
</td>
<td>
<input type="text" name="price1" />
</td>
<td>
<input type="button" value="Delete" class="ibtnDel"/>
</td>
</tr>
</tbody>
</table>
Here is a sample Fiddle
I want to add another row below where i clicked the Add row button. the fiddle will only add row on the bottom of the table and only the first button will work. any help would be appreciated. Thanks!
i tried :
$("table.order-list").eq(count-1).after(newRow)
but i still can't get the code to work

You need to apply the event listener to the document, because the button is dynamically created. EG:
$(document).on("click", '.tdAdd', function () { ... }
See updated fiddle:
http://jsfiddle.net/y8F88/1/

Categories