gpt4 book ai didi

javascript - 如何按顺序给出数字,即使我删除一行输入,顺序也不应该重复

转载 作者:行者123 更新时间:2023-11-27 23:42:38 26 4
gpt4 key购买 nike

我使用 jquery 的 length 属性进行编号,但是一旦删除一行,顺序就会丢失。重复号码再次出现

$('#add').click(function() {
var x = $('<div class="ui-state-highlight">' + ($('.con div').length + 1) + '<input type="text" class="form-control" ng-model="input.field" placeholder="Name"/><input type="text" class="form-control" ng-model="input.value" placeholder="Email"/><a href="a"><span class="glyphicon glyphicon-move"></span></a><input type="button" class="form-control Minus" value="delete" /></div>');
x.appendTo('#form .con')
});

$('.con').on('click', '.Minus', function() {
$(this).parents(".ui-state-highlight").remove();
});

$("span").sortable({
connectWith: ".con"
}).disableSelection();
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div>
<button id="add">add another option</button>
<form id="form" class="form-inline">
<span class="con">
<div class="ui-state-highlight"><input type="text" class="form-control" ng-model="input.field" placeholder="Name"/>
<input type="text" class="form-control" placeholder="Email"/>
<input type="button" class="Minus" value="-" />
</div>
</span>
</form>
</div>
</body>
</html>

最佳答案

据我了解,您希望在情况发生变化时重新编号您的“订单”编号?

只需对标记进行轻微更新(在数字周围添加跨度),然后进行一些细微更改即可完成此操作。

首先,我删除了您附加的大字符串,并简单地克隆了第一行并清除了输入然后,如果第一行是唯一的行,我会阻止删除第一行。

我添加了一个 rowid 类来更轻松地执行此操作。

然后,当发生任何更改(包括排序)时,我会更新所有行的该数字。

经过更改的标记:

<div>
<button id="add">add another option</button>
<form id="form" class="form-inline"> <span class="con">
<div class="row ui-state-highlight"><span class="rowid">1</span>
<input type="text" class="form-control" ng-model="input.field" placeholder="Name" />
<input type="text" class="form-control" placeholder="Email" />
<input type="button" class="Minus" value="-" />
</div></span>
</form>
</div>

function fixIds() {
$('#form .con').find('.rowid').each(function (i) {
$(this).text(i + 1);
});
}
$('#add').click(function () {
var x = $('#form').find('.row:first').clone();
x.find('.form-control').val('');
x.appendTo('#form .con');
fixIds();
});
$('.con').on('click', '.Minus', function () {
if ($('.rowid').length > 1) {
$(this).parents(".ui-state-highlight").remove();
fixIds();
}
});
$("span.con").sortable({
connectWith: ".con"
}); //.disableSelection();
$("span.con").on("sortupdate", function (event, ui) {
fixIds();
});

fiddle 演奏:http://jsfiddle.net/MarkSchultheiss/wLum04bq/

关于javascript - 如何按顺序给出数字,即使我删除一行输入,顺序也不应该重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33535294/

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