Я создал динамическую таблицу с помощью начальной загрузки. У меня есть два ряда. но теперь я хочу Первая строка является статической (постоянной) , а вторая строка имеет только кнопку добавления новой строки, если кнопка нажата, добавьте новую строку копию элементов, только вторая строка ..
Упростить вопрос:
1. First row is static,
2. Second row only having add new row button,
3. If click add new row button the another row will come
that row having copy of second row elements or fields
Ниже мой ошибочный код ..
$(document).ready(function() {
$("#add_row").on("click", function() {
// Dynamic Rows Code
// Get max row id and set new id
var newid = 0;
$.each($("#tab_logic tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
newid++;
var tr = $("<tr></tr>", {
id: "addr" + newid,
"data-id": newid
});
// loop through each td and create new elements with name of newid
$.each($("#tab_logic tbody tr:nth(0) td"), function() {
var td;
var cur_td = $(this);
var children = cur_td.children();
// add new td and element if it has a nane
if ($(this).data("name") !== undefined) {
td = $("<td></td>", {
"data-name": $(cur_td).data("name")
});
var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
c.attr("name", $(cur_td).data("name") + newid);
c.appendTo($(td));
td.appendTo($(tr));
} else {
td = $("<td></td>", {
'text': $('#tab_logic tr').length
}).appendTo($(tr));
}
});
// add delete button and td
/*
$("<td></td>").append(
$("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>")
.click(function() {
$(this).closest("tr").remove();
})
).appendTo($(tr));
*/
// add the new row
$(tr).appendTo($('#tab_logic'));
$(tr).find("td button.row-remove").on("click", function() {
$(this).closest("tr").remove();
});
});
// Sortable Code
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
return $helper;
};
$(".table-sortable tbody").sortable({
helper: fixHelperModified
}).disableSelection();
$(".table-sortable thead").disableSelection();
$("#add_row").trigger("click");
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<a id="add_row" class="btn btn-primary float-right adRow">Add New</a>
<div class="col-md-12 table-responsive">
<table class="table table-bordered table-hover table-sortable" id="tab_logic">
<thead style="background-color: #680779;
color: #fff;">
<tr>
<th class="text-center">
Account Code
</th>
<th class="text-center">
A/c Name*
</th>
<th class="text-center">
Narration*
</th>
<th class="text-center">
Debit*
</th>
<th class="text-center">
Credit
</th>
<th class="text-center" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;">
Action
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="cashacc_code" placeholder='Name' class="form-control" />
</td>
<td>
<select class="form-control" id="cashacc">
<option value="">Select Option</option>
<option value="1">JOE</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="text" id="cashdeb" placeholder='Name' data-action="sumDebit" class="form-control" />
</td>
<td>
<input type="text" id="cashcredit" placeholder='Name' class="form-control" readonly />
</td>
<td>
<button class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn'><span aria-hidden="true">×</span></button>
</td>
</tr>
<tr id='addr0' class="hidden">
<td data-name="cashCode">
<input type="text" id="cashacc_code" name='cashacc_code' placeholder='Name' class="form-control" />
</td>
<td data-name="sel">
<select class="form-control" name="sel0" id="cashacc">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</td>
<td data-name="narrate">
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td data-name="dbt">
<input type="text" id="cashdeb" name='cashdeb' placeholder='Name' data-action="sumDebit" class="form-control" />
</td>
<td data-name="crdit">
<input type="text" id="cashcredit" name='cashcredit' placeholder='Name' class="form-control" readonly />
</td>
<td data-name="del">
<button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn'><span aria-hidden="true">×</span></button>
</td>
</tr>
</tbody>
</table>
</div>
Fiddle Here
Упрощение:
1. First row is static,
2. Second row only having add new row button,
3. If click add new row button the another row will come
that row having copy of second row elements or fields
Вы можете мне помочь ..?