Как автоматически генерировать строки на основе входных значений? - PullRequest
Новая
       0

Как автоматически генерировать строки на основе входных значений?

0 голосов
/ 28 ноября 2018 
<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 ... на основе входных значений).

, пожалуйста, помогите решить эту проблему.

1 Ответ

0 голосов
/ 28 ноября 2018 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...