gpt4 book ai didi

javascript - 如何在动态数据表中设置静态(第一行是常量)行

转载 作者:太空宇宙 更新时间:2023-11-04 15:43:40 25 4
gpt4 key购买 nike

我使用 bootstrap 创建了动态表。我有两排。但现在我想第一行是静态的(常量),第二行只有添加新行按钮,如果单击按钮添加新行仅第二行元素的副本 ..

Simplify the question:

  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

Simplify:

  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

你能帮帮我吗?

最佳答案

当您通过循环 td 创建新元素时,您引用的是第一行(使用 index 0 )

$.each($("#tab_logic tbody tr:nth(0) td"), function() {

你需要引用第二行,使用index 1

.each($("#tab_logic tbody tr:nth(1) td"), function() {

这是 JS Fiddle

关于javascript - 如何在动态数据表中设置静态(第一行是常量)行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58245792/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com