在td中動態添加具有唯一輸入id的行

Question

下面的代碼顯示10行三列。 輸入的ID是type_1，type_2，type_3，type_4，type_5（其余兩列從room_1到room_5，從數量_1到quantity_5相同）。

<table id="dgsv_admin" style="width:950px; height:460px;">
    <thead>
        <tr>
            <th>Type</th>
            <th>Room</th>
            <th>Qty</th>
        </tr>
        <?php for($i=1;$i<=5;$i++)
        {?>

        <tr>
            <td><input id="type_<?php echo $i ?>" style="width:64px;" class="easyui-validatebox"  data-options="required:true"  /></td>
            <td><input id="room_<?php echo $i ?>" style="width:64px;" class="easyui-numberbox"  required="true" /></td>             
            <td><input id="quantity_<?php echo $i ?>" style="width:64px;" class="easyui-numberbox"  data-options="required:true" /></td>
        </tr>
        <?php }?>
    </thead>
</table>

現在我的問題是我有一個按鈕ADD 5 ROWS。我想在每次單擊按鈕時動態生成上述行，同時我想處理input的id's ，就像第一次單擊第一列的ID一樣將type_1設置為type_5，第二次單擊時將type6設置為type_10。

<button class="btn btn-success">ADD 5 ROWS</button>

Answer 1

您應該將ajax用於此類過程。

PHP腳本：

if（isset（$ _ POST ['send_row_request']））{//處理請求

$base_id  = $_POST['base_id'];
$_SESSION['next_request_base_id'] = $base_id + 5; // setting this for the next request.



// get the data from DB. You have already written the function for you to get
// 5 rows of DB based on a base id give,
$result_array = get_db_data($base_id);

echo json_encode($result_array)

/***
Or if you are not comfortable with JSON you can loop through array and echo them 
on each iteration
***/

}

這里是jQuery AJAX：

$（document）.ready（function（）{

  var base_id = $('#base_id').val();

$（'myButton'）。click（function（）{

  $.ajax({
      url : 'url_to_your_php_script',
      data : ({send_row_request : 'true', 'base_id' : base_id});
      success : function(msg)
      {
        // do the stuff here and don't forgot to update base_is hidden field on the last record process
      }
  })     

}）; }）;

這是Simpel HTML。 請注意，您應該將前五個記錄的最后一行的ID保存到ID為例如#base_id的隱藏輸入中。 每次使用該按鈕時，也應更改此值。

<input type='hidden' value='<?php echo $base_id; ?>' id='base_id' />

Answer 2

您可以使用php會話變量在頁面請求中動態創建行：

<?php
session_start();
if(isseet($_POST['your_button_id']))
{
    if(isset($_SESSION['row_id']))
        $_SESSION['row_id']=$_SESSION['row_id']+1;
    else
        $_SESSION['row_id']=1;
}
?>
<table id="dgsv_admin" style="width:950px; height:460px;">
    <thead>
        <tr>
            <th>Type</th>
            <th>Room</th>
            <th>Qty</th>
        </tr>
        <?php if(isseet($_POST['your_button_id']))
        {
            $row =$_SESSION['row_id'];
            for($i=$row;$i<=$row+4;$i++)
            {        
        ?>

        <tr>
            <td><input id="type_<?php echo $i ?>" style="width:64px;" class="easyui-validatebox"  data-options="required:true"  /></td>
            <td><input id="room_<?php echo $i ?>" style="width:64px;" class="easyui-numberbox"  required="true" /></td>             
            <td><input id="quantity_<?php echo $i ?>" style="width:64px;" class="easyui-numberbox"  data-options="required:true" /></td>
        </tr>
        <?php } $_SESSION['row_id']=$_SESSION['row_id']+4; } ?>
    </thead>
</table>