如何提取mysql列值并将其放在同一页面的<div>中?

时间:2017-06-15 15:12:59

标签: javascript php html mysql

很抱歉,如果问题不明确我想要做的是这样的事情:

假设我有一个由这些行组成的表:

//filename: stock.php
<?php
$result = mysqli_query($db, "SELECT item_id item_name, item_price, item_desc FROM items");
while($show = mysqli_fetch_array('$result')){
    $item_id = ($show['item_id']);
    $item_name = ($show['item_name']);
    $item_price = ($show['item_price']);
    $item_desc = ($show['item_desc']);
?>

<tr>
<td class="item_id"><?php echo"$item_id"; ?></td>
<td class="item_name"><?php echo"$item_name"; ?></td>
<td class="item_price"><?php echo"$item_price"; ?></td>
<td class="item_desc"><?php echo"$item_desc"; ?></td>
<td><a href="#editItem" class="edit_item">Edit Item</a></td>
</tr>
<?php
}
?>

我想要做的是,当我点击该编辑项链接时,我将转到div,并且在该div上,来自mysql数据库的具有相同项ID的所有数据将被拉出,推出在同一网页上的弹出式div中的文本框中(无需刷新页面,表格中列出的数据不是全部,所以我不能只是从那里拉出来,因为它没有' t有到达日期,项目数量和其他东西的信息,所以我该如何实现?

1 个答案:

答案 0 :(得分:0)

您需要先查看文档,但这里仍然是一个示例:

Update data in a table with jquery and ajax

http://mrbool.com/how-to-add-edit-and-delete-rows-of-a-html-table-with-jquery/26721

http://www.9lessons.info/2011/03/live-table-edit-with-jquery-and-ajax.html

模态弹出:

<div id="edit_company_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-header">
            <button type="button" class="close" id="edit_company_modal_close" data-dismiss="modal" aria-hidden="true">X</button>
            <h3 id="myModalLabel">Edit Company</h3>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" id="edit_company_form">
            <div class="control-group">
                <label class="control-label" for="focusedInput">Company Name*</label>
                    <div class="controls">
                    <input class="input focused" id="company_name" name="company_name" type="text">
                     <span id="company_name_error" class="error"></span>
                    </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="focusedInput">Invoice Options*</label>
                    <div class="controls" id="invoice_select_container">
                    <!--Selection box will come here dynamically-->
                    </div>
            </div>  
                <div class="form-actions">
                                <input type="hidden" id="edit_company_id" name="edit_company_id">
                                <input type="button" class="btn btn-primary" id="update_company_button" name="update_company_button" value="Update Company" >
                 </div>  
             </form>  
            </div>
</div>

显示表:

    <table class="table table-striped table-bordered bootstrap-datatable datatable">
      <thead>
        <tr>
            <th>SI No</th>
            <th>Company</th>
            <th>Is Invoiced</th>
            <th>Actions</th>
       </tr>
       </thead>   
        <tbody>
       <?php
       if(mysql_num_rows($company_set)>0)
       { 
       $i=1;
 while($data_row=mysql_fetch_assoc($company_set))
{
$invoice_option_name=$common->getInvoiceOptionName($data_row['is_invoiced']);
?>
<tr id="<?php echo $data_row['id']; ?>">
<td><?php echo $i; ?></td>
<td><?php echo $data_row['name']; ?></td>
<td><?php echo $invoice_option_name; ?></a></td>
<td class="center">
<a class="btn btn-info edit_company_button" href="#">
<i class="icon-edit icon-white"></i>  
Edit                                           
</a>
<a class="btn btn-danger delete_company_button" href="#">
<i class="icon-trash icon-white"></i>  
Delete                                          
</a>
</td>
<?php } ?>
</tr>
<?php $i++; } } ?>
</tbody>
</table>

Jquery Call Filled Popup

$(document).on('click','.edit_company_button',function(){
var company_id = $(this).closest('tr').attr('id'); // table row ID 
$('#edit_company_id').val(company_id);
var data ='company_id='+company_id+'&task=edit_company';
$.ajax({
                  type: "POST",
                  url: baseUrl+'classes/common.php',
                  data: data,
                  dataType:"json",
                  success: function(data) 
                          { 
                            $('#company_name').val(data.company_data.name);
                            var invoice_select_box=  "<select id='edit_invoice' name='edit_invoice' data-rel='chosen'>";                 
                                for(var i=0; i<data.invoice_options.length; i++)
                                {
                                    if(data.company_data.is_invoiced==data.invoice_options[i].id)
                                    invoice_select_box+= "<option value='"+data.invoice_options[i].id+"'>"+data.invoice_options[i].name+"</option>";
                                }
                                for(var i=0; i<data.invoice_options.length; i++)
                                {   
                                    if(data.company_data.is_invoiced!=data.invoice_options[i].id)
                                    invoice_select_box+= "<option value='"+data.invoice_options[i].id+"'>"+data.invoice_options[i].name+"</option>";
                                }
                                    invoice_select_box+= "</select>"+
                                                 "<span id='edit_invoice_error' class='error'></span>";
                            $('#invoice_select_container').html(invoice_select_box);                     
                            $('#edit_company_modal').modal('show');
                          }
});
});

Jquery更新

$(document).on('click','#update_company_button',function(){
var company_id = $('#edit_company_id').val();
var company_name = $('#company_name').val();
var invoice_option_id = $('#edit_invoice').val();
var data ='company_id='+company_id+'&company_name='+company_name+'&invoice_option_id='+invoice_option_id+'&task=update_company';
$.ajax({
                  type: "POST",
                  url: baseUrl+'classes/common.php',
                  data: data,
                  dataType:"json",
                  success: function(data) 
                          { 
                            if(data.success)
                            {       
                                $("#"+company_id+"  td:nth-child(2)").text(data.company_data.name);
                                 $("#"+company_id+"  td:nth-child(3)").text(data.invoice_name);
                                 $('#edit_company_modal_close').click();
                                 customResetDataTable();
                            }   
                        }
        });
});