Javascript 在php中使用按钮单击动态地向表中添加新行_Javascript_Php_Html

Javascript 在php中使用按钮单击动态地向表中添加新行

javascript php html

Javascript 在php中使用按钮单击动态地向表中添加新行,javascript,php,html,Javascript,Php,Html,我已经用php创建了一个动态表。现在我想添加这个功能当我们点击提交按钮时，它会自动向数据库中添加数据并创建新行，而上一行则会被禁用，无法编辑。如何做到这一点 <?php session_start(); require_once "header.php"; ?> <body> <div class="text-center"> <h1>PAYMENT PAGE</h1> </div> <hr> <

我已经用php创建了一个动态表。现在我想添加这个功能

当我们点击提交按钮时，它会自动向数据库中添加数据并创建新行，而上一行则会被禁用，无法编辑。如何做到这一点

<?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++; 
  });
});


付款页

#
用户ID
名称
NIC
数量
日期
1.
提交
$（文档）.ready（函数（）{
var i=1；
$（“#添加_行”）。单击（函数（）{
$（'#addr'+i）.html（“+（i+1）+”）；
$（'#tab_logic'）。追加（''）；
i++；
});
});

尝试使用

$（'tr'）简单地禁用
前面所有的行
输入。在添加新行之前查找（'input'）。prop（'disabled'，true）

已更新jquery版本

3.2.1

$（文档）.ready（函数（）{
var i=1；
$（“#添加_行”）。单击（函数（）{
$（'tr'）.find（'input'）.prop（'disabled'，true）
$（'#addr'+i）.html（“+（i+1）+”）；
$（'#tab_logic'）。追加（''）；
i++；
});
});

付款页

#
用户ID
名称
NIC
数量
日期
1.
提交
添加$（'addr'+（i-1））.find（'input'）.attr（'disabled'，true）到您的逻辑
演示：
$（文档）.ready（函数（）{
var i=1；
$（“#添加_行”）。单击（函数（）{
$（'#addr'+（i-1））.find（'input'）.attr（'disabled'，true）；
$（'#addr'+i）.html（“+（i+1）+”）；
$（'#tab_logic'）。追加（''）；
i++；
});
});
我尝试了两个答案，但都不起作用。我的j query版本3.2.1和浏览器是chrome。@Manusha看到了我的更新答案。jquery版本3.2.1没有问题。我感谢你的帮助。但是仍然一样。没有变化。我不明白为什么。我发现了问题$（'tr'）.find（'input'）.prop（'disabled'，true）；此语句中缺少分号。非常感谢您的帮助。您如何将其提交到数据库？我尝试了：$.post（“add_test2.php”），{uid:uid+I}，函数（response）{console.log（response）；但它从未被调用。
$(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++; 
  });
});