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>
Related
Im trying to make it so when the first column is clicked the N next to each checkbox goes away so far I have tried 2 different methods the first was nextsilbing.remove but that just removed the row I clicked on. The second method I tried was this.nextAll and removed everything but the row clicked.
[picture of table][1]
$('#table_output tbody').on('click', 'tr', function() {
console.log(table.row(this).data());
alert(JSON.stringify(table.row(this).data()));
})
$('#table_output tbody').on('click', 'td', function() {
console.log(table.cell(this).data());
while (this.nextSilbing){
this.nextSibling.remove("N")
}
alert("Test" + table.cell(this).data());
//second method
$(this).nextAll().remove("N").end().remove();
})
<table>
<tr>
<th>Carrier</th>
<th>fixed</th>
<th>mobile</th>
<th>payphone</th>
</tr>
<tr>
<td>Cat066</td>
<td><input type="checkbox" name="Fixed" ::before "N" /> </td>
<td><input type="checkbox" name="Mobile" ::before "N" /> </td>
<td><input type="checkbox" name="PayPhone" ::before "N" /> </td>
</tr>
</table> ```
[1]: https://i.stack.imgur.com/vUSKM.png
I’d try to put the :before in a css class instead, and toggle the class with JQ.
// css
.input.n:before {
content: “N”;
}
// js
// assuming `this` is the input element
$(this).toggleClass('n');
Apologies if the syntax is a bit wrong, I’m on mobile ;) correct me in the comments
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>
I have a table which includes a checkbox and mutliple input boxes in its each row.
I want to change the value of all input boxes of that row when I check the checkbox. Currently I only access the first input box.
My codes are.
<table>
<tr>
<td><input type="checkbox" class='isActive'/></td>
<td><input type="text" class='name'/></td>
<td><input type="text" class='name'/></td>
<td><input type="text" class='name'/></td>
</tr>
<tr>
<td><input type="checkbox" class='isActive'/></td>
<td><input type="text" class='name'/></td>
<td><input type="text" class='name'/></td>
<td><input type="text" class='name'/></td>
</tr>
</table>
and JS
$('body').on('click','.isActive',function(){
if ($(this).is(':checked')) {
$(this).parent().next().find('.name').val('Demian');
}
});
how to solve this. JS fiddle link is http://jsfiddle.net/Iftakharul_alam/txpg8mhf/1/
Do this:
$('body').on('click','.isActive',function(){
if($(this).is(':checked')) {
$(this).closest('tr').find('.name').val('Demian');
} else {
$(this).closest('tr').find('.name').val('');
}
});
This will change all .name elements on the current row.
As j08691 pointed out, you can use the ternary operator to reduce code.
When chaining several jQuery methods together, you can separate them for legibility:
$('body').on('click','.isActive',function(){
$(this)
.closest('tr')
.find('.name')
.val(this.checked ? 'Demian' : '');
});
Note that you can refer to the checked property simply as this.checked instead of $(this).is(':checked').
Fiddle
Instead of next() use parent()
$('body').on('click','.isActive',function(){
if ($(this).is(':checked')) {
$(this).parent().parent().find('.name').val('Demian');
}
});
You just need to use .nextAll() instead of .next():
$('body').on('click', '.isActive', function () {
$(this).parent().nextAll().find('.name').val($(this).is(':checked') ? 'Demian' : '');
});
jsFiddle example
And as you can see, you can use a ternary operator to reduce the amount of code.
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
How could I make it so the code below retains what it does now but does the following:
a) When the add menu link/button is clicked it shows the bookingName menu div and the same item and qty boxes
b) When the above happens it also needs the abilty to add more rows to that particular just added menu
Demo of current work
jQuery:
$(document).ready(function () {
$('<tr/>', {
'class': 'menuDetails',
html: getMenuHTMLDetails()
}).appendTo('#addMoreItemsButton');
$('#addItem').click(function () {
$('<tr/>', {
html: getMenuHTMLDetails()
}).hide().appendTo('.menuDetailsBlock').slideDown('slow');
});
})
function getMenuHTMLDetails() {
var $clone = $('.menuDetails').clone();
$clone.find('[name="item[]"]')[0].name = "item";
$clone.find('[name="qty[]"]')[0].name = "qty";
return $clone.html();
}
HTML:
<div class="formBlock">
<p><span class="bookingName">Menu<span class="required">*</span></span><span class="bookingInput"><input type="text" name="menu"/></span></p>
</div>
<div class="formBlock">
<table class="menuDetailsBlock">
<tr>
<td><span class="bookingName">Item<span class="required">*</span></span></td>
<td><span class="bookingName">QTY<span class="required">*</span></td>
</tr>
<tr class="menuDetails">
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
<tr>
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
<tr>
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
</table>
<div class="appendMoreItems"></div>
</div>
<div class="formBlock">
Add Item Add Menu
</div>
</div>
The first thing you should be aware of is that your html is invalid. You can't have something like:
<td><span>...</td><td>...</span></td>
Because this form needs the ability to be duplicated, you need to remove all IDs (and ideally change to them classes). e.g. id="addMenu" -> class="addMenu".
Instead of using your standard click handler, you should use delegates to handle any clicks within your outer container - read http://api.jquery.com/on/.
As for your duplication problem, place a template of your elements to be duplicated inside a script tag with an id you can reference and clone (with .html()), or, even better, consider looking into http://handlebarsjs.com/ or http://akdubya.github.io/dustjs/.