很抱歉,如果问题不明确我想要做的是这样的事情:
假设我有一个由这些行组成的表:
//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有到达日期,项目数量和其他东西的信息,所以我该如何实现?
答案 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();
}
}
});
});