在jquery中增加行的序号no
问题描述:
我正在编写一个代码来动态生成行。 我有麻烦,行号错误地生成。问题是,第一个可见的序列号的行被改变,而其他的只是以正确的格式向下移动。请告诉我该怎么做才能让序列号正确以下是我的代码。 HTML代码在jquery中增加行的序号no
var counter = 1;
$(function() {
$("#button1").click(function() {
counter++;
$('#dynamic').append($("#main-row").clone().attr("id", counter + 1));
$("#serial").text(counter);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="dynamic">
<div class="row " id="main-row">
<div class="col-sm-1 serial " id="serial">1</div>
<div class="col-sm-2 ">
<select class="container-fluid" name="select item" id="selection">
<option>Please select item</option>
<option value="30000" id="30000">Computer</option>
<option value="4000" id="4000">Mobile</option>
<option value="5000" id="5000">LCD</option>
<option value="1500" id="1500">Keyboard</option>
<option value="500" id="500">Mouse</option>
</select>
</div>
<div class="col-sm-2 "><input class="length quantity" type="number" min="1" name="quantity" id="quantity" required/></div>
<div class="col-sm-2 "><input class="length price " type="number" name="unitPrice" id="price1" value="" min="1" readonly/></div>
<div class="col-sm-2"><input class="length total" type="number" name="total" min="1" id="total" readonly/></div>
<button class="btn-primary col-sm-1 del ">Delete</button>
</div>
</div>
<div class="btn-group-vertical offset-10">
<button class="btn btn-primary" id="button1">Add Row</button>
<button class="btn-warning" id="btnSubmit">Submit Order</button>
</div>
答
你必须保持id作为一个独特的属性值。当您克隆内容时,该内容中的所有ids
都将被复制。所以,你不会有唯一的ids
。
我改变你的代码,并使用classes
代替ids
var counter = 1;
$(function() {
$("#button1").click(function() {
counter++;
$('#dynamic').append($(".main-row:first").clone().attr("id", "row_" + counter));
$("#row_" + counter).find(".serial").text(counter);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="dynamic">
<div class="row main-row">
<div class="col-sm-1 serial">1</div>
<div class="col-sm-2 ">
<select class="container-fluid" name="select item" id="selection">
<option>Please select item</option>
<option value="30000">Computer</option>
<option value="4000">Mobile</option>
<option value="5000">LCD</option>
<option value="1500">Keyboard</option>
<option value="500">Mouse</option>
</select>
</div>
<div class="col-sm-2 "><input class="length quantity" type="number" min="1" name="quantity" id="quantity" required/></div>
<div class="col-sm-2 "><input class="length price " type="number" name="unitPrice" id="price1" value="" min="1" readonly/></div>
<div class="col-sm-2"><input class="length total" type="number" name="total" min="1" id="total" readonly/></div>
<button class="btn-primary col-sm-1 del ">Delete</button>
</div>
</div>
<div class="btn-group-vertical offset-10">
<button class="btn btn-primary" id="button1">Add Row</button>
<button class="btn-warning" id="btnSubmit">Submit Order</button>
</div>
答
您可以使用CSS计数器这个
检查下面的代码片段
var counter = 1;
$(function() {
$("#button1").click(function() {
counter++;
$('#dynamic').append($("#main-row").clone().attr("id", counter + 1));
});
});
.container {
counter-reset: row;
/* Set the row counter to 0 */
}
.container .row::before {
counter-increment: row;
/* Increment the row counter*/
content: counter(row) ": ";
/* Display the row */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="dynamic">
<div class="row " id="main-row">
<div class="col-sm-2 ">
<select class="container-fluid" name="select item" id="selection">
<option>Please select item</option>
<option value="30000" id="30000">Computer</option>
<option value="4000" id="4000">Mobile</option>
<option value="5000" id="5000">LCD</option>
<option value="1500" id="1500">Keyboard</option>
<option value="500" id="500">Mouse</option>
</select>
</div>
<div class="col-sm-2 "><input class="length quantity" type="number" min="1" name="quantity" id="quantity" required/></div>
<div class="col-sm-2 "><input class="length price " type="number" name="unitPrice" id="price1" value="" min="1" readonly/></div>
<div class="col-sm-2"><input class="length total" type="number" name="total" min="1" id="total" readonly/></div>
<button class="btn-primary col-sm-1 del ">Delete</button>
</div>
</div>
<div class="btn-group-vertical offset-10">
<button class="btn btn-primary" id="button1">Add Row</button>
<button class="btn-warning" id="btnSubmit">Submit Order</button>
</div>
希望它有帮助
+0
感谢您的帮助:) – Ahmad
答
我想你应该使用这个逻辑你的代码会附加到container.After行的基础上,计数器加一如下所示。
$("#button1").click(function() {
var counter = $(".container>.row").length;
var next_id = counter + 1;
$('#dynamic').append($("#main-row").clone().attr("id", next_id));
$("#"+next_id).find(".serial").text(next_id);
});
感谢他解决了问题:) – Ahmad
@Ahmad,我很高兴听到这一点。顺便说一下,在克隆的内容中仍然有一些带有'id'的元素。我强烈建议你让他们nummerized。或者,使用'class'代替 – Mojtaba
好的,谢谢我一定会深入研究它。谢谢你的帮助。我只是一个初学者,所以我犯了这样的错误。但我肯定会从我的错误中学习 – Ahmad