javascript - 如何根据输入值自动生成行?
问题描述
<label class="col-lg-1 control-label" id="pd">Mode:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="number" id="follow_Date" placeholder="Mode" name="TMode" class="form-control input-xs Mode">
</div>
</div>
</div>
这是在视图页面中输入文本框代码......
<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th >Date</th>
<th >Amount</th>
<th >Bank Name</th>
<th >Chqamt</th>
<th >Payable</th>
<th>Bank1</th>
<th >Chqamt1</th>
<th >Payable1</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href='javascript:void(0);' class='remove1'><span class='glyphicon glyphicon-remove'></span></a></td>
<td ><input style="width:50px" type="text" class="form-control" name="Sno[]" id="Sno"></td>
<td><input style="width:50px" type="text" class="form-control" name="Date[]" id="Date"></td>
<td> <input style="width:90px" type="text" class="form-control" name="Amount[]" id="Amount"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bankname[]" id="Bankname"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt[]" id="Chqamt"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable[]" id="Payable"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bank1[]" id="Bank1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt1[]" id="Chqamt1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable1[]" id="Payable1"></td>
</tr>
</tbody>
</table>
这是我的表格代码....在视图页面中
<script type="text/javascript">
$('#cartGrid').on('keydown','input', function (e) {
var keyCode = e.keyCode;
if (keyCode !== 9) return;
var $this = $(this),
$lastTr = $('tr:last', $('#cartGrid')),
$lastTd = $('td:last', $lastTr);
if (($(e.target).closest('td')).is($lastTd)) {
var cloned = $lastTr.clone();
cloned.find('input').val('');
$lastTr.after(cloned);
}
});
</script>
<script>
$(document).on('click', '.remove1', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
</script>
这是用于自动创建单元格的 javascript。
我的问题是如何通过输入输入字段来创建自动行。sno 会自动生成(即 1,2... 基于输入值)。
请帮助解决这个问题。
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<label class="col-lg-1 control-label" id="pd">Mode:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="number" id="follow_Date" placeholder="Mode" name="TMode" class="form-control input-xs Mode">
</div>
</div>
</div>
<label class="col-lg-1 control-label" id="pd">Due Start:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="text" class="form-control input-xs datepicker-dates Dues" placeholder="Due Start Date…" id="txtDate" name="TDDate" value="">
</div>
</div>
</div>
</div>
<div class="container">
<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th >Date</th>
<th >Amount</th>
<th >Bank Name</th>
<th >Chqamt</th>
<th >Payable</th>
<th>Bank1</th>
<th >Chqamt1</th>
<th >Payable1</th>
</tr>
</thead>
<tbody id="appendRows">
<tr>
<td><a href='javascript:void(0);' class='remove1'><span class='glyphicon glyphicon-remove'></span></a></td>
<td ><input style="width:50px" type="text" class="form-control" name="Sno[]" id="Sno" value="1"></td>
<td><input style="width:50px" type="text" class="form-control" name="Date[]" id="Date"></td>
<td> <input style="width:90px" type="text" class="form-control" name="Amount[]" id="Amount"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bankname[]" id="Bankname"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt[]" id="Chqamt"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable[]" id="Payable"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bank1[]" id="Bank1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt1[]" id="Chqamt1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable1[]" id="Payable1"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript">
$('#cartGrid').on('keydown','input', function (e) {
var keyCode = e.keyCode;
if (keyCode !== 9) return;
var $this = $(this),
$lastTr = $('tr:last', $('#cartGrid')),
$lastTd = $('td:last', $lastTr);
if (($(e.target).closest('td')).is($lastTd)) {
var cloned = $lastTr.clone();
cloned.find('input').val('');
$lastTr.after(cloned);
}
});
</script>
<script>
$(document).on('click', '.remove1', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
</script>
<script type="text/javascript">
$(function(){
$("body").on("focusout",".Mode",function(){
var trLength=$('body #appendRows tr').length;
for (var i = 1; i <trLength; i++) {
$('#appendRows tr:nth-child(2)').remove();
}
var val = $(this).val();
var i=0;
for(i==0;i<val;i++){
var html = $("#appendRows tr:first-child").clone();
html.find("input").val("");
html.find('input[name^="Sno"]').val(i+2);
$('#appendRows').append(html);
}
});
})
</script>
推荐阅读
- php - 无法从 URL 加载文件,但适用于本地路径
- docker - 保护最终用户定义的 Kubernetes Pod
- ruby-on-rails - 带有 rspec 和请求的 Rails/Rspec 集成测试 - 路由与第二次测试不匹配
- javascript - 在 express js 中获取静态文件
- linker - GNU 链接器 LENGTH 部分乘法因子
- python - 可以用python访问PowerPoint的add in函数吗?
- configuration - 在 Grails 3 中使用 runtime.groovy 属性覆盖 application.yml 配置属性
- flutter - 我收到一个没有这样的方法错误:Receiver null。尝试调用:[]("postId") 颤动错误
- python - 如何在某个字符最后出现后拆分字符串
- angular - 如何在 Angular 的管道中测试多个请求?