动态添加新行到表中使用按钮单击php

我已经创建了一个动态表使用php.Now我想添加此功能。动态添加新行到表中使用按钮单击php

当我们点击提交按钮，它会自动将数据添加到数据库中，并创建新的行和前一行应该被禁用，它不能edited.How做到这一点？

<?php 
session_start(); 
require_once "header.php"; 
?> 
<body> 
<div class="text-center"> 
<h1>PAYMENT PAGE</h1> 
</div> 
<hr> 

    <div class="container"> 
    <div class="row clearfix"> 
     <div class="col-md-12 column"> 
      <table class="table table-bordered table-hover" id="tab_logic"> 
       <thead> 
        <tr > 
         <th class="text-center"> 
          # 
         </th> 
         <th class="text-center"> 
          User ID 
         </th> 
         <th class="text-center"> 
          Name 
         </th> 
         <th class="text-center"> 
          NIC 
         </th> 
         <th class="text-center"> 
          Amount 
         </th> 
         <th class="text-center"> 
          Date 
         </th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr id='addr0'> 
         <td> 
         1 
         </td> 
         <td> 
         <input type="text" name='uid' placeholder='User ID' class="form-control"/> 
         </td> 
         <td> 
         <input type="text" name='uname' placeholder='Name' class="form-control"/> 
         </td> 
         <td> 
         <input type="text" name='nic' placeholder='NIC' class="form-control"/> 
         </td> 
         <td> 
         <input type="text" name='amount' placeholder='Amount' class="form-control"/> 
         </td> 
         <td> 
         <input type="date" name='dt' placeholder='Date' class="form-control"/> 
         </td> 
        </tr> 
        <tr id='addr1'></tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
    <button id="add_row" class="btn btn-primary btn-lg pull-left" >SUBMIT</button> 
</div> 


</body> 
</html> 


    $(document).ready(function(){ 
     var i=1; 
    $("#add_row").click(function(){ 
     $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input type='text' name='uid"+i+"' placeholder='User ID' class='form-control input-md'/></td><td><input type='text' name='uname"+i+"' placeholder='Name' class='form-control input-md'/></td><td><input type='text' name='nic"+i+"' placeholder='NIC' class='form-control input-md'/></td><td><input type='text' name='amount"+i+"' placeholder='Amount' class='form-control input-md'/></td><td><input type='date' name='dt"+i+"' placeholder='Date' class='form-control input-md'/></td>"); 

     $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>'); 
     i++; 
    }); 
});

来源

2017-06-01 Manusha

尝试只是disable的所有以前row输入与$('tr').find('input').prop('disabled',true)之前新行追加。

Jquery Documentation of prop()

更新 jQuery的版本3.2.1

$(document).ready(function() { 
 
    var i = 1; 
 
    $("#add_row").click(function() { 
 
    $('tr').find('input').prop('disabled',true) 
 
    $('#addr' + i).html("<td>" + (i + 1) + "</td><td><input type='text' name='uid" + i + "' placeholder='User ID' class='form-control input-md'/></td><td><input type='text' name='uname" + i + "' placeholder='Name' class='form-control input-md'/></td><td><input type='text' name='nic" + i + "' placeholder='NIC' class='form-control input-md'/></td><td><input type='text' name='amount" + i + "' placeholder='Amount' class='form-control input-md'/></td><td><input type='date' name='dt" + i + "' placeholder='Date' class='form-control input-md'/></td>"); 
 

 
    $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>'); 
 
    i++; 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 

 
<div class="text-center"> 
 
    <h1>PAYMENT PAGE</h1> 
 
</div> 
 
<hr> 
 

 
<div class="container"> 
 
    <div class="row clearfix"> 
 
    <div class="col-md-12 column"> 
 
     <table class="table table-bordered table-hover" id="tab_logic"> 
 
     <thead> 
 
      <tr> 
 
      <th class="text-center"> 
 
       # 
 
      </th> 
 
      <th class="text-center"> 
 
       User ID 
 
      </th> 
 
      <th class="text-center"> 
 
       Name 
 
      </th> 
 
      <th class="text-center"> 
 
       NIC 
 
      </th> 
 
      <th class="text-center"> 
 
       Amount 
 
      </th> 
 
      <th class="text-center"> 
 
       Date 
 
      </th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr id='addr0'> 
 
      <td> 
 
       1 
 
      </td> 
 
      <td> 
 
       <input type="text" name='uid' placeholder='User ID' class="form-control" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" name='uname' placeholder='Name' class="form-control" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" name='nic' placeholder='NIC' class="form-control" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" name='amount' placeholder='Amount' class="form-control" /> 
 
      </td> 
 
      <td> 
 
       <input type="date" name='dt' placeholder='Date' class="form-control" /> 
 
      </td> 
 
      </tr> 
 
      <tr id='addr1'></tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
    <button id="add_row" class="btn btn-primary btn-lg pull-left">SUBMIT</button> 
 
</div>

来源

2017-06-01 06:24:42 prasanth

我尝试了两个答案，但都没有工作。我的j查询版本3.2.1和浏览器是铬。 – Manusha

@Manusha看到我更新的答案.'jquery v 3.2.1'不是问题 – prasanth

我感谢你的帮助。但stiil相同。没有变化，我不明白为什么。 – Manusha

添加$('#addr'+(i-1)).find('input').attr('disabled',true);你的逻辑

演示：https://jsfiddle.net/kw4koyvk/

$(document).ready(function(){ 
     var i=1; 
    $("#add_row").click(function(){ 
     $('#addr'+(i-1)).find('input').attr('disabled',true); 
     $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input type='text' name='uid"+i+"' placeholder='User ID' class='form-control input-md'/></td><td><input type='text' name='uname"+i+"' placeholder='Name' class='form-control input-md'/></td><td><input type='text' name='nic"+i+"' placeholder='NIC' class='form-control input-md'/></td><td><input type='text' name='amount"+i+"' placeholder='Amount' class='form-control input-md'/></td><td><input type='date' name='dt"+i+"' placeholder='Date' class='form-control input-md'/></td>"); 

     $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>'); 
     i++; 
    }); 
});

来源

2017-06-01 06:25:58 Rahul

动态添加新行到表中使用按钮单击php

回答

相关问题