在td中动态添加具有唯一输入ID的行

时间:2014-03-08 11:03:03

标签: javascript php html

下面的代码显示了包含三列的10行。输入ID为type_1,type_2,type_3,type_4,type_5(其余两列为room_1至room_5,quantity_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。我希望每次单击按钮时动态生成上述行,同时我想处理{{1}的id's首先点击第一列的id将是type_1到type_5,第二次点击它们应该是type6到type_10。

input

2 个答案:

答案 0 :(得分:0)

你应该使用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:

(文档)$。就绪(函数(){

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

$( 'myButton的')。点击(函数(){

  $.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
      }
  })     

}); });

这是一个简单的HTML。请注意,您应该将前五行记录的最后一行ID保存到一个id为#base_id的隐藏输入中。每次使用单击按钮时也应更改此值。

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

答案 1 :(得分:0)

您可以使用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>