带有编辑/删除表行的jquery模式对话框
我的目标是：拥有一个带有编辑/删除按钮的数据表。“编辑”按钮打开一个模式对话框，其中表单预先填充了相应行的详细信息。我很难让ajax在运行中实际填写表单，所以我只是在modal中打开一个编辑页面并传递id。对于第一个编辑按钮，它非常有效。在后续的编辑按钮上根本不会发生任何操作。我不知所措。我不是javascript或jquery专家，但已经在Google上搜索过了，还没有找到任何东西来处理我的情况（或者我可以成功地适应）。我很确定它包含了.和/或.siblings，但我不确定如何实现。以下是除样式和一些用于验证用户的PHP之外的所有代码：带有编辑/删除表行的jquery模式对话框,jquery,jquery-ui,dialog,modal-dialog,Jquery,Jquery Ui,Dialog,Modal Dialog,我的目标是：拥有一个带有编辑/删除按钮的数据表。“编辑”按钮打开一个模式对话框，其中表单预先填充了相应行的详细信息。我很难让ajax在运行中实际填写表单，所以我只是在modal中打开一个编辑页面并传递id。对于第一个编辑按钮，它非常有效。在后续的编辑按钮上根本不会发生任何操作。我不知所措。我不是javascript或jquery专家，但已经在Google上搜索过了，还没有找到任何东西来处理我的情况（或者我可以成功地适应）。我很确定它包含了.和/或.siblings，但我不确定如何实现。以下是除样
<link type="text/css" href="js/css/start/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<!--<script type="text/javascript" src="js/js/jquery-1.4.4.min.js"></script>-->
<script type="text/javascript" src="js/jquery-1.5.1rc1.js"></script>
<script type="text/javascript" src="js/js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
//table highlights & such
$(document).ready(function() {
$(".striped tr").mouseover(function() {
$(this).addClass("highlight");
});
$(".striped tr").mouseout(function() {
$(this).removeClass("highlight");
});
$(".striped tr").toggle(function() {
$(this).addClass("selected");
}, function () {
$(this).removeClass("selected");
});
$(".striped tr:nth-child(odd)").addClass("odd");
});
$(function(){
$('#edit_number').dialog({ autoOpen: false,width: 400,height: 500, modal:true, open: function() {
var editqs = 'process.php?action=edit_num_form&id=' + $(this).data('num_id') + '&rep_id=<?php echo $rep_id ?>';
$("#edit_number").load(editqs);
}
});
$('.edit_number_link').live('click', function() {
var id = $(this).closest('tr').data('id');
$("#edit_number").data('num_id', id).dialog('open');
return false;
});
});
</script>
</head>
<body>
<table style="border: 1px solid #000;" border=1 cellpadding=0 cellspacing=0 class="striped">
<thead>
<tr style="background-color: #ccc;">
<th align=left width=100>Name</th>
<th align=left width=100>External</th>
<th align=left width=100>Internal</th>
<th align=left width=50>Options</th>
<th align=left width=50>Hours</th>
<th align=left width=150>Notes</th>
<th colspan=2> </th>
</tr>
</thead>
<?php
//db connection stuff
while($row = mysql_fetch_array($result))
{
$name = $row['name'];
$external = $row['external'];
$internal = $row['internal'];
if ($internal == "")
$internal = " ";
$options = $row['options'];
if ($options == "")
$options = " ";
$hours = $row['hours'];
if ($hours == "")
$hours = " ";
$comments = $row['comments'];
if ($comments == "")
$comments = " ";
$id = $row['id'];
echo "<tr data-id=".$id."><td>" . $name . "</td>";
echo "<td>" . build_link($external,$rep_id, "ext", $userfound) . "</td>";
echo "<td>" . $internal . "</td>";
echo "<td>" . $options . "</td>";
echo "<td>" . $hours . "</td>";
echo "<td>" . $comments . "</td>";
//echo "<td><a href='process.php?action=edit_num_form&id=" . $id . "&rep_id=".$rep_id."' title='Edit'><img src='edit.png' alt='Edit' border='0'></a></td>";
echo "<td><a href='#' title='Edit' class='edit_number_link'><img src='edit.png' alt='Edit' border='0'></a></td>";
echo "<td><a href='process.php?action=delete_num&id=" . $id . "&rep_id=".$rep_id."' title='Delete'><img src='delete.png' alt='Delete' border='0'></a></td>";
//echo "<td><a href='?action=delete' class='delete'>Delete</a></td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
<div id="edit_number" title="Edit Number">
</div>
</body>
</html>
//表格重点&如
$（文档）.ready（函数（）{
$（“.striped tr”）.mouseover（函数（）{
$（此）.addClass（“突出显示”）；
});
$（“.striped tr”）.mouseout（函数（）{
$（此）.removeClass（“突出显示”）；
});
$（“.striped tr”）.toggle（函数（）{
$（此）.addClass（“选定”）；
}，函数（）{
$（此）.removeClass（“选定”）；
});
$（“.striped tr:nth child（odd）”）.addClass（“odd”）；
});
$（函数（）{
$（“#编辑_编号”）。对话框（{autoOpen:false，宽度：400，高度：500，模式：true，打开：函数（）{
var editqs='process.php？action=edit_num_form&id='+$（this.data（'num_id'）+'&rep_id='；
$（“#编辑#编号”）。加载（编辑）；
}
});
$（'.edit_number_link'）.live（'单击'，函数（））{
var id=$（this）.closest（'tr'）。data（'id'）；
$（“#编辑#编号”）.data（'num#id'，id.）.dialog（'open'）；
返回false；
});
});
名称
外部的
内部的
选择权
小时
笔记
任何帮助都将不胜感激。谢谢 当您获得相同的ID“编辑号码链接”时，您应该尝试：
$("#edit_number_link").each(function() {
$(this).click(function(){
var id = $(this).closest('tr').attr('data-id');
$("#edit_number").data('num_id', id).dialog('open');
return false;
});
});
或者类似的东西。当您获得相同的ID“编辑号码链接”时，您应该尝试：
$("#edit_number_link").each(function() {
$(this).click(function(){
var id = $(this).closest('tr').attr('data-id');
$("#edit_number").data('num_id', id).dialog('open');
return false;
});
});
或者类似的东西。因为我看不到整个代码集…编辑编号链接在编辑编号内吗？如果是这样，则需要使用jQuery的live（）方法绑定事件，因为DOM在初始页面加载后正在更新 另外，您不需要使用
attr（'data-id'）.data（）.data（'id'）#edit_number$('.edit_number_link').bind('click', function() {
var id = $(this).closest('tr').data('id');
$("#edit_number").data('num_id', id).dialog('close').dialog('open');
return false;
});
更新在看到代码并在JSFIDLE上实际试用之后，我发现，当您单击其他编辑链接时，对话框窗口已经打开，并且不会触发打开的回调。您需要做的是更新代码，以便在打开对话框之前关闭对话框。我上面的代码已更新为包含
.dialog（'close'）livebindattr（'data-id'）.data（）.data（'id'）#edit_number$('.edit_number_link').bind('click', function() {
var id = $(this).closest('tr').data('id');
$("#edit_number").data('num_id', id).dialog('close').dialog('open');
return false;
});
更新在看到代码并在JSFIDLE上实际试用之后，我发现，当您单击其他编辑链接时，对话框窗口已经打开，并且不会触发打开的回调。您需要做的是更新代码，以便在打开对话框之前关闭对话框。我上面的代码已更新为包含
.dialog（'close'）livebind.dialog（'close'）.dialog（'close'）