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
Related
I have a HTML table which has the following structure:
<table id="myTable">
<tr>
<td><input type="text" name="FullName" value="Tom" /></td>
<td><input type="checkbox" name="isActive" /></td>
<td>Edit
</tr>
</table>
When the user clicks the 'edit' link, a Javascript function is called (see below). In this function I need to get the data from the table, i.e., FullName and whether or not isActive has been checked.
$("#namedTutors").on('click', '.editTutor', function () {
var tr = $(this).closest("tr");
var fullName = tr.find("input[name=FullName]").val();
});
I can get the FullName easy enough, but I'm having difficulties retrieving the data to see if isActive has been checked/ticked or not.
Could someone please help.
Thanks.
You could select the ckeckbox input by name [name=isActive] then use the .is(':checked') to check whether the ckeckbox is checked or not, like:
$("#namedTutors").on('click', '.editTutor', function() {
var tr = $(this).closest("tr");
var fullName = tr.find("input[name=FullName]").val();
var isActive = tr.find("input[name=isActive]").is(':checked');
console.log( isActive );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="namedTutors">
<tr>
<td><input type="text" name="FullName" value="Tom" /></td>
<td><input type="checkbox" name="isActive" /></td>
<td>Edit
</tr>
</table>
if(tr.find('input[name="isActive"]:checked').length) {
console.log('it is checked');
}
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);
});
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>
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/.
I have table like this:
<table id="myTable" border="1">
<tbody>
<tr><td>Name</td></tr>
<tr><td><input name="field-1" type="text" /></td></tr>
<tr><td><input name="field-2" type="text" /></td></tr>
</tbody>
</table>
I want a ADD MORE button, so every time when we click ADD MORE button it adds a new row with unique NAME like
<tr><td><input name="field-3" type="text" /></td></tr>
<tr><td><input name="field-4" type="text" /></td></tr>
Please suggest a solution.
Thanks you!
$('button#add_more').on('click', function() {
var table = $('table#myTable tbody'),
len = $('input[type=text]', table).length;
table.append('<tr><td><input name="field-'+ (len+1)+'" type="text" /></td></tr>');
})
DEMO
Demo :: http://jsfiddle.net/ankur20us/MTXhZ/
$('#click').click(function(){
var totRows=$('#myTable tr').length;
$('#myTable').append("<tr><td><input name='field-"+ totRows +"' type='text' /></td></tr>")
});