Question

我有以下问题。这是我的index.php：

<div id="tabs">
     <ul>
         <li><a href="#tabs-1">A projects</a></li>
         <li><a href="#tabs-2">B projects</a></li>
     </ul>
     <div id="tabs-1">
         <?php echo loadTabs(1);?>
    </div>
    <div id="tabs-2">
        <?php echo loadTabs(2);?>
    </div>

以下是构建表的两个php函数：

function loadTabs($settingId){
$query = 'select * from deployments_settings where id="'.$settingId.'"';
$result = mysql_query($query);
$html = '<div id="tab'.$settingId.'_container">';
     while ($row = mysql_fetch_array($result)) {
       $html .= '<div id="tab'.$settingId.'_buttons">';
       $html .= '<button id="add_project">'.$row['addbuttoncaption'].'</button>';
       $html .= '</div>';// id="tab[1..2]_button_add"
       $html .= '<div id="tab'.$settingId.'_content">';
       $html .= '<br/>';
       $html .= loadTables($settingId, $row['deploymentstable']);
       $html .= '</div>';//id=tab[1..2]_[first..second]content
     }//while        
$html .= '</div>';// id="tab[1..2]_container"
return $html;}

function loadTables( $tableId, $tableName ) {
$query = 'select * from '.$tableName.' order by `id` desc';
$result = mysql_query($query);
$html  = '<table id="tab'.$tableId.'_table" class="tabTable">';
$html .= '<thead><tr>';
$html .= '<th>#</th>';
$html .= '<th>Project number</th>';
$html .= '<th>Deadline</th>';
$html .= '<th>Assign to</th>';
$html .= '<th>Description</th>';
$html .= '<th>Action</th>';
$html .= '</tr></thead>';
$html .= '<tbody>';
     $countRow = 0;
     while ($row = mysql_fetch_array($result)) {
      $html .='<tr>';
      $html .= '<td class="colID">'.++$countRow.'</td><td class="colPN">'.$row['name'].'</td><td class="colDL">'.$row['deadline'].'</td><td class="colAT">'.$row['assignto'].'</td><td>'.$row['description'].'</td>';
      $html .= '<td class="colACT">';
      $html .= '<button id="edit_action">Edit</button>';
      $html .= '<button title="Remove" contentReload="'.$tableId.'" rrTable="'.$tableName.'" rrID="'.$row['id'].'" id="delete_action">Delete</button>';
      $html .= '</td>';
      $html .= '</tr>';
      }//while
$html .= '</tbody>';
$html .= '</table>';
return $html;}

这是我的JQuery部分For button delete。

$( "button#delete_action")
   .button({icons: {primary: "ui-icon-circle-minus"},  text: false})
   .click(function() {
         var contentReload = $(this).attr("contentReload");
        //alert(contentReload);
         if(confirm("Press OK to confirm DELETE operation")) {
           $.post("coreDB.php", {
                    action: 3,
                    rrTable: $(this).attr("rrTable"),
                    rrID:    $(this).attr("rrID"),
                    contentReload: $(this).attr("contentReload")
                },
                function(data, textStatus, XMLHttpRequest) {
                   //alert(data);
                   $("#tab"+ contentReload + "_table").html(data);
                }); //post
        } //if then condition
 });

问题是这个 - ＆gt;当“删除按钮”成功运行时，它会返回我重新应用于表对象$("#tab"+ contentReload + "_table").html(data);的表输出。但不幸的是，它没有重新加载表，所有来自JQuery的好东西也不起作用。

我需要在JQuery端工作才能重新加载表。

提前谢谢！

Answer 1

我还没有真正阅读上面的代码，因为它很难阅读，但是如果你想删除表中的行，我会向你的删除脚本发出一个AJAX调用。然后，如果AJAX调用返回true，则只需使用JavaScript从表中删除该行。这意味着您的页面不必刷新。

Answer 2

问题不是很明确，你的意思是“它不会重新加载表格”？

重新加载后，您的按钮不会闪烁：单击只能将事件附加到页面中的元素。由于您删除然后创建新按钮，因此没有点击它们....

您需要在这些新按钮上重新应用上面的jquery代码（$（“button＃delete_action”）。button ...），或者您可以使用live（）： http://api.jquery.com/live/

在你的例子中：

<script type="text/javascript">
function makeButtons()
{
    $( "button#delete_action")
        .button({icons: {primary: "ui-icon-circle-minus"},  text: false});
}
$(document).ready(function() 
{
    $( "button#delete_action").live('click',function() {
     var contentReload = $(this).attr("contentReload");
    //alert(contentReload);
     if(confirm("Press OK to confirm DELETE operation")) {
       $.post("coreDB.php", {
                action: 3,
                rrTable: $(this).attr("rrTable"),
                rrID:    $(this).attr("rrID"),
                contentReload: $(this).attr("contentReload")
            },
            function(data, textStatus, XMLHttpRequest) {
               //alert(data);
               $("#tab"+ contentReload + "_table").html(data);
               makeButtons();
            }); //post
    } //if then condition

}）; }

每次使用实时但重绘界面为所有人分配一次。您可以通过将此选择器作为参数传递给makeButtons，仅将makeButtons应用于“#tab”+ contentReload +“_ table”内的按钮来优化它。

使用JQuery重新加载表

2 个答案: