Question

这是我的目标：拥有一个带编辑/删除按钮的数据表。编辑按钮打开一个模态对话框，其中的表单预先填充了相应行的详细信息。我无法让ajax工作以实时填写表单，所以我只是在模态中打开一个编辑页面并传递id。它非常适用于第一个编辑按钮。后续编辑按钮什么都没发生。我不知所措。我不是javascript或jquery专家，但已经google了，并没有找到任何东西来处理我的情况（或我可以成功适应）。我很确定它涉及.each和/或.sibilngs，但我不确定如何实现。除了样式和用于验证用户的一些PHP之外，以下是所有代码：

<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>&nbsp;</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 = "&nbsp;";
    $options = $row['options'];
    if ($options == "")
      $options = "&nbsp;";
    $hours = $row['hours'];
    if ($hours == "")
      $hours = "&nbsp;";
    $comments = $row['comments'];
    if ($comments == "")
      $comments = "&nbsp;";
    $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>

理想情况下，我可以从每个编辑按钮检索我的数据，以在真实模态（而不是外部页面）中加载表单，但至少需要额外的实例才能工作。

任何帮助将不胜感激。谢谢！

Answer 1

当您获得相同的ID“edit_number_link”时，您应该尝试：

$("#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;
    });
});

或类似的东西。

Answer 2

因为我看不到整个代码集... #edit_number里面是#edit_number_link吗？如果是这样，你需要使用jQuery的live（）方法来绑定事件，因为在初始页面加载后DOM正在更新。

此外，您不需要attr('data-id')，因为jQuery现在会将这些属性映射到.data()方法。您需要.data('id')来检索此值。

另一件事是你应该在使用课时使用ID。 ID被认为是唯一的，只使用一次。您应该将#edit_number_link更改为类，.edit_number_link。我不确定哪个容器是#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;
});

UPDATE 在看到代码并在jsfiddle上实际尝试之后，我发现发生的事情是当你点击其他编辑链接时，对话框窗口已经打开而不是点燃它的开放回调。您需要做什么更新代码，以便在打开对话框之前关闭对话框。我上面的代码已更新为包含.dialog('close')。此外，我已将live更改回bind，因为在这种情况下不需要。{/ p>

jquery模式对话框，用于表行的编辑/删除

2 个答案: