Develop Reference

Checkbox click event

I have a group of checkboxes inside a table where I want to change the value of a different column in the row when the checkbox is checked. I have researched for a solution but nothing I have found seems to solve my problem. I realize that my stumbling block is my unfamiliarity with jquery so any suggestions would help. Ultimately I wish to total the columns where the change has occurred to get a total. So if an answer included ideas about that as well I would not complain. Thanks as always, you are a great group.
HTML
<tr>
<td><input name="amputeeGolfer" type="checkbox" id="amputeeGolfer" value="amputee" onchange="changeFee"/>
<label for="amputeeGolfer">Amputee Golfer</label></td>
<td align="left"><label for="amputeeFee">$50.00</label></td>
<td></td>
<td><input name="amputeeFee" type="number" id="amputeeFee" class="tblRight" size="10" value="0.00"/></td>
</tr>
jquery
<script>
function changeFee(val) {
$('#amputeeFee').val(), "$50.00";
}
</script>

Fully functioning snippet. No jQuery required!
When the onchange event fires, it checks whether the checkbox was just checked or unchecked, and toggles the price accordingly. It can even be combined with all sorts of other checkboxes.
function togglePrice(element,price){
if(element.checked){
document.getElementById("amputeeFee").value = parseInt(document.getElementById("amputeeFee").value) + price;
}else{
document.getElementById("amputeeFee").value = parseInt(document.getElementById("amputeeFee").value) - price;
}
}
<tr>
<td><input name="amputeeGolfer" type="checkbox" id="amputeeGolfer" value="amputee" onchange="togglePrice(this,50);"/>
<label for="amputeeGolfer">Amputee Golfer</label></td>
<td align="left"><label for="amputeeFee">$50.00</label></td>
<td></td>
<td><input name="amputeeFee" type="number" id="amputeeFee" class="tblRight" size="10" value="0"/></td>
</tr>
It works perfectly and you can even set how much the checkbox adds to the cost!

You can get closest tr closest('tr') to assure input in same row with check box and find input with name find("input[name='amputeeFee']") and change value for it.
function changeFee(val) {
var amputeeFee = $(val).closest('tr').find("input[name='amputeeFee']");
if($(val).prop("checked")){
amputeeFee.val(50.00);
}
else{
amputeeFee.val(0);
}
}
function changeFee(val) {
var amputeeFee = $(val).closest('tr').find("input[name='amputeeFee']");
//console.log(amp.length);
if($(val).prop("checked")){
amputeeFee.val(50.00);
}
else{
amputeeFee.val(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input name="amputeeGolfer" type="checkbox" id="amputeeGolfer" value="amputee" onchange="changeFee(this)"/>
<label for="amputeeGolfer">Amputee Golfer</label></td>
<td align="left"><label for="amputeeFee">$50.00</label></td>
<td></td>
<td><input name="amputeeFee" type="number" id="amputeeFee" class="tblRight" size="10" value="0.00"/></td>
</tr>
</table>

To call a JavaScript function like changeFee(val) in an HTML's element event, the funciton has to be called as the same in the script. As all functions in an HTML' event: <element onclick="myFunction()">, and not <element onclick="myFunction"> beacuse it doesn't reconize it's a function in JavaScript.
Then the code will be:
<tr>
<td><input name="amputeeGolfer" type="checkbox" id="amputeeGolfer" value="amputee" onchange="changeFee(this.value)"/>
<label for="amputeeGolfer">Amputee Golfer</label></td>
<td align="left"><label for="amputeeFee">$50.00</label></td>
<td></td>
<td><input name="amputeeFee" type="number" id="amputeeFee" class="tblRight" size="10" value="0.00"/></td>

the "closest()" method in jquery wont work

so i have this html code and jquery code. And when i press a tablerows "produkter" button whith the class name "fa-products", i want to find the hidden field input that is on the same tablerow as the button you choose to click(every tablerow have a hidden field input and a "produkter button"). Then i want to save the value of the hidden field in a variable thats all can anyone help me? when i "console.log(discountId);" it responds undefiend
<div class="eastSide row top-buffer col-xs-8" style="overflow:scroll; height:250px;">
<table style="width:100%">
<tr>
<th>Code</th>
<th>Aktiv</th>
<th>Skapad</th>
<th></th>
</tr>
#foreach (var discount in Model.DiscountList)
{
<tr>
<td><input name="codeTextBox" id="codeTextBox" value="#discount.Code" maxlength="18" /></td>
<td><input type="checkbox" id="activeCheckBox" name="activeCheckBox" checked="#discount.Active" /></td>
<td><input type="datetime" value="#discount.CreatedDate" readonly /></td>
<td>
<input type="button" value="Radera" class="fa fa-remove" data-url="#Url.Action("DeleteDiscountCode","Discount",new { id= discount.Id})" />
<input type="button" value="Uppdatera" class="fa fa-update" data-url="#Url.Action("UpdateDiscount","Discount")" />
<input type="button" value="Produkter" class="fa fa-products" id="#discount.Id" data-url="#Url.Action("chooseProductsForDiscountCode","Discount")" />
</td>
<td><input id="id" type="hidden" value="#discount.Id" /></td>
</tr>
}
</table>
</div>
<script>
$(".fa-products").on("click", function (e) {
var discountId = $(event.target).closest('input[type="hidden"]').val();
console.log(discountId);
});
</script>

It will not work, because the hidden input is not the parent of the registered element.
Probably this will solve your issue: $(event.target).closest('tr').find('input[type="hidden"]').val();

You need to do search for common parent element via closest and then find input inside of the result:
$(".fa-products").on("click", function (e) {
var discountId = $(event.target).closest('tr').find('input[type="hidden"]').val();
console.log(discountId);
});

Deleting Row in table using jQuery

I have a table within a form with a dynamic number of rows that are added by clicking a button to add a new "dummy" row. I put a button at the end of each row that is supposed to delete the corresponding row, but I cannot get the delete button to do anything.
This is the enitre row with the button:
<tr id="dummyRow" class="hidden-print" style="display:none">
<td></td>
<td></td>
<td><input id="Qty" name="Qty" value="" class="qtyField" type="number" min="0" pattern="[0-9]*" maxlength="6" size="3"></td>
<td><input id="Price" name="Price" class="PriceField" type="text" maxlength="8" value=""></td>
<td><input id="Desc" name="Desc" class="hidden" value=""></td>
<td class="totalCol" taxable="true"></td>
<td><button type="button"class="btn btn-xs btn-warning" name="deleteRow"id="deleteRow">X</button></td>
</tr>
And this is the function as I currently have it (which does not work)
$("#deleteRow").click(function() {
var tr = $(this).closest('tr');
tr.remove();
totalQuote();
return false;
});
The function is within the $(document).ready(function(){} and the other button to add the rows is in the same function and works fine. I have researched this for an entire day and have tried several different ways to do this but none of them work when the button is within the "dummy row." When it is outside of the row, it works fine, just not within the row.
Does anyone have any idea what I am doing wrong? I dont know if I am putting the button in the wrong spot or the function in the wrong spot or none of the above

Since it is hidden, may be can you try showing it once on screen and removing it?
$(function () {
$("#deleteRow").click(function() {
var tr = $(this).closest('tr');
tr.remove();
totalQuote();
return false;
});
});
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<table>
<tr id="dummyRow" class="hidden-print">
<td></td>
<td></td>
<td><input id="Qty" name="Qty" value="" class="qtyField" type="number" min="0" pattern="[0-9]*" maxlength="6" size="3"></td>
<td><input id="Price" name="Price" class="PriceField" type="text" maxlength="8" value=""></td>
<td><input id="Desc" name="Desc" class="hidden" value=""></td>
<td class="totalCol" taxable="true"></td>
<td><button type="button"class="btn btn-xs btn-warning" name="deleteRow"id="deleteRow">X</button></td>
</tr>
</table>
Also please try delegating function, if you are using .clone() by using .on(). And when you give the .clone(), please pass the two parameters as true:
.clone(true, true);
This is for cloning the events as well.

If you are using this row for clone purposes, than you have to bind future events to that button, and you need to use a class instead of an ID.
To bind and event to all DOM and future ones, which you crate with JS you should use .on()
$("body").on("click",".deleteRow",callBack);

For some reason this is not working on your table code, however check this code within this JSFiddle;
$('button.btn').on('click', function () {
var a = $(this).parent().parent().remove();
totalQuote();
return false;
});

ID's should be unique to a page "It must be unique to a document". If you plan on using the dummy row multiple times, I suggest placing a class on the button instead and then using event delegation to handle .delete-row
Here is a simple example of event delegation:
(function () {
// Event delegation:
$('#unique-table-id').on('click', 'button.delete-row', function () {
$(this).closest('tr').remove();
});
$('button.add-row').on('click', function () {
$('#unique-table-id').append($('<tr><td>' + $('#unique-table-id tr').length + '</td><td><button class="delete-row">Delete</button></td></tr>'));
});
})();
table td {
border: 1px solid black;
}
table {
border: 1px solid black;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-row">Add Row</button>
<table id="unique-table-id"></table>

#Burimi had it exactly right. this function worked perfectly.
$("#quoteForm").on("click", ".deleteBtn", function(e) {
$(this).parent().parent().remove();
totalQuote();
});
It also worked with .closest instead of .parent().parent()

Try to add in row id a unique value to identify.
$('#myTableRow').remove();
This works fine, if your row has an id, such as:
<tr id="myTableRow"><td>blah</td></tr>

Delete button is not working

Html Table:
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
<tr>
<td>Name</td>
<td>Location</td>
<td>From</td>
<td>To</td>
<td>Add</td>
</tr>
<tr class="tr_clone">
<td><input type="text" placeholder="who" name="who" /></td>
<td><input type="text" placeholder="location" name="location" /></td>
<td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"/></td>
<td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"/></td>
<td><input type="button" name="add" value="Add" class="tr_clone_add"/></td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
</tr>
</table><!-- /table#table-data -->
Javascript:
$("input.tr_clone_add").live('click', function() {
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);
});
function deleteRow(r)
{
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("table-data").deleteRow(i);
}
Here is my fiddle:
http://jsfiddle.net/tejdeep/b6A9R/
This code is cloning first two cells of a table row. I have add and delete button for every row.
I want this as like this:
http://jsfiddle.net/nKkhW/5/
Add button wants to be there for the cloning row and delete button should be there for the cloned row.
I want to include the functionality while cloning first two cell values has to come to the cloned row?
Let me know if you have doubts in this question.

What I have understood by your question, on that basis I have created Fiddle. Hope it will help you,except the default value case.
Updated fiddle
To delete row, you can try:
var $actualrow = $(this).closest('.tr_clone');
$actualrow.remove();

<input type="button" value="Delete" onclick="deleteRow(this)"/>
The problem is, where is your deleteRow() ? it's not in your fiddle..
fixed : http://jsfiddle.net/b6A9R/5/
and you have to change onLoad to No wrap, otherwise your function will not work.

Here is the updated code for onLoad.
JS
$(document).on('click','input[value="Delete"]',function(){
deleteRow(this);
});
DEMO

Accessing Element From ngRepeat

How can I access a given record inside an ngRepeat loop from the controller, ultimately for form validate?
I have the following form which can have records dynamically added/removed by the user:
<table class="table table-condensed span12" id="tableParticipants">
<!-- snip -->
<tbody>
<tr ng-repeat="person in people">
<td><input type="text" pattern="[0-9]*" data-provide="typeahead" placeholder="8675309" ng-model="person.empid"></td>
<td><input type="text" data-provide="typeahead" placeholder="Firstname Lastname" ng-model="person.name"></td>
<td><input type="text" placeholder="Title" ng-model="person.title"></td>
<td style="text-align: center"><i class="icon-remove" ng-click="removeParticipant()"></i></td>
</tr>
</tbody>
</table>
On submitting the form I need to make sure that the employee IDs are valid, else I will get a database error. So, when I work through the loop:
$scope.people.forEach(function(element, index, array)
{
if ($element['empid'] == BAD)
{
// set corredponding ngRepeat row to error
}
}
How can I access that given row for the particular record?

You should be able to do something like the following. Add a css class name to the array item and/or an error message. The rest should be handled by Angular which will update. You have options of show/hiding a message, adding a class, etc.
<tr ng-repeat="person in people" ng-class="person.error">
<td><input type="text" pattern="[0-9]*" data-provide="typeahead" placeholder="8675309" ng-model="person.empid"></td>
<td><input type="text" data-provide="typeahead" placeholder="Firstname Lastname" ng-model="person.name"></td>
<td><input type="text" placeholder="Title" ng-model="person.title"></td>
<td style="text-align: center"><i class="icon-remove" ng-click="removeParticipant()"></i> <span>{{person.errorMessage}}</td>
</tr>
if ($element['empid'] == BAD)
{
$element['errorMessage'] = 'Invalid Id'; // could bind or show a span/depends.
$element['error'] = 'error'; // set to whatever class you want to use.
}