此表从数据库中提取记录。我想添加更新功能。所以我决定添加一个bootstrap popover来使行可编辑。因此,当用户单击地址时,弹出窗口会显示一个允许用户更新地址的字段。
单击“编辑”将更新地址。
问题 我不知道如何获取该被点击行的地址和ID所以我可以将信息提供给sql update语句。
以下是编辑按钮的代码
$(document).on("click", ".sucess", function() {
var address = $("#address").attr('value');
alert(address);
});
所以当我点击编辑时,它只会提醒第一行的值。
这是我的所有代码。
<?php
$con = mysqli_connect("localhost","root","","test");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}else {
echo "";
}
?>
<!--QUERY-->
<?php
$prepare_query = "SELECT * FROM customers";
$result = mysqli_query($con, $prepare_query);
?>
<table id="stock-table" class="display">
<thead>
<tr>
<th>Customer Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result)) {
?>
<div id="userlog" class="operator">
<tr>
<td><?php echo $row['CustomerName']?></td>
<td>
<a href="#" class="btn-row-popup-menu row"><?php echo
$row['CustomerAddress1']?>
<div style="display:none;">
<div class="btn-row-popup-menu-body">
<input type="text" class = "name" id="address"value = "<?php echo $row['CustomerAddress1']?>" >
<button class="btn-success sucess"> EDIT</button>
<button class="transaction-menu-legend delete" id="delete"> DELETE</button>
</div>
</div>
</a>
</td>
</tr>
</div>
<?php
}
?>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#stock-table').DataTable();
} );
//wHEN CLICK ON THE EDIT BUTTON INSIDE THE POPOVER
$(document).on("click", ".sucess", function() {
var address = $("#address").attr('value');
alert(address);
});
</script>
<!-- POPOVER -->
<script>
// Popover Menu initialize
$('.btn-row-popup-menu').popover({
placement: 'right',
trigger: 'click',
html: true,
title: function() {
return $(this).parent().find('.btn-row-popup-menu-head').html();
},
content: function() {
return $(this).parent().find('.btn-row-popup-menu-body').html();
}
}).on('show.bs.popover', function(e) {
if (window.activePopover) {
$(window.activePopover).popover('hide')
}
window.activePopover = this;
currentPopover = e.target;
}).on('hide.bs.popover', function() {
window.activePopover = null;
});
// Close popover when clicking anywhere on the screen
$(document).on('click', function(e) {
$('[data-toggle="popover"],[data-original-title]').each(function() {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
var target = $(e.target);
if (!target.is('.popover') && !target.is('.popover *') &&
!target.is('.btn-row-popup-menu') || target.is('.btn-popover-close')) {
(($(this).popover('hide').data('bs.popover') || {}).inState || {}).click
= false;
}
});
});
// Anchor popover to opening element
$(window).resize(function() {
console.log(currentPopover);
if (currentPopover.data('bs.popover').tip().hasClass('in') == true) {
currentPopover.popover('hide');
currentPopover.popover('show');
}
});
</script>
答案 0 :(得分:0)
您可以为每个客户创建简单表单,并将客户ID作为隐藏字段。在提醒地址的地方,您可以访问地址和ID,然后使用ajax进行sql更新。表格示例 -
<div id="userlog" class="operator">
<tr>
<td><?php echo $row['CustomerName']?></td>
<td>
<a href="#" class="btn-row-popup-menu row"><?php echo
$row['CustomerAddress1']?>
<div style="display:none;">
<div class="btn-row-popup-menu-body">
<form method="POST">
<input type="hidden" name="customerId" value="<?php echo $row['CustomerID']?>" >
<input type="text" class = "name" id="address" value = "<?php echo $row['CustomerAddress1']?>" >
<button class="btn-success sucess"> EDIT</button>
<button class="transaction-menu-legend delete" id="delete"> DELETE</button>
</form>
</div>
</a>
</td>
</tr>
</div>
和脚本:
$(document).on("click", ".sucess", function() {
var address = $(this).parent().find('input[name="address"]').val();
var custId = $(this).parent().find('input[name="customerId"]').val();
alert(address);
alert(custId);
// send these via ajax
});