We Keep Coding

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>

javascript dynamic mutiple inputs

why not working this code?
Maybe someone knows?
Table:
$(document).ready(function() {
var postURL = "<?php echo url('invoices/create') ?>";
var i = 1;
// Add inputs
$('#add').click(function() {
i++;
$('#dynamic_field').append('' +
'<tr id="row' + i + '">' +
'<td><input class="form-control form-control-alternative" type="text" name="description[]" placeholder="Description"></td>' +
'<td><input class="form-control form-control-alternative" type="text" name="qty[]" placeholder="Qty"></td>' +
'<td><input class="form-control form-control-alternative" type="text" name="price[]" placeholder="Price"></td>' +
'<td><button type="button" name="remove" id="' + i + '" class="btn btn-sm btn-danger btn-remove">X</button></td></tr>');
});
// Remove inputs
$(document).on('click', '.btn-remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$.ajaxSetup({
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="dynamic_field">
<thead>
<tr>
<th scope="col">Description</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control form-control-alternative" type="text" name="description[]" placeholder="Description"></td>
<td><input class="form-control form-control-alternative" type="text" name="qty[]" placeholder="Qty"></td>
<td><input class="form-control form-control-alternative" type="text" name="price[]" placeholder="Price"></td>
<td><button type="button" name="add" id="add" class="btn btn-sm btn-success">+</button></td>
</tr>
</tbody>
</table>

Need to replicate script for additional table without affecting the original script

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

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'));

Issue Submitting Dynamic Form After Deleting Row

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>