javascript - 如何根据输入值自动生成行？-6ren

javascript - 如何根据输入值自动生成行？

转载作者：行者123 更新时间：2023-12-03 00:39:37

<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>

这是我的表格代码......在 View 页面

    <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&hellip;" 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>

关于javascript - 如何根据输入值自动生成行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53513286/

文章推荐： selenium - 使用 Selenium Web 驱动程序或 selenium RC

文章推荐： elasticsearch - Elasticsearch获取随机文档，每个类别至少5个

文章推荐： twitter-bootstrap - 下拉菜单中的 Twitter 日期选择器

文章推荐： powershell - Powershell以yyMMdd格式获取星期几

rust - 是否可以为结构的一部分派(dispatch)生(RustcEncodable)？
我有一个像这样的结构: struct S { data: i32, fun: Box, } 并希望使用编码器序列化数据部分。为此，我使用 rustc_serialize 并推导出它的特
jsp - 生/tomcat : set session variable after j_security_check
我在 tomcat 中使用基于表单的身份验证，实际上我使用的是 j_security_check。代码如下 Login to the Tomcat-Demo applic

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何根据输入值自动生成行？