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/
Related
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>
I have two tables to which I want to be able to dynamically add and delete rows that both use separate scripts but are the same. How can I alter the second script so that it is able to make changes to the second table and not the first one?
Table:
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Numbers</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<input type="text" name="number[]" class="form-control"/>
</td>
<td class="col-sm-4"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="0" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Another Number"/>
</td>
</tr>
</tfoot>
</table>
Script:
<script>
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="number min="1"" class="form-control" name="step_number[]' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="step_description[]' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
</script>
you should do like is done in the line delete.
instead of
$("table.order-list").append(newRow);
you can do
$(this).closest("table.order-list").append(newRow);
and should add a class to add button instead of using the id
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'));
I have a form that I am building with a table, I want to be able to add or delete rows to this form and submit.
Here is a js.fiddle for my form
https://jsfiddle.net/oyvk1whx/
<form asp-controller="Institution" asp-action="AccountCategoryFees" method="post" class="form-horizontal">
<div asp-validation-summary="All" class="text-danger"></div>
<input asp-for="AccountCategoryId" type="hidden"/>
<table class="table table-responsive" id="feeTable">
<thead>
<tr>
<td><strong>Description</strong></td>
<td><strong>Price</strong></td>
<td><strong>Delete</strong></td>
</tr>
</thead>
#for (int j = 0; j < Model.Fees.Count; j++)
{
<tr>
<td>
<input asp-for="Fees[j].Description" />
</td>
<td>
<span style="position: absolute; margin-left: 2px; margin-top: 8px;">$</span><input asp-for="Fees[j].Price" type="number" min="0.00" step="0.0001" max="2500" class="form-control" />
</td>
<td>
<input type="button" class="deleteButton btn btn-md btn-danger" value="Delete">
</td>
</tr>
}
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" style="color:gray" value="Add Fee" />
</td>
</tr>
<tr></tr>
</tfoot>
</table>
<div class="modal-footer" style="padding:0px;">
<button type="submit" class="btn bg-primary">Save</button>
</div>
</form>
<script>
var feeTypes = #Html.Raw(Json.Serialize(#Model.Fees));
</script>
<script>
var counter = #Model.Fees.Count;
$('#feeTable').on("click", "#addrow", function () {
var cols = "<tr>";
cols += '<td><input id="Fees_' + counter + '__Description" name="Fees[' + counter + '].Description"/></td>';
cols += '<td><span style="position: absolute; margin-left: 2px; margin-top: 8px;">$</span><input id="Fees_' + counter + '__Price" name="Fees[' + counter + '].Price" type="number" min="0.00" step="0.0001" max="2500" value="0" class="form-control"/></td>';
cols += '<td><input type="button" class="deleteButton btn btn-md btn-danger" value="Delete"></td>';
cols += '</tr>';
$("#feeTable").append(cols);
counter++;
});
$(document).on("click", ".deleteButton", function (event) {
$(this).closest("tr").remove();
});
</script>
The script works fine for adding new rows and deleting rows. The issue is when I delete a row the form no longer submits correctly, all rows after the deleted one are ignored.
I believe this is because of the disconnect in the ids, since there is a gap the model binder cannot parse it.
Any suggestions?
I believe this is because of the disconnect in the ids, since there is a gap the model binder cannot parse it
I would suggest to avoid square brackets in names and/or ids if possible and to solve your issue on your server side. In any case, if you need to rearrange IDs and NAMEs attributes you can simply cycle on each table row (because on server side you will handle only names, you can rearrange only these) :
$('#feeTable tr:has(input.deleteButton)').each(function(rIdx, row) {
$(row).find('[id^=Fees_]').each(function(cIdx, col) {
// col.id = col.id.replace(/\d+/, rIdx);
col.name = col.name.replace(/\d+/, rIdx);
});
})
var counter = 0;
$('#feeTable').on("click", "#addrow", function () {
var cols = "<tr>";
cols += '<td><input id="Fees_' + counter + '__Description" name="Fees[' + counter + '].Description"/></td>';
cols += '<td><span style="position: absolute; margin-left: 2px; margin-top: 8px;">$</span><input id="Fees_' + counter + '__Price" name="Fees[' + counter + '].Price" type="number" min="0.00" step="0.0001" max="2500" value="0" class="form-control"/></td>';
cols += '<td><input type="button" class="deleteButton btn btn-md btn-danger" value="Delete"></td>';
cols += '</tr>';
$("#feeTable").append(cols);
counter++;
});
$(document).on("click", ".deleteButton", function (event) {
$(this).closest("tr").remove();
$('#feeTable tr:has(input.deleteButton)').each(function(rIdx, row) {
$(row).find('[id^=Fees_]').each(function(cIdx, col) {
// col.id = col.id.replace(/\d+/, rIdx);
col.name = col.name.replace(/\d+/, rIdx);
});
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-responsive" id="feeTable">
<thead>
<tr>
<td><strong>Description</strong></td>
<td><strong>Price</strong></td>
<td><strong>Delete</strong></td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" style="color:gray" value="Add Fee" />
</td>
</tr>
<tr></tr>
</tfoot>
</table>
<button type="submit" class="btn bg-primary">Save</button>
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>