Ajax返回并将HTML数据添加到表格行

我有Ajax返回HTML数据的问题。想法是我有用户可以添加或删除表格行的动态表格，每个表格行中都有显示模式的按钮和用户可以选择的项目，但是用户添加行并选择项目后，项目不会到第一行新排。Ajax返回并将HTML数据添加到表格行

请帮助。

这是我的HTML：

<tr id='addr0' class="itemsGroup"> 
        <td> 
        1 
        </td> 
        <td width="240px"> 
         <div class="input-group" > 
       <input type="text" name="barang_id" class="form-control" value="<?php echo @$rowID->barang_id != '' ? $rowID->barang_id : $this->session->flashdata('barang_id') ;?>"> 
       <span class="input-group-addon" id="basic-addon1"> 
       <a href="#myModalItems" class="trash" role="button" data-toggle="modal"><span class="glyphicon glyphicon-list"></span></a></span> 
         </div> 
       </td> 
        <td> 
        <input type="text" name="barang_name[]" class="form-control" > 
        </td> 
        <td> 
        <input type="text" name="barang_satuan[]" class="form-control" > 
        </td> 
        <td> 
        <input type="text" name="barang_unit_price[]" class="form-control" > 
        </td> 
        <td> 
        <input type="text" name="barang_qty[]" class="form-control" > 
        </td> 
       </tr>

我的情态：选择复选框我使用这个脚本

<div class="modal-header">  
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="myModalLabel">Items</h4> 
    </div> 
    <div class="modal-body"><div class="panel panel-default" > 
        <div class="panel-heading"> 
        <table id="mytablex" class="display" > 
         <thead> 
         <tr > 
          <th width="55px" style="text-align:center;">&nbsp;</th> 
          <th width="55px" style="text-align:center;">No.</th> 
          <th width="240px" style="text-align:center;">Item No.</th> 
          <th width="240px" style="text-align:center;">Item Name</th> 
         </tr> 
         </thead> 
         <tbody> 
          <?php 
          $counter = 1; 
          if ($resultBarang) { 
          foreach ($resultBarang as $row) { 

          if ($counter%2 ==0) { $class = 'list01';}else {$class = 'list02';}  
          ?> 
          <tr class="<?php echo $class;?>"> 
          <td width="55px" align="center"><input type="radio" onclick="getItemsID(this.value);" name="supid" id="supid" value="<?php echo $row->barang_id;?>"></td> 
          <td width="55px" align="center"><?=$counter?>.</td> 
          <td width="240px" ><?=$row->barang_no;?></td> 
          <td width="240px" ><?=$row->barang_name;?></td> 
          </tr> 
          <?php $counter++;}} ?> 
         </tbody> 

         </table> 
         </div> 
         </div> 
    </div> 
    <div class="modal-footer"> 
      <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Close</button> 
      </div> 

</div> 
</div> 
</div>

后：

function getItemsID(supid){ 
     $.ajax({ 
     type: 'post', 
     url: '<?php echo base_url();?>admin/po_trans_po/getItemsId', 
     data:'id='+supid, 
        success: function(data){ 
         $(".itemsGroup").html(data); 
      $('#myModalItems').modal('hide'); 
     } 
     }); 
    }

，然后这是我的PHP文件：

function getItemsId() 
{ 
    $id = $this->input->post('id'); 
    $resultBarang = $this->db->query("select * from `st_po_barang` a,st_po_harga_barang c 
        where c.barang_id = a.barang_id 
        and now() between c.harga_start_date and c.harga_end_date 
        and a.barang_id = $id 
        "); 

    $resultBarang = $resultBarang->row(); 
    echo '    <td>    '; 
    echo '    1     '; 
    echo '    </td>    '; 
    echo '    <td width="240px"> '; 
    echo '    <div class="input-group" >'; 
    echo ' <input type="text" name="barang_id" class="form-control" value="'.$resultBarang->barang_no.'"> '; 
    echo '   <span class="input-group-addon" id="basic-addon1">                           '; 
    echo '   <a href="#myModalItems" class="trash" role="button" data-toggle="modal"><span class="glyphicon glyphicon-list"></span></a></span>       '; 
    echo '    </div>                                      '; 
    echo '   </td>                                       '; 
    echo '    <td>                                       '; 
    echo '    <input type="text" name="barang_name[]" value="'.$resultBarang->barang_name.'" class="form-control" >                         '; 
    echo '    </td>                                       '; 
    echo '    <td>                                       '; 
    echo '    <input type="text" name="barang_satuan[]" value="'.$resultBarang->barang_satuan.'"class="form-control" >                        '; 
    echo '    </td>                                       '; 
    echo '    <td>                                       '; 
    echo '    <input type="text" name="barang_unit_price[]" value="'.$resultBarang->harga_beli.'"class="form-control" >                       '; 
    echo '    </td>                                       '; 
    echo '    <td>                                       '; 
    echo '    <input type="text" name="barang_qty[]" class="form-control" >                         '; 
    echo '    </td>                                       '; 

    return 1; 
    //redirect('admin/po_trans_po'); 
}

如果我添加行表数据，这个返回数据保留在表中的第一行。如何返回所选行中的数据？

问候

来源

2015-12-21 reefman

使用.append在表中添加数据有类itemsGroup

function getItemsID(supid){ 
      $.ajax({ 
      type: 'post', 
      url: '<?php echo base_url();?>admin/po_trans_po/getItemsId', 
      data:'id='+supid, 
         success: function(data){ 
          $(".itemsGroup").append(data); 
       $('#myModalItems').modal('hide'); 
      } 
      }); 
     }

来源

2015-12-21 05:13:36

我已经有追加，但没有运气，更新表中的行会增加里面的物品，由于使用 – reefman

在.itemsGroup <表类=“itemsGroup”>和阿贾克斯响应 –

相同的结果返回。因为如果1行工作正常，但是如果用户添加行，则选中的模块中的项目将继续显示在第一行而不是新行。 – reefman

我使用的rowid当用户点击情态动词的话，我更改JavaScript代码为：

function getItemsID(supid){ 
     ptrid = $('#ptrid').val(); 
     $.ajax({ 
     type: 'post', 
     url: '<?php echo base_url();?>admin/po_trans_po/getItemsId', 
     data:'id='+supid+'&ptrid='+ptrid, 
        success: function(data){ 
         $('#'+ptrid).closest("tr").html(data); 
         $('#myModalItems').modal('hide'); 
     } 
     }); 
    }

ptrid是我点击模态时通过的rowid。感谢

来源

2015-12-21 07:30:57 reefman

Ajax返回并将HTML数据添加到表格行

回答

相关问题