Question

我使用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++; 
  });
});

Answer 1

在添加新行之前，只需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>

Answer 2

将$('#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++; 
  });
});

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

2 个答案: